@nepdatejs/datepicker 0.0.0-bootstrap → 0.1.0

package/src/range.ts

@@ -0,0 +1,428 @@
+import { maskDateText } from './mask';
+import {
+  compareDates,
+  differenceInDays,
+  formatMessage,
+  getConfig,
+  getLocale,
+  toCalendar,
+  toIsoDate,
+  type AdDate,
+  type CalendarDate,
+  type CalendarSystem,
+} from '@nepdatejs/core';
+import { createCalendar } from '@nepdatejs/calendar';
+import {
+  createEmitter,
+  formatOf,
+  inputLimits,
+  isRange,
+  localeOf,
+  panelOptions,
+  todayOf,
+} from './base';
+import {
+  describePreset,
+  resolveRangePreset,
+  type PresetContext,
+  type PresetRange,
+  type PresetState,
+} from './presets';
+import {
+  checkDate,
+  detailOf,
+  equivalentText,
+  formatInput,
+  parseInput,
+  placeholderText,
+  readIso,
+} from './input';
+import type {
+  DateError,
+  DateRangePickerActions,
+  DateRangePickerOptions,
+  DateRangePickerState,
+  DateRangePickerStore,
+  RangeField,
+  RangeValue,
+} from './types';
+
+type RangeError = DateError & { readonly field: RangeField | 'range' };
+
+/**
+ * A BS/AD date range picker without UI: two typed fields (start, end), a panel
+ * calendar in range mode, minDays/maxDays checks and the BS/AD switch. Values
+ * are AD "YYYY-MM-DD" strings; an unfinished or invalid end is "".
+ */
+export function createDateRangePicker(
+  initial: DateRangePickerOptions = {},
+): DateRangePickerStore {
+  let options: DateRangePickerOptions = { ...initial };
+  let calendar: CalendarSystem = options.calendar ?? options.defaultCalendar ?? 'BS';
+  let start: AdDate | null = readIso(options.value?.start ?? options.defaultValue?.start);
+  let end: AdDate | null = readIso(options.value?.end ?? options.defaultValue?.end);
+  [start, end] = ordered(start, end);
+  let value = valueOf(start, end);
+  let startText = format(start);
+  let endText = format(end);
+  let error: RangeError | null = null;
+  let open = false;
+  let destroyed = false;
+
+  const panel = createCalendar({
+    ...panelOptions(options, calendar),
+    selectionMode: 'range',
+    selected: { start, end },
+    onSelect: (selection) => {
+      if (isRange(selection)) {
+        pick(selection.start, selection.end);
+      }
+    },
+  });
+  let snapshot = build();
+  const emitter = createEmitter(() => {
+    snapshot = build();
+  });
+  panel.subscribe(() => {
+    emitter.notify();
+  });
+
+  function format(date: CalendarDate | null): string {
+    return formatInput(date, calendar, formatOf(options), localeOf(options));
+  }
+
+  function build(): DateRangePickerState {
+    const locale = localeOf(options);
+
+    return Object.freeze({
+      value,
+      date: Object.freeze({ start: detailOf(start), end: detailOf(end) }),
+      startText,
+      endText,
+      calendar,
+      canSwitchCalendar: options.calendar === undefined,
+      open: open || options.inline === true,
+      inline: options.inline === true,
+      error,
+      equivalentText: Object.freeze({
+        start: error?.field === 'start' ? null : equivalentText(start, calendar, locale),
+        end: error?.field === 'end' ? null : equivalentText(end, calendar, locale),
+      }),
+      placeholder: placeholderText(calendar, locale),
+      presets: presetStates(),
+      calendarState: panel.getState(),
+    });
+  }
+
+  function presetContext(): PresetContext {
+    return {
+      today: toCalendar(todayOf(options), 'AD'),
+      calendar,
+      weekStartsOn: options.weekStartsOn ?? getConfig().weekStartsOn,
+    };
+  }
+
+  /** Each shortcut's range, or null when it cannot be used now. */
+  function resolvedPresets(): { id: string; label: string; range: PresetRange | null }[] {
+    const context = presetContext();
+    const limits = inputLimits(options, panel);
+    const locale = localeOf(options);
+
+    return (options.presets ?? []).map((preset) => {
+      const entry = describePreset(preset, options.locale, resolveRangePreset);
+      const range = ((): PresetRange | null => {
+        try {
+          const candidate = entry.resolve(context);
+          const from = toCalendar(candidate.start, 'AD');
+          const to = toCalendar(candidate.end, 'AD');
+          const allowed =
+            compareDates(from, to) <= 0 &&
+            !checkDate(from, calendar, limits, locale) &&
+            !checkDate(to, calendar, limits, locale) &&
+            lengthError(from, to) === null;
+          return allowed ? candidate : null;
+        } catch {
+          return null; // e.g. outside the BS table
+        }
+      })();
+
+      return { id: entry.id, label: entry.label, range };
+    });
+  }
+
+  function presetStates(): PresetState[] {
+    return resolvedPresets().map(({ id, label, range }) =>
+      Object.freeze({
+        id,
+        label,
+        isActive:
+          range !== null &&
+          toIsoDate(range.start) === value.start &&
+          toIsoDate(range.end) === value.end,
+        isDisabled: range === null,
+      }),
+    );
+  }
+
+  function syncPanel(): void {
+    panel.setOptions({
+      ...panelOptions(options, calendar),
+      selected: { start, end },
+      ...(start ? { visibleMonth: start } : {}),
+    });
+  }
+
+  /** Too short or too long, or null. Counts both ends. */
+  function lengthError(from: AdDate, to: AdDate): RangeError | null {
+    const days = differenceInDays(to, from) + 1;
+    const messages = getLocale(localeOf(options)).messages;
+    if (options.minDays !== undefined && days < options.minDays) {
+      return {
+        field: 'range',
+        code: 'tooShort',
+        message: formatMessage(messages.rangeTooShort, { min: String(options.minDays) }),
+      };
+    }
+    if (options.maxDays !== undefined && days > options.maxDays) {
+      return {
+        field: 'range',
+        code: 'tooLong',
+        message: formatMessage(messages.rangeTooLong, { max: String(options.maxDays) }),
+      };
+    }
+
+    return null;
+  }
+
+  /** Store the dates, keep the panel in step, and queue onChange when the value moved. */
+  function commit(
+    nextStart: AdDate | null,
+    nextEnd: AdDate | null,
+    byUser: boolean,
+  ): void {
+    start = nextStart;
+    end = nextEnd;
+    const next = valueOf(start, end);
+    const changed = next.start !== value.start || next.end !== value.end;
+    value = next;
+    syncPanel();
+    if (changed && byUser) {
+      const detail = Object.freeze({ start: detailOf(start), end: detailOf(end) });
+      emitter.after(() => options.onChange?.(next, detail));
+    }
+  }
+
+  /** Put the ends in order, check the length, then commit. False when the length is not allowed. */
+  function settle(nextStart: AdDate | null, nextEnd: AdDate | null): boolean {
+    const [a, b] = ordered(nextStart, nextEnd);
+    if (a !== nextStart) {
+      [startText, endText] = [endText, startText];
+    }
+    const tooFar = a && b ? lengthError(a, b) : null;
+    error = tooFar ?? error;
+    commit(a, tooFar ? null : b, true);
+
+    return tooFar === null;
+  }
+
+  function pick(from: CalendarDate | null, to: CalendarDate | null): void {
+    emitter.act(() => {
+      const a = from ? toCalendar(from, 'AD') : null;
+      const b = to ? toCalendar(to, 'AD') : null;
+      error = null;
+      startText = format(a);
+      endText = format(b);
+      const allowed = settle(a, b);
+      if (b && allowed && (options.closeOnSelect ?? true)) {
+        open = false;
+      }
+    });
+  }
+
+  const actions: DateRangePickerActions = {
+    type(field, text) {
+      if (destroyed) {
+        return;
+      }
+      emitter.act(() => {
+        if (options.mask !== false) {
+          text = maskDateText(text, field === 'start' ? startText : endText);
+        }
+        if (field === 'start') {
+          startText = text;
+        } else {
+          endText = text;
+        }
+        const result = parseInput(
+          text,
+          calendar,
+          inputLimits(options, panel),
+          localeOf(options),
+          formatOf(options),
+        );
+        const date = result.kind === 'date' ? result.date : null;
+        error = result.kind === 'error' ? { ...result.error, field } : null;
+        const other = field === 'start' ? end : start;
+        const otherError = other
+          ? checkDate(other, calendar, inputLimits(options, panel), localeOf(options))
+          : null;
+        if (!error && otherError) {
+          error = { ...otherError, field: field === 'start' ? 'end' : 'start' };
+        }
+        if (field === 'start') {
+          settle(date, end);
+        } else {
+          settle(start, date);
+        }
+      });
+    },
+    blur(field) {
+      emitter.act(() => {
+        if (error?.field === field) {
+          return;
+        }
+        if (field === 'start') {
+          startText = format(start);
+        } else if (end || error?.field !== 'range') {
+          endText = format(end);
+        }
+      });
+    },
+    clear() {
+      emitter.act(() => {
+        startText = '';
+        endText = '';
+        error = null;
+        commit(null, null, true);
+      });
+    },
+    setValue(next) {
+      emitter.act(() => {
+        applyValue(next);
+      });
+    },
+    open() {
+      emitter.act(() => {
+        open = true;
+        panel.actions.goTo(start ?? todayOf(options));
+      });
+    },
+    close() {
+      emitter.act(() => {
+        open = false;
+      });
+    },
+    toggle() {
+      if (open) {
+        actions.close();
+      } else {
+        actions.open();
+      }
+    },
+    switchCalendar(next) {
+      if (options.calendar !== undefined || next === calendar || destroyed) {
+        return;
+      }
+      emitter.act(() => {
+        calendar = next;
+        if (!error) {
+          startText = format(start);
+          endText = format(end);
+        }
+        syncPanel();
+        emitter.after(() => options.onCalendarChange?.(next));
+      });
+    },
+    select(day) {
+      let picked = false;
+      if (!destroyed) {
+        emitter.act(() => {
+          picked = panel.actions.select(day);
+        });
+      }
+
+      return picked;
+    },
+    applyPreset(id) {
+      const preset = resolvedPresets().find((entry) => entry.id === id);
+      if (destroyed || !preset?.range) {
+        return false;
+      }
+      pick(preset.range.start, preset.range.end);
+
+      return true;
+    },
+    reset() {
+      emitter.act(() => {
+        const [a, b] = ordered(
+          readIso(options.defaultValue?.start),
+          readIso(options.defaultValue?.end),
+        );
+        error = null;
+        startText = format(a);
+        endText = format(b);
+        commit(a, b, true);
+      });
+    },
+  };
+
+  /** An outside value: replaces the texts only when the value differs (echo guard). */
+  function applyValue(next: RangeValue | undefined): void {
+    const [a, b] = ordered(readIso(next?.start), readIso(next?.end));
+    const incoming = valueOf(a, b);
+    if (incoming.start === value.start && incoming.end === value.end) {
+      return;
+    }
+    error = null;
+    startText = format(a);
+    endText = format(b);
+    commit(a, b, false);
+  }
+
+  return {
+    getState: () => snapshot,
+    subscribe: (listener) => emitter.subscribe(listener),
+    setOptions(changes) {
+      if (destroyed) {
+        return;
+      }
+      emitter.act(() => {
+        const before = { calendar, locale: localeOf(options), format: formatOf(options) };
+        options = { ...options, ...changes };
+        if (options.calendar !== undefined) {
+          calendar = options.calendar;
+        }
+        if ('value' in changes) {
+          applyValue(changes.value);
+        }
+        const looksChanged =
+          before.calendar !== calendar ||
+          before.locale !== localeOf(options) ||
+          before.format !== formatOf(options);
+        if (looksChanged && !error) {
+          startText = format(start);
+          endText = format(end);
+        }
+        syncPanel();
+      });
+    },
+    actions,
+    calendar: panel,
+    destroy() {
+      destroyed = true;
+      panel.destroy();
+      emitter.clear();
+    },
+  };
+}
+
+function ordered(a: AdDate | null, b: AdDate | null): [AdDate | null, AdDate | null] {
+  return a && b && compareDates(b, a) < 0 ? [b, a] : [a, b];
+}
+
+function valueOf(start: AdDate | null, end: AdDate | null): RangeValue {
+  return Object.freeze({
+    start: start ? toIsoDate(start) : '',
+    end: end ? toIsoDate(end) : '',
+  });
+}

