MDS Assistant is an experiment.
Hi, I'm the MDS Assistant and can help you with information from our guidelines and components.

I do not provide code and development guidance. For coding assistance, please check out our experimental MCP server.

Calendar

The calendar allows people to interact with and select a specific date, month, and year.

Best practice

  • Use a calendar to display a full month at a time and support navigation both in the past and future.
  • Use a calendar when people need to know a date’s relationship to other days or weeks.
  • Visually mark any important days for the context that people should be aware of.
  • The available date and time range should be limited to what is practical and realistic for the context. (e.g. 50 years of range might be unnecessary)
  • Display the weeks numbers only when the context requires it and when users expect to see them by default.

This component is used in Input date component. It can be used as the basis for custom date and time selection components and patterns.

Restrict selectable dates (min and max)

Use the min or the max attribute to restrict the dates that can be selected and accepted by the component.

The min defines the earliest date that the component will accept and will disable the dates in the calendar that are before the min date.

The max defines the latest date that the component will accept and will disable the dates in the calendar that are after the max date.

Use both the min and the max attributes to define a range of selectable and accepted dates. In such cases, the max value must be later than or equal to the min value.