vue-headless-dp
v0.6.1
Published
Vue Headless Date Picker is a no ui date picker for vuejs 3
Downloads
35
Maintainers
Readme
Vue Headless Date Picker
Vue Headless Date Picker is a flexible and customizable date picker composable for Vue 3 that allows you to easily add date selection functionality to your Vue.js applications.
Features
- Supports single-date, multi-date, and range-date selection modes.
- Equal-weeks option for consistent week display.
- Date range limiting with minDate and maxDate options.
- Easily disable specific dates.
- No UI, giving you complete control over the user interface.
Installation
To get started, install the vue-headless-date-picker
package from npm:
npm install @hamedfaryabi/vue-headless-date-picker
# or
yarn add @hamedfaryabi/vue-headless-date-picker
Usage
import { useHeadlessDatePicker } from "@hamedfaryabi/vue-headless-date-picker";
// Import a `@date-io` adapter, in this case, DateFnsAdapter
import DateFnsAdapter from "@date-io/date-fns";
// Create a new instance of the DateFnsAdapter
const adapter = new DateFnsAdapter();
const dp = useHeadlessDatePicker(adapter, {
selectType: "single",
equalWeeks: false,
minDate: new Date(),
});
dp.selected.value = new Date(2022-01-12);
console.log(dp.currentYear.value); // 2022
Documentation
useHeadlessDatePicker(adapter, options)
This function initializes the Vue Headless Datepicker and returns an object containing various properties and methods to manage the date picker's state and behavior.
Parameters:
adapter
(required): An instance of a date adapter that implements@date-io
adapters. This adapter is used for date-related operations.options
(optional): An object containing configuration options for the date picker. See Options for available options.
Returns:
An object with the following properties and methods:
| Property/Method | Description | Type |
|-------------------------------------|--------------------------------------------------------------------------------------|-----------------------------|
| state
| An object that holds the internal state of the date picker, including selected dates, current month, and more. | Object |
| getMonthOfDate(date: Date)
| A function that takes a Date
object and returns a DPMonth
object representing the month containing the provided date. | Function |
| isDateSelected(date: Date)
| A function that checks if a given date is selected according to the date picker's selection mode. | Function |
| isDateDisabled(date: Date)
| A function that checks if a given date is disabled based on the provided disabled dates. | Function |
| currentMonth
| A computed property that gets or sets the current month of the date picker. It returns a DPMonth
object. | Computed Property |
| currentYear
| A computed property that gets or sets the current year of the date picker. | Computed Property |
| selected
| A computed property that gets or sets the selected date(s) based on the date picker's selection mode. | Computed Property |
| disabled
| A computed property that gets or sets the disabled date(s). | Computed Property |
| minDate
| A computed property that gets or sets the minimum selectable date. | Computed Property |
| maxDate
| A computed property that gets or sets the maximum selectable date. | Computed Property |
Note: All computed properties have getters and setters. for example:
datePicker.minDate.value = new Date(); // set the min date
const min = datePicker.minDate; // returns the min date
Options
Basic configuration options for the date picker
| Property | Description | Type |
|--------------------|--------------------------------------------------------------------------------------------------------------|-----------|
| initialMonth
| Value to initialize the month of the date picker. If not provided, displays the current month. | number
|
| initialYear
| Value to initialize the year of the date picker. If not provided, displays the current year. | number
|
| equalWeeks
| If true
, returns days of the previous month in the first week and days of the next month in the last week. | boolean
|
| selectType
| Defines the selection type for the date picker (single
, multiple
, or range
). | string
|
| disabled
| An array of disabled dates. | Date[]
|
| minDate
| The minimum valid date of the date picker. | Date
|
| maxDate
| The maximum valid date of the date picker. | Date
|
License
This project is licensed under the MIT License - see the LICENSE file for details.