Date Picker in a Form

Submit ISO dates from a plain HTML form while the field shows a local format. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Hidden ISO value

#

When the input has a name, the picker moves the name to a hidden input placed after it. The form submits the ISO value (YYYY-MM-DD) instead of the displayed text. The hidden input is removed and the name restored on destroy(). Pick a date and submit the form to see what it sends.

Form

1<form id="booking">
2  <label for="checkin">Check-in</label>
3  <input id="checkin" name="checkin" />
4  <button type="submit">Submit</button>
5</form>
6
7<script type="module">
8  import DatepickerUI from "@pglejzer/datepicker-ui";
9  import "@pglejzer/datepicker-ui/index.css";
10
11  new DatepickerUI("#checkin", { ui: { format: "dd.MM.yyyy" } }).create();
12
13  document.querySelector("#booking").addEventListener("submit", (event) => {
14    event.preventDefault();
15    console.log(Object.fromEntries(new FormData(event.currentTarget)));
16  });
17</script>

Note

The visible input gets input and change events when a value is committed, and a form reset restores the initial value. In range mode an incomplete range gives an empty string.

Two fields for a range

#

With ui.endInput, each field with a name gets its own hidden ISO input.

index.html

1<input id="start" name="checkin" />
2<input id="end" name="checkout" />
3
4<script type="module">
5  import DatepickerUI from "@pglejzer/datepicker-ui";
6  import "@pglejzer/datepicker-ui/index.css";
7
8  new DatepickerUI("#start", {
9    calendar: { mode: "range" },
10    ui: { endInput: "#end" },
11  }).create();
12</script>