Date Picker

Ready

<duet-date-picker name="date" label="Valitse päivämäärä" placeholder="pp.kk.vvvv" value="2020-06-16"></duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Listen for when date is selected
  picker.addEventListener("duetChange", function (e) {
    console.log("selected date", e.detail.valueAsDate)
  })
</script>

<duet-date-picker name="date" label="Valitse päivämäärä" placeholder="pp.kk.vvvv" value="2020-06-16" increment="100"></duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Listen for when date is selected
  picker.addEventListener("duetChange", function (e) {
    console.log("selected date", e.detail.valueAsDate)
  })
</script>

<duet-date-picker
  label="Valitse päivämäärä"
  min="2020-06-10"
  max="2020-07-18"
  value="2020-06-16"
  placeholder="pp.kk.vvvv"
>
</duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Listen for when date is selected
  picker.addEventListener("duetChange", function (e) {
    console.log("selected date", e.detail.valueAsDate)
  })
</script>

<duet-date-picker
  label="Choose date"
  language="en"
  placeholder="dd.mm.yyyy"
  required
  value="2020-11-01"
  min="2020-10-15"
  max="2020-12-15"
></duet-date-picker>

<script>
  var picker = document.querySelector("duet-date-picker")

  function checkValidity() {
    if (picker.validity.valid) {
      picker.error = ""
    } else if (picker.validity.rangeUnderflow) {
      picker.error = "Minimum allowed date is: 15.10.2020"
    } else if (picker.validity.rangeOverflow) {
      picker.error = "Maximum allowed date is: 15.12.2020"
    } else if (picker.validity.badInput) {
      picker.error = "Please enter a date in the format dd.mm.yyyy"
    } else if (picker.validity.valueMissing) {
      picker.error = "This field is required"
    }
  }

  picker.addEventListener("duetInput", function () {
    checkValidity()
  })

  picker.addEventListener("duetChange", function (e) {
    checkValidity()

    if (picker.validity.valid) {
      console.log("valid date:", e.detail.value)
    }
  })
</script>

<duet-fieldset label="Valitse aikaväli">
  <duet-grid responsive style="max-width: 480px">
    <duet-date-picker
      name="startdate"
      class="start"
      expand
      margin="none"
      label="Valitse aloituspäivä"
      label-hidden
      value="2020-06-01"
    ></duet-date-picker>
    <duet-spacer direction="horizontal" breakpoint="small" size="x-small"></duet-spacer>
    <duet-spacer direction="vertical" breakpoint="x-small" size="small"></duet-spacer>
    <duet-icon
      class="icon-arrow"
      name="navigation-arrow-right"
      margin="none"
      color="currentColor"
      size="x-small"
    ></duet-icon>
    <duet-spacer direction="horizontal" breakpoint="small" size="x-small"></duet-spacer>
    <duet-spacer direction="vertical" breakpoint="x-small" size="small"></duet-spacer>
    <duet-date-picker
      name="enddate"
      class="end"
      expand
      margin="none"
      label="Valitse lopetuspäivä"
      label-hidden
      direction="left"
      value="2020-06-10"
    ></duet-date-picker>
  </duet-grid>
</duet-fieldset>

<style>
  .icon-arrow {
    transform: rotate(90deg);
    align-self: center;
  }

  @media (min-width: 36em) {
    .icon-arrow {
      transform: rotate(0);
      padding-bottom: var(--space-medium);
      align-self: flex-end;
    }
  }
</style>

<script>
  // Select the above date picker components
  var startPicker = document.querySelector(".start")
  var endPicker = document.querySelector(".end")
  var startDate, endDate

  // Handle date selection
  function handleDateSelect() {
    if (startDate && endDate) {
      console.log("date range selected", startDate, endDate)
    }
  }

  // When the start date picker is changed…
  startPicker.addEventListener("duetChange", function (e) {
    startDate = e.detail.valueAsDate
    endPicker.min = e.detail.value

    if (!endDate) {
      endPicker.show()
    }
    handleDateSelect()
  })

  // When the end date date picker is changed…
  endPicker.addEventListener("duetChange", function (e) {
    endDate = e.detail.valueAsDate
    startPicker.max = e.detail.value
    handleDateSelect()
  })
</script>

<duet-date-picker name="date" expand label="Valitse päivämäärä" placeholder="pp.kk.vvvv" value="2020-06-16"></duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Listen for when date is selected
  picker.addEventListener("duetChange", function (e) {
    console.log("selected date", e.detail.valueAsDate)
  })
</script>

<duet-date-picker name="date" disabled label="Valitse päivämäärä" value="2020-05-16"></duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Listen for when date is selected
  picker.addEventListener("duetChange", function (e) {
    console.log("selected date", e.detail.valueAsDate)
  })
</script>

<duet-date-picker name="date" error="There is an error!" label="Choose a date" value="2020-05-16"></duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Listen for when date is selected
  picker.addEventListener("duetChange", function (e) {
    console.log("selected date", e.detail.valueAsDate)
  })
