Date Picker Components
Lightweight date picker with excellent keyboard navigation and innovative rolling selector for month/year selection.
Note: This is a UI/UX demo focused on navigation and usability. Full date validation and logic will be implemented in the Svelte version.
Basic Date Pickers
Input Masking & Date Formats
Configure date format using data-date-format attribute. Input automatically formats as you type with separator auto-insertion.
Calendar Button Trigger
Use data-calendar-trigger="button" to open calendar only via button click, not by clicking/focusing the input.
Multi-Month Display
Input Sizes
Validation States
Input States
With Input Group
Common Usage Patterns
Filter Form with Date Range
Booking Form
Features & Keyboard Shortcuts
Features
- Input Masking: Auto-format dates as you type with separator insertion
- Multiple Formats: YYYY-MM-DD, DD.MM.YYYY, DD/MM/YYYY, MM/DD/YYYY
- Character Validation: Block invalid characters, allow only digits and separators
- Button Trigger Mode: Open calendar via button click instead of input focus
- Direct Input: Users can type dates directly in the field
- Keyboard Navigation: Arrow keys to navigate between days
- Rolling Selector: Innovative scrollable year/month picker per month
- Multi-Month Display: Show 1-3+ months side by side
- Independent Navigation: Each month has its own rolling selector
- Draggable Range: Drag start/end dates to adjust selection
- Today Button: Quick jump to current date
- Clear Button: Reset selection
- Range Selection: Select start and end dates with day/night counts
- Smart Positioning: Uses Floating UI for intelligent popup placement
Keyboard Shortcuts
- ↑ Up Arrow: Move up one week (7 days back)
- ↓ Down Arrow: Move down one week (7 days forward)
- ← Left Arrow: Move to previous day
- → Right Arrow: Move to next day
- Enter Enter: Select focused day
- Esc Escape: Close calendar
Mouse Actions
- Click month/year: Toggle rolling selector
- Click year/month: Jump to that date
- Click day: Select date
Implementation Notes
Auto-Initialization
Add data-date-picker attribute to any input to automatically initialize:
<input type="text" class="pa-input pa-date-picker-input" data-date-picker>Date Range Mode
Add data-date-picker-mode="range" for range selection:
<input type="text" class="pa-input" data-date-picker data-date-picker-mode="range">Date Format Configuration
Use data-date-format to specify input format with auto-masking:
<input type="text" class="pa-input" data-date-picker data-date-format="DD.MM.YYYY">Button Trigger Mode
Calendar opens only via button click (not input focus):
<div class="pa-input-group">
<input type="text" class="pa-input" data-date-picker
data-calendar-trigger="button">
<button class="pa-input-group__append" data-calendar-button>📅</button>
</div>Programmatic Initialization
const picker = new PureDatePicker(inputElement, {
mode: 'single', // 'single' or 'range'
format: 'YYYY-MM-DD', // Date format
calendarTrigger: 'auto', // 'auto' or 'button'
position: 'bottom-start', // Floating UI position
onSelect: (date) => {
console.log('Selected:', date);
}
});Rolling Selector Innovation
Unlike traditional date pickers with dropdown menus, our rolling selector provides side-by-side scrollable lists for years and months. This allows quick navigation through decades without multiple clicks. Click on the month/year display to toggle this view.
Development Note
This is a UI/UX demo focused on navigation and user experience. The Svelte version (svelte-pure-admin) will include full date validation, min/max constraints, disabled dates, and comprehensive date logic.