package/src/types.ts

@@ -0,0 +1,250 @@
+import type {
+  AdDate,
+  BsDate,
+  CalendarDate,
+  CalendarSystem,
+  DateFormatPattern,
+  LocaleCode,
+  Weekday,
+} from '@nepdatejs/core';
+import type { PresetState, RangePreset, SinglePreset } from './presets';
+import type {
+  CalendarState,
+  CalendarStore,
+  EventMarker,
+  HolidayInput,
+  HolidayLookup,
+} from '@nepdatejs/calendar';
+
+/** The same day in both calendars, sent with every change. */
+export interface DateDetail {
+  readonly ad: AdDate;
+  readonly bs: BsDate;
+}
+
+export type DateErrorCode =
+  'format' | 'range' | 'disabled' | 'tooShort' | 'tooLong' | 'tooMany';
+
+export interface DateError {
+  readonly code: DateErrorCode;
+  /** Already translated for the picker's locale. */
+  readonly message: string;
+}
+
+/** Options both pickers share. Dates in options are AD "YYYY-MM-DD" strings (docs/plan D-003). */
+export interface PickerBaseOptions {
+  /** Show and type dates in this calendar only, and hide the BS/AD switch. */
+  readonly calendar?: CalendarSystem | undefined;
+  /** The calendar shown first when switching is allowed. Default 'BS'. */
+  readonly defaultCalendar?: CalendarSystem | undefined;
+  /** Called when the user switches BS/AD (adapters may remember it). */
+  readonly onCalendarChange?: ((calendar: CalendarSystem) => void) | undefined;
+  /** Earliest and latest allowed days, as AD "YYYY-MM-DD". */
+  readonly min?: string | undefined;
+  readonly max?: string | undefined;
+  readonly isDateDisabled?: ((date: CalendarDate) => boolean) | undefined;
+  readonly locale?: LocaleCode | undefined;
+  /** How the input shows a date. Default 'iso' (YYYY-MM-DD), which can be typed back. */
+  readonly displayFormat?: DateFormatPattern | undefined;
+  /** Close the panel after a pick. Default true. */
+  readonly closeOnSelect?: boolean | undefined;
+  /** Show the calendar in the page, always open, instead of in a popover. Default false. */
+  readonly inline?: boolean | undefined;
+  /** Add the dashes of YYYY-MM-DD while the user types digits. Default true. */
+  readonly mask?: boolean | undefined;
+  // Passed through to the panel's calendar.
+  readonly holidays?: readonly HolidayInput[] | HolidayLookup | undefined;
+  readonly events?: ((date: CalendarDate) => readonly EventMarker[]) | undefined;
+  readonly showOtherCalendar?: boolean | undefined;
+  readonly weekStartsOn?: Weekday | undefined;
+  readonly weekendDays?: readonly Weekday[] | undefined;
+  /** Override "today" (tests, server rendering). */
+  readonly today?: CalendarDate | undefined;
+}
+
+export interface DatePickerOptions extends PickerBaseOptions {
+  /** AD "YYYY-MM-DD" or "". Passing it again through setOptions replaces the value. */
+  readonly value?: string | undefined;
+  /** The starting value when the picker keeps its own state. */
+  readonly defaultValue?: string | undefined;
+  readonly onChange?: ((value: string, detail: DateDetail | null) => void) | undefined;
+  /** Shortcuts shown in the panel: 'today', 'yesterday', 'tomorrow' or your own. */
+  readonly presets?: readonly SinglePreset[] | undefined;
+}
+
+export interface DatePickerState {
+  /** AD "YYYY-MM-DD", or "" when empty or invalid. Never a BS date. */
+  readonly value: string;
+  readonly date: DateDetail | null;
+  /** What the input shows. */
+  readonly text: string;
+  /** The calendar the input and panel use. */
+  readonly calendar: CalendarSystem;
+  readonly canSwitchCalendar: boolean;
+  /** The panel is showing. Always true for an inline picker. */
+  readonly open: boolean;
+  /** The calendar sits in the page and never closes (option `inline`). */
+  readonly inline: boolean;
+  readonly error: DateError | null;
+  /** The same day in the other calendar, e.g. "10 October 2026 AD". */
+  readonly equivalentText: string | null;
+  /** "YYYY-MM-DD (BS)" */
+  readonly placeholder: string;
+  readonly presets: readonly PresetState[];
+  readonly calendarState: CalendarState;
+}
+
+export interface DatePickerActions {
+  /** The user typed. Updates the value when the text is a valid, allowed date. */
+  type(text: string): void;
+  /** Tidy the text ("2083/6/4" → "2083-06-04") unless it has an error. */
+  blur(): void;
+  clear(): void;
+  /** Set the value from outside; does not call onChange. */
+  setValue(value: string): void;
+  open(): void;
+  close(): void;
+  toggle(): void;
+  /** Show BS or AD. The value does not change. Ignored when the calendar is fixed. */
+  switchCalendar(calendar: CalendarSystem): void;
+  /** Pick a day (e.g. from the panel). Returns false when the day is disabled. */
+  select(date: CalendarDate): boolean;
+  /** Returns false when today is not allowed. */
+  selectToday(): boolean;
+  /** Back to defaultValue (form reset). */
+  reset(): void;
+  /** Apply a shortcut by id. Returns false when it is disabled or unknown. */
+  applyPreset(id: string): boolean;
+}
+
+export interface DatePickerStore {
+  getState(): DatePickerState;
+  subscribe(listener: () => void): () => void;
+  setOptions(changes: Partial<DatePickerOptions>): void;
+  readonly actions: DatePickerActions;
+  /** The panel's calendar store, for adapters (keyboard moves, views, hover). */
+  readonly calendar: CalendarStore;
+  destroy(): void;
+}
+
+export interface RangeValue {
+  readonly start: string;
+  readonly end: string;
+}
+
+export interface RangeDetail {
+  readonly start: DateDetail | null;
+  readonly end: DateDetail | null;
+}
+
+export interface DateRangePickerOptions extends PickerBaseOptions {
+  readonly value?: RangeValue | undefined;
+  readonly defaultValue?: RangeValue | undefined;
+  readonly onChange?: ((value: RangeValue, detail: RangeDetail) => void) | undefined;
+  /** Shortest and longest allowed range, in days, counting both ends. */
+  readonly minDays?: number | undefined;
+  readonly maxDays?: number | undefined;
+  /** Shortcuts: 'last7Days', 'thisMonth', 'thisFiscalYear', … or your own. */
+  readonly presets?: readonly RangePreset[] | undefined;
+}
+
+export type RangeField = 'start' | 'end';
+
+export interface DateRangePickerState {
+  readonly value: RangeValue;
+  readonly date: RangeDetail;
+  readonly startText: string;
+  readonly endText: string;
+  readonly calendar: CalendarSystem;
+  readonly canSwitchCalendar: boolean;
+  /** The panel is showing. Always true for an inline picker. */
+  readonly open: boolean;
+  /** The calendar sits in the page and never closes (option `inline`). */
+  readonly inline: boolean;
+  /** The first problem, and which field it belongs to ('range' for length problems). */
+  readonly error: (DateError & { readonly field: RangeField | 'range' }) | null;
+  readonly equivalentText: { readonly start: string | null; readonly end: string | null };
+  readonly placeholder: string;
+  readonly presets: readonly PresetState[];
+  readonly calendarState: CalendarState;
+}
+
+export interface DateRangePickerActions {
+  type(field: RangeField, text: string): void;
+  blur(field: RangeField): void;
+  clear(): void;
+  setValue(value: RangeValue): void;
+  open(): void;
+  close(): void;
+  toggle(): void;
+  switchCalendar(calendar: CalendarSystem): void;
+  /** A click in the panel: first sets the start, second the end. */
+  select(date: CalendarDate): boolean;
+  reset(): void;
+  /** Apply a shortcut by id. Returns false when it is disabled or unknown. */
+  applyPreset(id: string): boolean;
+}
+
+export interface DateRangePickerStore {
+  getState(): DateRangePickerState;
+  subscribe(listener: () => void): () => void;
+  setOptions(changes: Partial<DateRangePickerOptions>): void;
+  readonly actions: DateRangePickerActions;
+  readonly calendar: CalendarStore;
+  destroy(): void;
+}
+
+export interface MultiDatePickerOptions extends PickerBaseOptions {
+  /** AD "YYYY-MM-DD" days. Passing it again through setOptions replaces the value. */
+  readonly value?: readonly string[] | undefined;
+  readonly defaultValue?: readonly string[] | undefined;
+  readonly onChange?:
+    ((value: readonly string[], dates: readonly DateDetail[]) => void) | undefined;
+  /** The most days that may be chosen. */
+  readonly maxDates?: number | undefined;
+}
+
+export interface MultiDatePickerState {
+  /** AD "YYYY-MM-DD" days, sorted, no repeats. Never BS dates. */
+  readonly value: readonly string[];
+  readonly dates: readonly DateDetail[];
+  /** What the input shows: the days as YYYY-MM-DD, separated by ", ". */
+  readonly text: string;
+  readonly calendar: CalendarSystem;
+  readonly canSwitchCalendar: boolean;
+  /** The panel is showing. Always true for an inline picker. */
+  readonly open: boolean;
+  readonly inline: boolean;
+  readonly error: DateError | null;
+  readonly placeholder: string;
+  readonly calendarState: CalendarState;
+}
+
+export interface MultiDatePickerActions {
+  /** The user typed days separated by commas or spaces. */
+  type(text: string): void;
+  /** Tidy the text unless it has an error. */
+  blur(): void;
+  clear(): void;
+  /** Set the value from outside; does not call onChange. */
+  setValue(value: readonly string[]): void;
+  open(): void;
+  close(): void;
+  toggle(): void;
+  switchCalendar(calendar: CalendarSystem): void;
+  /** Add the day, or remove it when chosen. Returns false when disabled or over maxDates. */
+  select(date: CalendarDate): boolean;
+  /** Remove one day, by its AD "YYYY-MM-DD" value. */
+  remove(value: string): void;
+  /** Back to defaultValue (form reset). */
+  reset(): void;
+}
+
+export interface MultiDatePickerStore {
+  getState(): MultiDatePickerState;
+  subscribe(listener: () => void): () => void;
+  setOptions(changes: Partial<MultiDatePickerOptions>): void;
+  readonly actions: MultiDatePickerActions;
+  readonly calendar: CalendarStore;
+  destroy(): void;
+}