Date Picker

New

Date Picker component lets user pick a single date or a date range using a special calendar like date picker interface.

Date Picker allows you to set a minimum and a maximum allowed date. These settings can be combined or used alone, depending on the need. Please note that the date values must be passed in IS0-8601 format: YYYY-MM-DD.

Examples

<duet-date-picker name="date" label="Valitse päivämäärä" 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="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-label>Valitse aikaväli</duet-label>
<duet-grid alignment="center" style="max-width:420px;">
  <duet-date-picker name="startdate" class="start" expand margin="none" label="Valitse aloituspäinä" label-hidden value="2020-06-01"></duet-date-picker>
  <duet-spacer direction="horizontal" size="x-small"></duet-spacer>
  <duet-icon name="navigation-arrow-right" margin="none" color="currentColor" size="x-small"></duet-icon>
  <duet-spacer direction="horizontal" size="x-small"></duet-spacer>
  <duet-date-picker name="enddate" class="end" expand margin="none" label="Valitse lopetuspäivä" label-hidden value="2020-06-10"></duet-date-picker>
</duet-grid>

<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"></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"></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.åååå"></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"></duet-date-picker>

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

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

Properties #

Events #

Methods #

hide(moveFocusToButton?: boolean) => Promise<void> #

Hide the calendar modal. Set moveFocusToButton to false to prevent focus
returning to the date picker's button. Default is true.

Returns #

Type: Promise<void>

setFocus() => Promise<void> #

Sets focus on the date picker's input. Use this method instead of the global focus().

Returns #

Type: Promise<void>

show() => Promise<void> #

Show the calendar modal, moving focus to the calendar inside.

Returns #

Type: Promise<void>

Dependencies #

Depends on #

• duet-label
• duet-icon
• duet-visually-hidden
• duet-input

Graph #

graph TD;
  duet-date-picker --> duet-label
  duet-date-picker --> duet-icon
  duet-date-picker --> duet-visually-hidden
  duet-date-picker --> duet-input
  duet-input --> duet-label
  duet-input --> duet-tooltip
  duet-input --> duet-icon
  duet-tooltip --> duet-visually-hidden
  duet-tooltip --> duet-icon
  style duet-date-picker fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.