Vue DatePicker

A lightweight and customizable Vue 3 date picker component with support for date, time, date-time, week, and month selection modes, featuring accessibility and responsive design.

Features

- Multiple Selection Modes: Supports date, time, dateTime, week, and month modes.
- Responsive Design: Adapts to various screen sizes with a clean, modern UI.
- Accessibility: Includes ARIA attributes and keyboard navigation for enhanced usability.
- Customizable: Flexible props for date format, time format, min/max dates, disabled dates, and more.
- Configurable Time Intervals: Supports any minute interval (1-60 minutes) for time selection in both TimePicker and DatePicker components.
- Performance Optimized: Uses Vue 3 composition API for efficient rendering and state management.
- TypeScript Support: Fully typed with TypeScript for better developer experience.

Demo

Live Demo

Installation

``bash


npm

npm install v-datepicker-lite

yarn

yarn add v-datepicker-lite

pnpm

pnpm add v-datepicker-lite
`

> Don't forget to follow me on GitHub!

Usage

Below are examples demonstrating different configurations of the Vue DatePicker component.

$3

A simple date picker for selecting a single date.

`vue



`

$3

Select an entire week starting from the first day of the selected week.

`vue



`

$3

Select a month and year.

`vue



`

$3

Select both date and time with configurable minute intervals.

`vue



`

$3

Restrict date selection with minimum date and disabled date ranges.

`vue



`

$3

A time picker component for selecting time only, with configurable minute intervals.

`vue



`

Props

| Prop | Type | Default | Description |
| ---------------- | ------------------------ | -------------- | ------------------------------------------------------------------------------ |
| value | Date \| string \| null | null | v-model binding for the selected date/time. |
| mode | string | 'date' | Selection mode: date, time, dateTime, week, or month. |
| format | string | 'YYYY-MM-DD' | Date format for string output (e.g., YYYY-MM-DD HH:mm). |
| timeFormat | string | '24h' | Time format: 12h or 24h. |
| minuteInterval | number | 1 | Minute selection interval (1-60). Controls minute options displayed in picker. |
| minDate | string | undefined | Minimum selectable date (ISO format: YYYY-MM-DD). |
| maxDate | string | undefined | Maximum selectable date (ISO format: YYYY-MM-DD). |
| disabledDates | Array | [] | Array of disabled date ranges: { start: string, end?: string }. |
| disabled | boolean | false | Disables the date picker. |
| readonly | boolean | false | Makes the date picker read-only. |

Props - TimePicker

| Prop | Type | Default | Description |
| ---------------- | ---------------- | ------- | ------------------------------------------------------------------------------ |
| modelValue | string \| null | null | v-model binding for the selected time (format: HH:mm). |
| timeFormat | string | '12h' | Time format: 12h or 24h. |
| minuteInterval | number | 1 | Minute selection interval (1-60). Controls minute options displayed in picker. |

Events

| Event | Payload Type | Description |
| -------------- | ------------------------ | ---------------------------------------- |
| update:value | Date \| string \| null | Emitted when the selected value changes. |
| change | Date \| string \| null | Emitted when the selected value changes. |
| select | Date \| string \| null | Emitted when a date/time is selected. |

Events - TimePicker

| Event | Payload Type | Description |
| ------------------- | ------------ | --------------------------------------- |
| update:modelValue | string | Emitted when the selected time changes. |

Minute Interval Configuration

The minuteInterval prop allows you to customize the minute options displayed in both the TimePicker and DatePicker (when in dateTime or time mode). This is useful for:

- Scheduling applications: Set 15 or 30-minute intervals for appointment booking
- Time tracking: Use 5 or 10-minute intervals for precise time logging
- Simplified selection: Use 60-minute intervals to show only full hours

$3

`vue

















`

Styling

Customize the appearance using the following CSS variables defined in style.css:

`css
:root {
--date-picker-primary: #2d66ed;
--date-picker-primary-fg: #ffffff;
--date-picker-text: inherit;
--date-picker-border: #00000020;
--date-picker-secondary: #00000010;
--date-picker-hover: #00000010;
--date-picker-disabled: #000000b4;
--date-picker-today: #00000010;
--date-picker-radius: 0.375em;
--timer-picker-bg: white;
--timer-picker-input-bg: transparent;
--timer-picker-input-border: #00000020;
--timer-picker-input-text: inherit;
--timer-picker-input-text-size: 0.875em;
--timer-picker-input-border-radius: 0.375em;
--timer-picker-input-padding: 0.5em 0.75em;
}
``

Author

safdar-azeem