DatePicker

Select a date or range of dates from a calendar interface

Basic DatePicker

A simple date picker with default docked calendar style

Click the input field above to open the calendar and select a date.

DatePicker Variants

DatePickers come in three variants: docked, modal, and modal input

Docked

Modal

Modal Input

  • Docked: Calendar appears below the input field, ideal for desktop interfaces.
  • Modal: Calendar appears in a modal dialog, good for mobile and desktop.
  • Modal Input: Date input appears in a modal dialog, ideal for birth dates or dates far in the past.

Date Range Selection

Select a start and end date for a date range
No date range selected

Select a start date and an end date to create a range. The days in between will be highlighted.

Date Formatting

DatePicker supports different date display formats

MM/DD/YYYY

Default US format

DD/MM/YYYY

International format

YYYY-MM-DD

ISO format

MMMM D, YYYY

Long format

MMM D, YY

Short format

D MMMM YYYY

European style

Format Tokens:

Token Description Example
YYYY 4-digit year 2023
YY 2-digit year 23
MMMM Full month name January
MMM Short month name Jan
MM 2-digit month 01
M Month without leading zero 1
DD 2-digit day 05
D Day without leading zero 5

Date Constraints

Restrict date selection with min and max date constraints

Future Dates Only

Restrict selection to future dates only (for booking appointments)

Date Range Within One Month

Can only select dates between today and next month (for vacation booking)

Date of Birth

Only allows selection of past dates, up to today (for date of birth)

Recent Dates Window

Limited to dates from last week to next week (for recent events)

Date constraints can be applied in different ways:

  • Using the minDate property to prevent selection of dates before a certain date
  • Using the maxDate property to prevent selection of dates after a certain date
  • Using both minDate and maxDate to create a valid date range
  • Using the setMinDate() and setMaxDate() methods to update constraints programmatically

Disabled dates are grayed out in the calendar and cannot be selected.

mtrl is a lightweight, composable TypeScript/JavaScript component library inspired by Material Design principles. Built with zero dependencies, MTRL provides a robust foundation for creating modern web interfaces with an emphasis on performance, type safety, and accessibility.

npmGitHubX