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

<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="1990-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",
    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"],
    locale: "fi-FI",
  }
</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_US = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/

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

      if (matches) {
        return createDate(matches[3], matches[1], matches[2])
      }
    },
    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",
    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"],
    locale: "en-US",
  }
</script>

Required atrribute

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

<script>
  const form = document.querySelector(".form-picker-required")
  form.addEventListener("submit", function(e) {
    e.preventDefault()
    alert("Submitted")
  })
</script>

Disable selectable days

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

<script>
  function isWeekend(date) {
    return date.getDay() === 0 || date.getDay() === 6
  }

  const pickerDisableWeekend = document.querySelector("duet-date-picker")
  pickerDisableWeekend.isDateDisabled = isWeekend

  pickerDisableWeekend.addEventListener("duetChange", function(e) {
    if (isWeekend(e.detail.valueAsDate)) {
      alert("Please select a weekday")
    }
  })
</script>

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