Date picker ​

Date pickers let users choose dates from a visual calendar that's consistently applied wherever dates need to be selected across the interface.

Usage ​

selected-date: 2024-01-01

<script lang="ts" setup>
import { DatePicker, DatePickerCard } from '@returnless/focus-ui';
</script>

<template>
  <DatePicker v-model="selectedDate" />
</template>

Best practices ​

Date pickers should:

• Use smart defaults and highlight common selections.
• Close after a single date is selected unless a range with a start and end date is required.
• Set the start date on first click or tap and the end date on second click or tap if a range is required.
• Not be used to enter date that is many years in the future or past.

Accessibility ​

Some users might find interacting with date pickers to be challenging. When you use the date picker component, always give users the option to enter the date using a text field component as well.

If you use the date picker within a popover component, then use a button to trigger the popover instead of displaying the popover when the text input gets focus. This gives users more control over their experience.

Keyboard support ​

• Press the tab key or move forward and shift + tab to move backwards through the previous button, next button, and the calendar.
• When focus is in the calendar, move keyboard focus between the dates using the arrow keys.
• To select a date that has focus, press the enter/return key.