timepicker-ui
4.6.0GitHub
timepicker-ui
GitHub4.6.0
Advanced / Events

Events

Subscribe to every event of a picker and watch the payloads. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Event log

#

picker.on(event, handler) subscribes and returns a function that unsubscribes. The demo subscribes to all twelve events. Open the picker, pick a day, move between months and open the month and year menus. The log keeps the last 8 events, newest first.

Event log
  1. No events yet
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


const picker = new DatepickerUI("#date", {
  ui: { todayButton: true, clearButton: true },
});
picker.create();


const events = [
  "open", "close", "cancel", "confirm", "update", "error",
  "select:day", "select:month", "select:year",
  "range:start", "range:end", "navigate",
];


const offs = events.map((name) =>
  picker.on(name, (data) => console.log(name, data)),
);


// Later: offs.forEach((off) => off());

Callbacks

#

Each event has an on* option in the callbacks group that does the same without an instance.

index.ts
new DatepickerUI("#date", {
  callbacks: {
    onConfirm: ({ value }) => console.log(value),
    onSelectDay: ({ value, selected }) => console.log(value.value, selected),
    onNavigate: ({ year, month }) => console.log(year, month),
  },
}).create();

Note

setValue() does not emit confirm. setOptions() emits update.
Esc