</script>

<duet-date-picker
  tooltip="Hello, I’m a tooltip! To close me you can hit ESC key,
    click the close button, or click outside of the tooltip."
  label="Choose a date (with tooltip)"
  value="2020-05-16"
>
</duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Listen for when date is selected
  picker.addEventListener("duetChange", function (e) {
    console.log("selected date", e.detail.valueAsDate)
  })
</script>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy" value="2020-06-16"></duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Listen for when date is selected
  picker.addEventListener("duetChange", function (e) {
    console.log("selected date", e.detail.valueAsDate)
  })
</script>

<duet-date-picker name="date" language="sv" label="Välj datum" placeholder="dd.mm.åååå" value="2020-06-16"></duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Listen for when date is selected
  picker.addEventListener("duetChange", function (e) {
    console.log("selected date", e.detail.valueAsDate)
  })
</script>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy" value="2020-06-16"></duet-date-picker>

<script>
  // Select the above date picker component
  var picker = document.querySelector("duet-date-picker")

  // Call show method
  setTimeout(function () {
    picker.show()
  }, 5)
</script>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy" value="2020-06-16" caption="caption" echo-placeholder></duet-date-picker>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy" value="2020-06-16" echo-placeholder></duet-date-picker>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy" value="2020-06-16" caption="caption"></duet-date-picker>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy" value="2020-06-16"></duet-date-picker>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy" caption="caption" echo-placeholder></duet-date-picker>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy" echo-placeholder></duet-date-picker>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy" caption="caption"></duet-date-picker>

<duet-date-picker name="date" language="en" label="Choose a date" placeholder="dd.mm.yyyy"></duet-date-picker>

<duet-card style="max-width: 480px">
  <duet-date-picker name="date" language="en" label="Choose a date" placeholder="its a long placeholder" caption="caption" value="2020-06-16" echo-placeholder></duet-date-picker>
</duet-card>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

• Date picker includes a date input and a toggle button that opens a calendar picker that is built using the dialog design pattern. This opening dialog contains a calendar that uses the grid pattern which presents buttons that allow the user to choose a specific date.
• When a date is chosen from this calendar, the accessible name of the calendar picker toggle button is updated to include the selected date.
• The calendar grid provides hotkeys for changing the year and month as well as support for normal grid navigation keys.
• label property is always required for an accessible date picker control.
• labelHidden property hides the above label visually, but still keeps it accessible for assistive technologies.
• Use role property to define a specific role attribute for the date picker input.
• Calendar grid uses aria-disabled (instead of disabled attribute) in disabled date buttons to convey their disabled state to assistive technologies. The reason we switched away from disabled attribute is that we wanted to make it possible for mouse users to be able to select a date from a previous month.
• Because of the above reason, the contrast ratios for the disabled buttons don’t pass WCAG 2.1 requirements. Instead, Duet offers alternative ways to access these same functionalities through the next/previous month menus.
• accessibleActiveDescendant property can be used to indicate the id of a related component’s visually focused element.
• accessibleControls property can be used to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.
• accessibleOwns property can be used to indicate the id of a component owned by the date picker.
• accessibleDescribedBy property can be used to indicate the id of a component which contains descriptive/help text related to the date picker.

Keyboard support #

Duet Date Picker’s keyboard support is built to closely follow W3C Date Picker Dialog example with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.

Choose date button #

• Space, Enter: Opens the date picker dialog and moves focus to the first select menu in the dialog.

Date picker dialog #

• Esc: Closes the date picker dialog and moves focus back to the “choose date” button.
• Tab: Moves focus to the next element in the dialog. Please note since the calendar uses role="grid", only one button in the calendar grid is in the tab sequence. Additionally, if focus is on the last focusable element, focus is next moved back to the first focusable element inside the date picker dialog.
• Shift + Tab: Same as above, but in reverse order.

Date picker dialog: Month/year buttons #

• Space, Enter: Changes the month and/or year displayed.

Date picker dialog: Date grid #

• Space, Enter: Selects a date, closes the dialog, and moves focus back to the “Choose Date” button. Additionally updates the value of the Duet Date Picker input with the selected date, and adds selected date to “Choose Date” button label.
• Arrow up: Moves focus to the same day of the previous week.
• Arrow down: Moves focus to the same day of the next week.
• Arrow right: Moves focus to the next day.
• Arrow left: Moves focus to the previous day.
• Home: Moves focus to the first day (e.g Monday) of the current week.
• End: Moves focus to the last day (e.g. Sunday) of the current week.
• Page Up: Changes the grid of dates to the previous month and sets focus on the same day of the same week.
• Shift + Page Up: Changes the grid of dates to the previous year and sets focus on the same day of the same week.
• Page Down: Changes the grid of dates to the next month and sets focus on the same day of the same week.
• Shift + Page Down: Changes the grid of dates to the next year and sets focus on the same day of the same week.

Date picker dialog: Close button #

• Space, Enter: Closes the dialog, moves focus to “choose date” button, but does not update the date in input.