Date Picker
Combine useful preset ranges with deliberate date selection.
Created & adapted by Insan NurjamanAnt Design foundationCurated public preview
Component model
The source composition includes preset cells with default, hover, and selected states alongside a calendar.
Original specimens
Original exported design. Open to inspect at full size. Source appearance is preserved; private editable files are not linked.Usage
Choose deliberately
- Make the selected range understandable before applying it.
- Distinguish a preset from a custom range.
- Validate keyboard and focus behavior in the real implementation.
Keep the limits visible
Source properties and screenshots document design intent. Validate the supported combinations and interaction behavior in the implementation before treating them as a guarantee.
Read usage guidelines Curated design documentation by Insan Nurjaman. Native examples are illustrative, not a production package or a standards certification.
Explore the story