Dynamic Options

Change options of a live picker with setOptions(). This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

setOptions()

#

picker.setOptions(patch) merges a partial options object into the current options and applies it, then emits update. Use the buttons to change the theme, the selection mode and the number of months, and open the picker to see the result.

setOptions

Date

Theme

Mode

Months

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const picker = new DatepickerUI("#date");
5picker.create();
6
7picker.setOptions({ ui: { theme: "crane" } });
8picker.setOptions({ calendar: { mode: "range" } });
9picker.setOptions({ calendar: { months: 2 } });

Note

Changing calendar.mode with setOptions() empties the selection. The width for calendar.months is read when the picker opens and on setOptions().