Datepicker

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 #

<dt-datepicker></dt-datepicker>

With Popover #

<dt-popover
  :open="datepickerOpened"
  initial-focus-element="#prevYearButton"
  padding="none"
  @opened="(open) => { datepickerOpened = open }"
  placement="bottom-start"
>
  <template #anchor>
    <dt-button
      :size="200"
      circle
      importance="clear"
      aria-label="Open datepicker"
      @click="toggleDatepicker"
    >
      <template #startIcon>
        <dt-icon
          name="calendar"
          size="300"
        />
      </template>
    </dt-button>
  </template>
  <template #content>
    <dt-datepicker></dt-datepicker>
  </template>
</dt-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.

<script>
const today = new Date();
const minDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5);
const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 15);
</script>
<dt-datepicker
  :selected-date="new Date()"
  :min-date="minDate"
  :max-date="maxDate"
/>

Date Formats #

The following functions are available for date formatting.

formatLong #

formatLong(date, locale): string

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

Parameters

Returns

string

The formatted date string.

formatMedium #

formatMedium(date, locale): string

Formats the given date in medium format.

Parameters

Returns

string

The formatted date string.

formatShort #

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

Formats a date into a short string representation.

Parameters

Returns

string

The formatted date string.

formatNoYear #

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

Formats a date without the year.

Parameters

Returns

string

The formatted date without the year.

formatNumerical #

formatNumerical(date, locale): string

Formats a date into a numerical string representation.

Parameters

Returns

string

The formatted numerical date string.

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 are 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 announcement:

  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
  

Vue API #

import { DtDatepicker } from '@dialpad/dialtone-vue';

Props

Events