Duet Date Picker

Duet Date Picker is an open source version of Duet Design System’s accessible date picker. It can be implemented and used across any JavaScript framework or no framework at all.

For documentation, please see the GitHub repository.

Default

<label for="date">Choose a date</label>
<duet-date-picker identifier="date"></duet-date-picker>

Using show() method

<label for="date">Choose a date</label>
<duet-date-picker identifier="date"></duet-date-picker>
<button type="button">Show date picker</button>

<script>
  const button = document.querySelector("button")

  button.addEventListener("click", function() {
    document.querySelector("duet-date-picker").show()
  });
</script>

Using setFocus() method

<label for="date">Choose a date</label>
<duet-date-picker identifier="date"></duet-date-picker>
<button type="button">Focus date picker</button>

<script>
  const button = document.querySelector("button")

  button.addEventListener("click", function() {
    document.querySelector("duet-date-picker").setFocus()
  });
</script>

Getting selected value

undefined
<label for="date">Choose a date</label>
<duet-date-picker identifier="date"></duet-date-picker>
<output>undefined</output>

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

  picker.addEventListener("duetChange", function(event) {
    output.innerHTML = event.detail.valueAsDate
  });
</script>

Predefined value

<label for="date">Choose a date</label>
<duet-date-picker identifier="date" value="2020-06-16">
</duet-date-picker>

Minimum and maximum date

<label for="date">Choose a date</label>
<duet-date-picker identifier="date" min="2020-06-10"
  max="2020-07-18" value="2020-06-16">
</duet-date-picker>

Localization

<label for="date">Valitse päivämäärä</label>
<duet-date-picker identifier="date"></duet-date-picker>

<script>
  const picker = document.querySelector("duet-date-picker")
  const DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/

  picker.dateAdapter = {
    parse(value = "", createDate) {
      const matches = value.match(DATE_FORMAT)
      if (matches) {
        return createDate(matches[3], matches[2], matches[1])
      }
    },
    format(date) {
      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`
    },
  }

  picker.localization = {
    buttonLabel: "Valitse päivämäärä",
    placeholder: "pp.kk.vvvv",
    selectedDateMessage: "Valittu päivämäärä on",
    prevMonthLabel: "Edellinen kuukausi",
    nextMonthLabel: "Seuraava kuukausi",
    monthSelectLabel: "Kuukausi",
    yearSelectLabel: "Vuosi",
    closeLabel: "Sulje ikkuna",
    keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
    calendarHeading: "Valitse päivämäärä",
    dayNames: ["Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai"],
    monthNames: ["Tammikuu", "Helmikuu", "Maaliskuu", "Huhtikuu", "Toukokuu", "Kesäkuu", "Heinäkuu", "Elokuu", "Syyskuu", "Lokakuu", "Marraskuu", "Joulukuu"],
    monthNamesShort: ["Tammi", "Helmi", "Maalis", "Huhti", "Touko", "Kesä", "Heinä", "Elo", "Syys", "Loka", "Marras", "Joulu"],
  }
</script>

Changing first day of week and date format

<label for="date">Choose a date</label>
<duet-date-picker first-day-of-week="0" identifier="date"></duet-date-picker>

<script>
  const picker = document.querySelector("duet-date-picker")
  const DATE_FORMAT = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/

  picker.dateAdapter = {
    parse(value = "", createDate) {
      const matches = value.match(DATE_FORMAT)

      if (matches) {
        return createDate(matches[3], matches[2], matches[1])
      }
    },
    format(date) {
      return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
    },
  }

  picker.localization = {
    buttonLabel: "Choose date",
    placeholder: "mm/dd/yyyy",
    selectedDateMessage: "Selected date is",
    prevMonthLabel: "Previous month",
    nextMonthLabel: "Next month",
    monthSelectLabel: "Month",
    yearSelectLabel: "Year",
    closeLabel: "Close window",
    keyboardInstruction: "You can use arrow keys to navigate dates",
    calendarHeading: "Choose a date",
    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  }
</script>

© 2020 LocalTapiola Services Ltd / Duet Design System.
Licensed under the MIT license.

Loading…