Duet Date Picker

https://duetds.github.io/date-picker/
Admin
Duet Date Picker is an open source, accessible date picker component from the Duet Design System...
Tokens:1,783
Snippets:10
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Date Picker with Min/Max Dates

Source: https://duetds.github.io/date-picker

This example demonstrates how to set minimum and maximum selectable dates for the Duet Date Picker. The `min` and `max` attributes define the allowed date range.

```html
<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>
```

--------------------------------

### Set Focus on Date Picker Programmatically

Source: https://duetds.github.io/date-picker

Illustrates how to set focus on the Duet Date Picker programmatically using the `setFocus()` method. This can be used to guide user interaction, for example, after a button click.

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

```javascript
const button = document.querySelector("button")

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

```

--------------------------------

### Get Selected Date Value

Source: https://duetds.github.io/date-picker

Shows how to retrieve the selected date value from the Duet Date Picker. It listens for the `duetChange` event and updates an output element with the selected date.

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

```javascript
const picker = document.querySelector("duet-date-picker")
const output = document.querySelector("output")

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

```

--------------------------------

### Show Date Picker Programmatically

Source: https://duetds.github.io/date-picker

Demonstrates how to programmatically show the Duet Date Picker using its `show()` method. This is useful for triggering the picker from a button click or other user interactions.

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

```javascript
const button = document.querySelector("button")

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

```

--------------------------------

### Basic Date Picker with Custom Formatting and Localization

Source: https://duetds.github.io/date-picker

Demonstrates how to use the duet-date-picker component with custom date parsing and formatting, as well as localization settings for different regions. The `dateAdapter` property is used to define custom parsing and formatting logic, while `localization` allows for internationalization.

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

```javascript
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",
}
```

--------------------------------

### Basic Date Picker Implementation

Source: https://duetds.github.io/date-picker

This snippet shows the basic HTML structure for implementing the Duet Date Picker. It requires a label and the duet-date-picker custom element.

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

--------------------------------

### Basic Date Picker Usage

Source: https://duetds.github.io/date-picker

This snippet shows the basic implementation of the Duet Date Picker. It's used for simple date selection without any specific constraints.

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

--------------------------------

### Date Picker Localization (Finnish)

Source: https://duetds.github.io/date-picker

This snippet shows how to localize the Duet Date Picker for Finnish. It includes custom date parsing, formatting, and localization strings for labels and messages.

```javascript
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",
}
```

--------------------------------

### Date Picker with Disabled Weekend Dates

Source: https://duetds.github.io/date-picker

Illustrates how to disable specific dates, in this case, weekends, using the `isDateDisabled` property. An event listener is also included to provide feedback when a user attempts to select a disabled date.

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

```javascript
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")
  }
})
```

--------------------------------

### Date Picker with Required Attribute for Form Submission

Source: https://duetds.github.io/date-picker

Shows how to make a date picker a required field in an HTML form. The `required` attribute ensures that a date must be selected before the form can be submitted. An event listener is added to handle the form submission.

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

```javascript
const form = document.querySelector(".form-picker-required")
form.addEventListener("submit", function(e) {
  e.preventDefault()
  alert("Submitted")
})
```
Tokens:
Raw