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.