The date picker supports two selection modes: single for selecting individual dates and range for selecting date ranges with start and end dates.

Single Date Selection

Select one date at a time

Live Demo

Click on any date to select it

Code Examples
HTML 
 
 
JavaScript 
 
 
 
Details
 
Use Cases
 
  • Birth dates - User profile information
    •  
  • Appointment dates - Booking single events
    •  
  • Deadlines - Task due dates
    •  
  • Single events - Any single-point-in-time selection
 
Behavior
 
Click on any date to select it. The selected date will be highlighted and appear in the input field.
 
Key Option
 
  • selection-mode="single" - Enables single date selection
 
Events
 
Emits date-select (or change) event with event.detail.date and event.detail.formattedValue
 
Range Selection
 
Select a date range with start and end dates
 
Live Demo
  
Click-click or drag to select a range
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
Use Cases
 
  • Hotel bookings - Check-in to check-out
    •  
  • Report periods - Start and end dates for analytics
    •  
  • Vacation planning - Trip duration
    •  
  • Time tracking - Project duration
 
Selection Methods
 
  • Click-click: Click start date, then end date
    •  
  • Drag: Click and drag from start to end
 
Key Options
 
  • selection-mode="range" - Enables range selection
    •  
  • visible-months-count="2" - Shows 2 months (optional, improves UX for ranges)
 
Events
 
Emits date-select (or change) event with event.detail.dateRange (containing start and end dates) and event.detail.formattedValue
 
Event Handling
 
Listen to selection events
 
Single Mode Events
 
Single Mode 
 
 
 
Range Mode Events
 
Range Mode 
 
 
 
Event Details
 
Event Types
 
  • date-select - Fired when date(s) selected (both modes)
    •  
  • change - Alias of date-select (for compatibility)
 
Note: Both date-select and change events fire with identical data.
						Use whichever fits your naming convention.
 
Event Data
 
Single mode:
 
  • event.detail.date - JavaScript Date object
    •  
  • event.detail.formattedValue - Formatted date string
 
Range mode:
 
  • event.detail.dateRange - Object with start and end Date objects
    •  
  • event.detail.formattedValue - Formatted date range string
 
In range mode with disabled-dates-handling modes like 'allow' or 'split',
						the event detail may also include enabledDates, disabledDates, or additional arrays.
 
Date Object
 
All dates are native JavaScript Date objects, giving you access to all standard Date methods and formatting options.