@duetds/date-picker
Version:
Duet Date Picker is an open source version of Duet Design System’s accessible date picker.
173 lines (164 loc) • 5.92 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Duet Date Picker</title>
<style>
:root {
--duet-color-primary: #005fcc;
--duet-color-text: #333;
--duet-color-text-active: #fff;
--duet-color-placeholder: #666;
--duet-color-button: #f5f5f5;
--duet-color-surface: #fff;
--duet-color-overlay: rgba(0, 0, 0, 0.8);
--duet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--duet-font-normal: 400;
--duet-font-bold: 600;
--duet-radius: 4px;
--duet-z-index: 600;
}
body {
font-weight: var(--duet-font-normal);
font-family: var(--duet-font);
color: var(--duet-color-text);
background: var(--duet-color-surface);
line-height: 1.5;
margin: 0 auto;
max-width: 40rem;
font-size: 100%;
padding: 2rem;
}
label {
margin: 0.6rem 0;
display: block;
}
</style>
</head>
<body>
<main>
<label for="date">Choose a date</label>
<duet-date-picker class="cal" identifier="date"></duet-date-picker>
<label for="date4">Choose a date</label>
<duet-date-picker class="picker" identifier="date4" value="1998-12-12"></duet-date-picker>
<label for="date5">Choose a date</label>
<duet-date-picker identifier="date5" value="2020-06-16"></duet-date-picker>
<label for="date6">Choose a date</label>
<duet-date-picker identifier="date6" min="2020-06-10" max="2020-07-18" value="2020-06-16"></duet-date-picker>
<label for="date7" lang="fi">Valitse päivämäärä</label>
<duet-date-picker class="picker-fi" lang="fi" identifier="date7"></duet-date-picker>
<script>
var pickerFinnish = document.querySelector(".picker-fi")
var DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/
pickerFinnish.dateAdapter = {
parse: function parse() {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
var createDate = arguments.length > 1 ? arguments[1] : undefined
var matches = value.match(DATE_FORMAT)
if (matches) {
return createDate(matches[3], matches[2], matches[1])
}
},
format: function format(date) {
return ""
.concat(date.getDate(), ".")
.concat(date.getMonth() + 1, ".")
.concat(date.getFullYear())
},
}
pickerFinnish.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>
<label for="date8">Choose a date</label>
<duet-date-picker first-day-of-week="0" class="picker-week" identifier="date8"></duet-date-picker>
<script>
const pickerWeek = document.querySelector(".picker-week")
const DATE_FORMAT_US = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/
pickerWeek.dateAdapter = {
parse: function parse() {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
var createDate = arguments.length > 1 ? arguments[1] : undefined
var matches = value.match(DATE_FORMAT)
if (matches) {
return createDate(matches[3], matches[2], matches[1])
}
},
format: function format(date) {
return ""
.concat(date.getMonth() + 1, "/")
.concat(date.getDate(), "/")
.concat(date.getFullYear())
},
}
pickerWeek.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>
</main>
</body>
</html>