The DayPilot.DatePicker class provides the JavaScript date picker component.

Typed Dates and the Popup

Connect the picker to an input using target and choose the input format using pattern. Users can type a date or select one from the popup. The input format is used both for typed dates and for dates selected in the popup.

<input id="date" value="2027-10-08" aria-label="Date">
<button id="open-picker" type="button">Choose date</button>

<script>
const picker = new DayPilot.DatePicker({
  target: "date",
  pattern: "yyyy-MM-dd"
});
document.getElementById("open-picker").addEventListener("click", () => picker.show());
</script>

The popup opens at the valid date currently entered in the input. Selecting a date writes it back to the input using the configured pattern.

Members