Datepicker

Storybook Figma

Datepicker component will provide a calendar to select a date.

Preview

Usage

We recommend to wrap the datepicker in a dt-popover component.

It is required to provide the component with proper labels for i18n and accessibility.

The component will return a Date object object when a date is selected.

For the withPopover variant it is necessary to provide the initial-focus-element="#prevYearButton" prop to the dt-popover component.

With this we accomplish the requirement to have the previous year button focused when the datepicker is opened.

Variants and Examples

Default

With Popover

With min/max date

Constrain the selectable date range by providing min-date and/or max-date props. Days outside the range are disabled and navigation buttons are disabled when the target month is fully out of range.

Vue API

Props

Name
Description
Default
maxDate

Maximum selectable date. Days after this date will be disabled. Must be after or equal to minDate when both are provided.

 Type: Date
null
minDate

Minimum selectable date. Days before this date will be disabled. Must be before or equal to maxDate when both are provided.

 Type: Date
null
selectedDate

Selected date

 Type: Date
() => (new Date())
weekStartsOn

Day the week starts on. 0 = Sunday, 1 = Monday, ... 6 = Saturday.

 Type: number
Values: 0123456
 0

Events

Name
Description
close-datepicker

Event fired when user presses the esc key
selected-date

Event fired when a date is selected

 Type: Date

Accessibility

Keyboard navigation with arrow and tab keys for datepicker component.

It will switch between month-year-picker and calendar with TAB.

It will move around all calendar days with arrow-keys.

It will jump from month-year-picker to calendar with DOWN arrow key.

It will jump to month-year-picker when there is no more days at the bottom or top of the calendar.

It will change year or month with ENTER or SPACE (native event)

It will select day with ENTER or SPACE (native event)

It will start with focus on previous-year on mounted

Screen reader will say

In month-year-picker:

  • Change to previous year, 2022
  • Change to previous month, july
  • Change to next month, september
  • Change to next year, 2024

In calendar:

  • Select day 20 July 2023

Date Formats

The following functions are available for date formatting.

June 2026
SuMoTuWeThFrSa

Thu Jun 11 2026 21:35:53 GMT+0000 (Coordinated Universal Time)

formatLong Thursday, June 11, 2026
formatMedium June 11, 2026
formatShort Thu, Jun 11, 2026
formatShort (no weekday) Thu, Jun 11, 2026
formatNoYear June 11
formatNoYear (abbreviated) June 11
formatNumerical 06/11/26

formatLong

formatLong(date, locale): string

Formats a date into a long format using the specified locale.

Parameters

Name Type Description
date Date The date to format
locale string The locale to use for formatting. Defaults to Dialtone preferred locale.

Returns

string

The formatted date string.

formatMedium

formatMedium(date, locale): string

Formats the given date in medium format.

Parameters

Name Type Description
date Date The date to format
locale string The locale to use for formatting. Defaults to Dialtone preferred locale.

Returns

string

The formatted date string.

formatShort

formatShort(date, locale, showWeekday= true): string

Formats a date into a short string representation.

Parameters

Name Type Description
date Date The date to format
locale string The locale to use for formatting. Defaults to Dialtone preferred locale.
showWeekday boolean Whether to include the weekday in the formatted string. Defaults to true.

Returns

string

The formatted date string.

formatNoYear

formatNoYear(date, locale, abbreviated= false): string

Formats a date without the year.

Parameters

Name Type Description
date Date The date to format
locale string The locale to use for formatting. Defaults to Dialtone preferred locale.
abbreviated boolean Whether to use abbreviated month names. Defaults to false.

Returns

string

The formatted date without the year.

formatNumerical

formatNumerical(date, locale): string

Formats a date into a numerical string representation.

Parameters

Name Type Description
date Date The date to format
locale string The locale to use for formatting. Defaults to Dialtone preferred locale.

Returns

string

The formatted numerical date string.

Datepicker documentation last updated Thursday, June 11, 2026