Datepicker

The Datepicker component provides a calendar picker with date selection, time picker, and date range support.

Installation

npm install @duskmoon-dev/el-datepicker

Usage

import '@duskmoon-dev/el-datepicker/register';
<el-dm-datepicker placeholder="Select a date..."></el-dm-datepicker>

Live Demo

Basic Datepicker

Properties

PropertyTypeDefaultDescription
valuestring''ISO date string
disabledbooleanfalseDisables the datepicker
placeholderstring'Select date'Placeholder text
formatstring'YYYY-MM-DD'Display format
min-datestring-Minimum selectable date
max-datestring-Maximum selectable date
rangebooleanfalseEnable date range selection
show-timebooleanfalseInclude time picker
size'sm' | 'md' | 'lg''md'Size variant

With Time Picker

Date and Time

<el-dm-datepicker placeholder="Select date and time..." show-time></el-dm-datepicker>

Date Range

Date Range

<el-dm-datepicker placeholder="Select date range..." range></el-dm-datepicker>

Min/Max Dates

Min/Max Dates

<el-dm-datepicker
  placeholder="Select a date in 2024..."
  min-date="2024-01-01"
  max-date="2024-12-31"
></el-dm-datepicker>

Custom Format

Custom Format

<el-dm-datepicker placeholder="MM/DD/YYYY" format="MM/DD/YYYY"></el-dm-datepicker>

Sizes

Datepicker Sizes

<el-dm-datepicker size="sm" placeholder="Small"></el-dm-datepicker>
<el-dm-datepicker size="md" placeholder="Medium"></el-dm-datepicker>
<el-dm-datepicker size="lg" placeholder="Large"></el-dm-datepicker>

Disabled

Disabled

<el-dm-datepicker disabled placeholder="Disabled"></el-dm-datepicker>

Events

EventDescription
changeFired when date is selected
openFired when picker opens
closeFired when picker closes

Event Handling

const datepicker = document.querySelector('el-dm-datepicker');

datepicker.addEventListener('change', (event) => {
  console.log('Selected value:', event.detail.value);
  console.log('Date object:', event.detail.date);

  // For range selection
  console.log('Range start:', event.detail.rangeStart);
  console.log('Range end:', event.detail.rangeEnd);
});

datepicker.addEventListener('open', () => {
  console.log('Datepicker opened');
});

datepicker.addEventListener('close', () => {
  console.log('Datepicker closed');
});

Calendar Navigation

The datepicker supports three view modes:

  • Days: Select a specific day
  • Months: Select a month (click header to switch)
  • Years: Select a year (click header again)

Accessibility

  • Calendar navigation with arrow keys
  • Proper date semantics and labels
  • Focus management when opening/closing
  • Screen reader announcements for date selection