Date Time Patterns

Date Picker

• Native picker on mobile (better UX, keyboard integration).
• Custom picker on desktop for more control.
• Show selected date in the input formatted per locale.
• Allow manual text entry alongside picker.
• Disable past dates for future-only selections.

Time Picker

• Dropdown with 15 or 30-minute intervals for scheduling.
• Free text input with validation for precise times.
• 12h vs 24h based on locale.
• Show timezone when relevant.

Date Range

• Two inputs (start/end) with calendar showing both months.
• Click start date, then end date. Highlight range between.
• Preset ranges: Today, Last 7 days, This month, Custom.