Resources
Intro & Anatomy
Date pickers are interactive components that enable users to select single dates or date ranges. Use date pickers when users need to specify dates for bookings, scheduling, or form completion.
MDX offers two date picker types:
keyboard input for familiar dates that users can easily remember, and
calendar flyouts for dates requiring visual context or availability information.
Options & Styles
Labels & Icons
Label is always required to clearly communicate the date selection purpose.
Icon appears only in calendar flyout inputs to indicate the expandable calendar functionality.
Input Types
The MDX date picker offers to input types:
Keyboard input for dates users remember easily or use different formats, e.g. birthdays, credit card expiry dates
Calendar flyout for dates requiring visual context or availability information, e.g. delivery dates, booking ranges
Calendar Views
Calendar flyouts provide multiple view options:
Monthly view for standard date selection
Month picker for quick month navigation
Year picker for rapid year selection
States
The calendar views provide visual feedback for different date states:
Today highlights the current date
Selected date shows the chosen date
Hover provides interactive feedback
Disabled/not available indicates unselectable dates
Best Practice & Usage
Date pickers should match the input method to the user's context and the type of date being selected. Use calendar flyouts for scheduling and system-dependent dates, and keyboard input for familiar or formatted dates.
For general input guidelines, refer to the text input component documentation.
Use date picker flyouts for scheduling dates, e.g. delivery, bookings, where users rely on system-provided availability.
Avoid date picker flyouts for past dates or those easily remembered by users, e.g. birthdays.
Use text input fields for dates such as birthdays that users can easily type without needing calendar reference.
Avoid giving users the option to input dates that depend on system availability.
Use date input for formats that differ from standard dd.mm.yyyy, e.g. credit card expiry dates.
Avoid calendar flyouts for dates that differ from standard dd.mm.yyyy format or require partial date input.
Use native mobile calendar interfaces for better user experience and familiarity.
Avoid custom calendar flyouts on mobile devices where native solutions provide better usability.
Theming
You can customise colours, border width and radius, font styles, spacing, and paddings to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons.