TypeScript

1import DatepickerUI, {
2  DEFAULT_DATEPICKER_OPTIONS,
3  EventEmitter,
4  type DatepickerOptions,
5  type PickerValue,
6} from "@pglejzer/datepicker-ui";

1interface DatepickerOptions {
2  calendar?: CalendarOptions;    // mode, precision, months, limits, disabled days, locale
3  ui?: UIOptions;                // theme, displayMode, inline, format, footer, buttons, ...
4  labels?: LabelsOptions;        // every visible and assistive text
5  behavior?: BehaviorOptions;    // closeOnSelect, commitOnChange, returnFocus, id, ...
6  callbacks?: CallbacksOptions;  // onConfirm, onCancel, onOpen, ...
7}

1interface DateValue {
2  readonly value: string;      // "2025-03-14"
3  readonly date: Date;         // local midnight
4  readonly formatted: string;  // as the input shows it
5}
6
7interface RangeValue {
8  readonly start: DateValue;
9  readonly end: DateValue;
10}
11
12type PickerValue = DateValue | RangeValue | readonly DateValue[];

1type PickerValueInput =
2  | Date
3  | string
4  | { readonly start: Date | string; readonly end: Date | string }
5  | readonly (Date | string)[];

1interface OpenEventData {
2  mode: "docked" | "modal" | "inline";
3}
4
5type CloseEventData = Record<string, never>;
6
7interface CancelEventData {
8  reason: "button" | "escape" | "outside";
9}
10
11interface ConfirmEventData {
12  value: PickerValue | null;
13  autoCommit: boolean;
14}
15
16interface UpdateEventData {
17  options: DatepickerOptions;
18}
19
20interface SelectDayEventData {
21  value: DateValue;
22  selected: boolean;
23}
24
25interface RangeStartEventData {
26  value: DateValue;
27}
28
29interface RangeEndEventData {
30  start: DateValue;
31  end: DateValue;
32}
33
34interface SelectMonthEventData {
35  year: number;
36  month: number;       // 1-12
37}
38
39interface SelectYearEventData {
40  year: number;
41}
42
43interface NavigateEventData {
44  year: number;
45  month: number;       // first month shown, 1-12
46  direction: -1 | 0 | 1;
47  source: "drag" | "wheel" | "button" | "keyboard" | "menu";
48}
49
50interface ErrorEventData {
51  code: "invalid-date" | "unavailable-date" | "invalid-option" | "invalid-value";
52  message: string;
53  input?: string;
54  option?: string;
55  reason?: UnavailableReason;
56}

1interface DatepickerEventMap {
2  open: OpenEventData;
3  close: CloseEventData;
4  cancel: CancelEventData;
5  confirm: ConfirmEventData;
6  update: UpdateEventData;
7  error: ErrorEventData;
8  "select:day": SelectDayEventData;
9  "select:month": SelectMonthEventData;
10  "select:year": SelectYearEventData;
11  "range:start": RangeStartEventData;
12  "range:end": RangeEndEventData;
13  navigate: NavigateEventData;
14}

1type ThemeName =
2  | "basic"
3  | "m3-green"
4  | "crane"
5  | "crane-straight"
6  | "m2"
7  | "glassmorphic"
8  | "pastel"
9  | "ai"
10  | "cyberpunk"
11  | "blueprint";

1type CalendarMode = "single" | "range" | "multiple";
2type Precision = "day" | "month" | "year";
3type PageBy = "month" | "view";
4type RangeEnd = "start" | "end";

1type UnavailableReason =
2  | "min"
3  | "max"
4  | "disabled"
5  | "weekday"
6  | "range-length"
7  | "multiple-max";

1type PluralLabel =
2  string | Readonly<Partial<Record<Intl.LDMLPluralRule, string>>>;

1interface DateDecoration {
2  className?: string;
3  badge?: boolean;
4  label?: string;
5}
6
7interface RangePresetValue {
8  start: Date | string;
9  end: Date | string;
10}
11
12interface RangePreset {
13  label: string;
14  value: RangePresetValue | (() => RangePresetValue);
15}

1import DatepickerUI, { type DatepickerOptions } from "@pglejzer/datepicker-ui";
2
3const options: DatepickerOptions = {
4  calendar: {
5    mode: "range",
6    minDate: "today",
7    isDateDisabled: (date) => date.getDay() === 0,
8  },
9  ui: { theme: "m3-green" },
10  callbacks: {
11    onConfirm: ({ value }) => {
12      console.log(value);
13    },
14  },
15};
16
17const input = document.querySelector<HTMLInputElement>("#date");
18
19if (input) {
20  new DatepickerUI(input, options).create();
21}

1import DatepickerUI, {
2  type ConfirmEventData,
3  type DatepickerEventMap,
4} from "@pglejzer/datepicker-ui";
5
6const picker = new DatepickerUI("#date");
7
8picker.on("select:day", ({ value, selected }) => {
9  console.log(value.value, selected);
10});
11
12const onConfirm = (data: ConfirmEventData) => {
13  console.log(data.value, data.autoCommit);
14};
15
16picker.on("confirm", onConfirm);
17picker.off("confirm", onConfirm);
18
19function listen<K extends keyof DatepickerEventMap>(
20  event: K,
21  handler: (data: DatepickerEventMap[K]) => void,
22) {
23  return picker.on(event, handler);
24}
25
26const stop = listen("navigate", ({ year, month, source }) => {
27  console.log(year, month, source);
28});
29
30stop();

1import {
2  type DateValue,
3  type PickerValue,
4  type RangeValue,
5} from "@pglejzer/datepicker-ui";
6
7function isRange(value: PickerValue): value is RangeValue {
8  return "start" in value;
9}
10
11function isSingle(value: PickerValue): value is DateValue {
12  return "value" in value;
13}
14
15function describe(value: PickerValue | null): string {
16  if (value === null) return "Nothing selected";
17  if (isRange(value)) return value.start.value + " to " + value.end.value;
18  if (isSingle(value)) return value.value;
19  return value.map((entry) => entry.value).join(", ");
20}

1import DatepickerUI, {
2  type DateValue,
3  type RangeValue,
4} from "@pglejzer/datepicker-ui";
5
6const picker = new DatepickerUI("#date", { calendar: { mode: "range" } });
7picker.create();
8
9const range = picker.getValue() as RangeValue | null;
10
11if (range) {
12  console.log(range.start.value, range.end.value);
13}
14
15const single = new DatepickerUI("#birthday");
16single.create();
17
18const day = single.getValue() as DateValue | null;

1import { useEffect, useRef } from "react";
2import DatepickerUI, { type DatepickerOptions } from "@pglejzer/datepicker-ui";
3import "@pglejzer/datepicker-ui/index.css";
4
5type DateFieldProps = {
6  options?: DatepickerOptions;
7  onDate: (iso: string | null) => void;
8};
9
10export function DateField({ options, onDate }: DateFieldProps) {
11  const ref = useRef<HTMLInputElement>(null);
12
13  useEffect(() => {
14    if (!ref.current) return;
15    const picker = new DatepickerUI(ref.current, options);
16    picker.create();
17    picker.on("confirm", ({ value }) => {
18      onDate(value && "value" in value ? value.value : null);
19    });
20    return () => picker.destroy();
21  }, [options, onDate]);
22
23  return <input ref={ref} />;
24}

1import {
2  parseDate,
3  resolvePattern,
4  type FormatPattern,
5  type PlainDate,
6} from "@pglejzer/datepicker-ui/kit";
7
8const pattern: FormatPattern = resolvePattern("dd.MM.yyyy", "en-GB");
9const date: PlainDate | null = parseDate("14.03.2025", pattern);