Duet Date Picker
188 |189 | Duet Date Picker is an open source version of 190 | Duet Design System’s accessible date picker. It can be implemented and used 191 | across any JavaScript framework or no framework at all. 192 |
193 | 194 |195 | 196 | For documentation, please see the 197 | GitHub repository. 198 | 199 |
200 | 201 | 202 | 218 | 219 |Default
220 | 221 |<label for="date">Choose a date</label>
223 | <duet-date-picker identifier="date"></duet-date-picker>Using show() method
226 | 227 |<label for="date">Choose a date</label>
237 | <duet-date-picker identifier="date"></duet-date-picker>
238 | <button type="button">Show date picker</button>
239 |
240 | <script>
241 | const button = document.querySelector("button")
242 |
243 | button.addEventListener("click", function() {
244 | document.querySelector("duet-date-picker").show()
245 | });
246 | </script>Using setFocus() method
249 | 250 |<label for="date">Choose a date</label>
260 | <duet-date-picker identifier="date"></duet-date-picker>
261 | <button type="button">Focus date picker</button>
262 |
263 | <script>
264 | const button = document.querySelector("button")
265 |
266 | button.addEventListener("click", function() {
267 | document.querySelector("duet-date-picker").setFocus()
268 | });
269 | </script>Getting selected value
272 | 273 |<label for="date">Choose a date</label>
284 | <duet-date-picker identifier="date"></duet-date-picker>
285 | <output>undefined</output>
286 |
287 | <script>
288 | const picker = document.querySelector("duet-date-picker")
289 | const output = document.querySelector("output")
290 |
291 | picker.addEventListener("duetChange", function(event) {
292 | output.innerHTML = event.detail.valueAsDate
293 | });
294 | </script>Predefined value
297 | 298 |<label for="date">Choose a date</label>
300 | <duet-date-picker identifier="date" value="2020-06-16">
301 | </duet-date-picker>Minimum and maximum date
304 | 305 |<label for="date">Choose a date</label>
307 | <duet-date-picker identifier="date" min="1990-06-10"
308 | max="2020-07-18" value="2020-06-16">
309 | </duet-date-picker>Localization
312 | 313 |<label for="date">Valitse päivämäärä</label>
379 | <duet-date-picker identifier="date"></duet-date-picker>
380 |
381 | <script>
382 | const picker = document.querySelector("duet-date-picker")
383 | const DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/
384 |
385 | picker.dateAdapter = {
386 | parse(value = "", createDate) {
387 | const matches = value.match(DATE_FORMAT)
388 | if (matches) {
389 | return createDate(matches[3], matches[2], matches[1])
390 | }
391 | },
392 | format(date) {
393 | return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`
394 | },
395 | }
396 |
397 | picker.localization = {
398 | buttonLabel: "Valitse päivämäärä",
399 | placeholder: "pp.kk.vvvv",
400 | selectedDateMessage: "Valittu päivämäärä on",
401 | prevMonthLabel: "Edellinen kuukausi",
402 | nextMonthLabel: "Seuraava kuukausi",
403 | monthSelectLabel: "Kuukausi",
404 | yearSelectLabel: "Vuosi",
405 | closeLabel: "Sulje ikkuna",
406 | calendarHeading: "Valitse päivämäärä",
407 | dayNames: ["Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai"],
408 | monthNames: ["Tammikuu", "Helmikuu", "Maaliskuu", "Huhtikuu", "Toukokuu", "Kesäkuu", "Heinäkuu", "Elokuu", "Syyskuu", "Lokakuu", "Marraskuu", "Joulukuu"],
409 | monthNamesShort: ["Tammi", "Helmi", "Maalis", "Huhti", "Touko", "Kesä", "Heinä", "Elo", "Syys", "Loka", "Marras", "Joulu"],
410 | locale: "fi-FI",
411 | }
412 | </script>Changing first day of week and date format
415 | 416 |<label for="date">Choose a date</label>
469 | <duet-date-picker first-day-of-week="0" identifier="date"></duet-date-picker>
470 |
471 | <script>
472 | const picker = document.querySelector("duet-date-picker")
473 | const DATE_FORMAT_US = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/
474 |
475 | picker.dateAdapter = {
476 | parse(value = "", createDate) {
477 | const matches = value.match(DATE_FORMAT_US)
478 |
479 | if (matches) {
480 | return createDate(matches[3], matches[1], matches[2])
481 | }
482 | },
483 | format(date) {
484 | return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
485 | },
486 | }
487 |
488 | picker.localization = {
489 | buttonLabel: "Choose date",
490 | placeholder: "mm/dd/yyyy",
491 | selectedDateMessage: "Selected date is",
492 | prevMonthLabel: "Previous month",
493 | nextMonthLabel: "Next month",
494 | monthSelectLabel: "Month",
495 | yearSelectLabel: "Year",
496 | closeLabel: "Close window",
497 | calendarHeading: "Choose a date",
498 | dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
499 | monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
500 | monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
501 | locale: "en-US",
502 | }
503 | </script>Required atrribute
506 | 507 | 511 | 518 |<form class="form-picker-required">
519 | <label for="date">Choose a date</label>
520 | <duet-date-picker required identifier="date"></duet-date-picker>
521 | </form>
522 |
523 | <script>
524 | const form = document.querySelector(".form-picker-required")
525 | form.addEventListener("submit", function(e) {
526 | e.preventDefault()
527 | alert("Submitted")
528 | })
529 | </script>Disable selectable days
532 | 533 |<label for="date">Choose a date</label>
549 | <duet-date-picker identifier="date"></duet-date-picker>
550 |
551 | <script>
552 | function isWeekend(date) {
553 | return date.getDay() === 0 || date.getDay() === 6
554 | }
555 |
556 | const pickerDisableWeekend = document.querySelector("duet-date-picker")
557 | pickerDisableWeekend.isDateDisabled = isWeekend
558 |
559 | pickerDisableWeekend.addEventListener("duetChange", function(e) {
560 | if (isWeekend(e.detail.valueAsDate)) {
561 | alert("Please select a weekday")
562 | }
563 | })
564 | </script>566 |
567 | © 2020 LocalTapiola Services Ltd /
568 | Duet Design System.
Licensed under the MIT license.
569 |