hamedfaryabi/vue-headless-dp

No UI Vue.js date picker composable.

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.