Datepicker
Test bidirectional signal coordination between date inputs and calendar components.
DatePicker Components
DateInput Features (Both Single & Range)
• Auto-formatting: Type 12252024 → becomes 12/25/2024
• Year completion: Type 12/25/24 then tab/blur → becomes 12/25/2024
• Input validation: Only numbers and navigation keys allowed
• Slash insertion: Automatically adds slashes as you type
• Backspace handling: Removes slashes when deleting
Bidirectional Signal Coordination
• Calendar → Input: Click any date in calendar → input field updates immediately
• Input → Calendar: Type valid date in input → calendar highlights that date
• Clear Selection: Clear input field → calendar selection clears
• Invalid dates: Type invalid date → calendar doesn't crash, shows feedback
Range DatePicker Specific Tests
• Range Start: Click first date → start input updates, calendar shows selection
• Range End: Click second date → end input updates, calendar shows full range
• Range Reset: Click a date when range is selected → resets to new start
• Cross-month Range: Select dates across different months → both months show selection
• Tab between inputs: Tab from start to end input seamlessly
• Individual formatting: Each input formats independently as you type
• Synchronized updates: Calendar selection updates both inputs correctly
Signal IDs for Testing
Single Date: CalendarID="single_date_calendar", InputID="single_date_input"
Range Date: CalendarID="range_date_calendar", InputsID="range_date_dateinput"