Range With Two Fields

Attach the picker to the first input and point ui.endInput at the second, a selector or an element. The main input holds the start and the second holds the end. It is read when create() runs and only applies in "range" mode.

1<label for="trip-start">Check-in</label>
2<input id="trip-start" />
3
4<label for="trip-end">Check-out</label>
5<input id="trip-end" />

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#trip-start", {
5  calendar: { mode: "range" },
6  ui: { endInput: "#trip-end" },
7}).create();

Clicking a field opens the picker on that end. Typing commits only a complete pair, or two empty fields.

The library adds dp-ui__input--active to the input the next pick fills, and leaves its styling to the page. Add a rule such as this one:

1.dp-ui__input--active {
2  border-color: #6d28d9;
3  box-shadow: inset 0 0 0 1px #6d28d9;
4}