rn-grid-date-time-picker 1.0.0 → 1.2.0

package/lib/module/components/DateTimePicker.js

@@ -2,18 +2,24 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DateTime } from 'luxon';
+import { View } from 'react-native';
 import { resolveAdapter } from "../adapters/index.js";
-import { daysBetween, isSameDay } from "../core/calendarDate.js";
+import { compareCalendarDates, daysBetween, isSameDay } from "../core/calendarDate.js";
 import { createConstraints } from "../core/constraints.js";
-import { createDraft, DEFAULT_TIME, draftToWire, setTime as applyTime, validateDraft } from "../core/draft.js";
-import { resolveCalendarSystem } from "../core/calendarSystem.js";
+import { clearDraft as emptied, createDraft, DEFAULT_TIME, draftToWire, sameDayRangeOk, setTime as applyTime, validateDraft } from "../core/draft.js";
+import { hijriDateText, hijriPeriods, isHijriSupported, resolveCalendarSystem } from "../core/calendarSystem.js";
 import { defaultLocale, deriveDateFormat, deriveFirstDayOfWeek, deriveTimeFormat, normalizeDateFormat } from "../core/locale.js";
+import { arabicDigits, latinDigits, localeDigits } from "../core/numerals.js";
 import { withSelectionRules } from "../core/selectionRules.js";
 import { checkTime } from "../core/timeEntry.js";
 import Calendar from "./calendar/Calendar.js";
+import CalendarSwitch from "./calendar/CalendarSwitch.js";
 import { localeNames } from "./calendar/localeNames.js";
+import { RtlContext } from "./theme/direction.js";
+import { NumeralsContext } from "./theme/numerals.js";
+import { firstSelectedDay } from "./calendar/selection.js";
 import PickerContainer from "./container/PickerContainer.js";
-import { formatMultipleText, formatRangeText, formatValueText } from "./field/fieldText.js";
+import { formatDateText, formatMultipleText, formatRangeText, formatValueText } from "./field/fieldText.js";
 import FieldMessages from "./field/FieldMessages.js";
 import RangeFields from "./field/RangeFields.js";
 import ValueField from "./field/ValueField.js";
@@ -22,17 +28,43 @@ import { useOpenPicker } from "./hooks/useOpenPicker.js";
 import { usePickerDraft } from "./hooks/usePickerDraft.js";
 import { useTodayTick } from "./hooks/useTodayTick.js";
 import TimeRows from "./time/TimeRows.js";
-import { resolveStrings } from "./theme/defaultStrings.js";
+import { DEFAULT_STRINGS, compactStrings, resolveStrings } from "./theme/defaultStrings.js";
 import { buildTokens } from "./theme/tokens.js";
 import { DEFAULT_YEAR_RANGE } from "./types.js";
 
 /** Same day and time (or both without a time). */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const sameValue = (a, b) => isSameDay(a.date, b.date) && (a.time?.hour ?? -1) === (b.time?.hour ?? -1) && (a.time?.minute ?? -1) === (b.time?.minute ?? -1);
+const ALL_SYSTEMS = ['gregory', 'hijri', 'dual'];
+const RTL = {
+  direction: 'rtl'
+};
+
+/** The same kind of selection with nothing in it. */
+const emptySelection = sel => sel.kind === 'single' ? {
+  kind: 'single',
+  day: null
+} : sel.kind === 'range' ? {
+  kind: 'range',
+  from: null,
+  to: null
+} : {
+  ...sel,
+  days: []
+};
 
 /** Minute steps that divide the hour. */
 const MINUTE_STEPS = [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60];
 
+/** A folded calendar stays mounted, so it comes back on the month and view it showed. */
+const FOLDED = {
+  display: 'none'
+};
+
+/** The later / earlier of a limit and a bound; the bound when there's no limit. */
+const later = (a, b) => a && compareCalendarDates(a, b) > 0 ? a : b;
+const earlier = (a, b) => a && compareCalendarDates(a, b) < 0 ? a : b;
+
 /**
  * A date & time picker: a value field that opens a sheet (or an inline panel)
  * with a calendar and, for date-time values, a time row. Single, range and
@@ -72,6 +104,7 @@ const DateTimePicker = props => {
     disabled = false,
     readOnly = false,
     allowTyping,
+    hideCalendarOnKeyboard = true,
     allowFieldTyping,
     allowClear,
     errorMessage,
@@ -103,6 +136,11 @@ const DateTimePicker = props => {
     initialVisibleDate,
     enableMonthSwipe = true,
     calendarSystem,
+    calendarSwitch,
+    onCalendarSystemChange,
+    dualDefaultTab = 'gregory',
+    hijriLocale = 'ar-SA',
+    renderCalendarSwitch,
     showToday = false,
     showHolidays = true,
     onVisibleMonthChange,
@@ -110,6 +148,7 @@ const DateTimePicker = props => {
     validate,
     yearRange: yearRangeProp = DEFAULT_YEAR_RANGE,
     locale,
+    numerals: numeralsProp,
     timeZone,
     now,
     timeFormat: timeFormatProp,
@@ -129,6 +168,7 @@ const DateTimePicker = props => {
     theme,
     styles,
     strings: stringOverrides,
+    hijriStrings: hijriOverrides,
     testID
   } = props;
   const tokens = useMemo(() => buildTokens(theme),
@@ -139,6 +179,69 @@ const DateTimePicker = props => {
   const firstDayOfWeek = firstDayProp ?? deriveFirstDayOfWeek(loc);
   // Month and year picks are for single dates only.
   const precision = type === 'date' && mode === 'single' ? precisionProp : 'day';
+  // The calendars the switch offers: none for month and year picks (always
+  // Gregorian), or when the platform has no Hijri calendar.
+  const switchKey = Array.isArray(calendarSwitch) ? calendarSwitch.join(',') : String(!!calendarSwitch);
+  const switchSystems = useMemo(() => {
+    if (!calendarSwitch || precision !== 'day' || !isHijriSupported()) return null;
+    const list = calendarSwitch === true ? ALL_SYSTEMS : ALL_SYSTEMS.filter(x => calendarSwitch.includes(x)).sort((a, b) => calendarSwitch.indexOf(a) - calendarSwitch.indexOf(b));
+    return list.length > 1 ? list : null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- the list is compared by content
+  }, [switchKey, precision]);
+  const startSystem = () => {
+    const wanted = calendarSystem ?? 'gregory';
+    return switchSystems && !switchSystems.includes(wanted) ? switchSystems[0] ?? wanted : wanted;
+  };
+  // The switch changes this; a new calendarSystem prop starts over from it.
+  const [chosenSystem, setChosenSystem] = useState(startSystem);
+  // The calendar the props open on, which a value from outside counts as
+  // picked in. The switch's own choice coming back as the calendarSystem prop
+  // (onCalendarSystemChange={setSystem}) isn't a new one.
+  const [openedOn, setOpenedOn] = useState(startSystem);
+  const echo = useRef(null);
+  useEffect(() => {
+    const next = startSystem();
+    const own = echo.current === next;
+    echo.current = null;
+    if (own) return;
+    setChosenSystem(next);
+    setOpenedOn(next);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- only when the props change
+  [calendarSystem, switchKey]);
+  // Month and year picks are Gregorian whatever the calendar system.
+  const system = precision === 'day' ? resolveCalendarSystem(chosenSystem) : 'gregory';
+  // A dual calendar shows one of its two tabs; each open starts on dualDefaultTab.
+  const [dualTab, setDualTab] = useState(dualDefaultTab);
+  /** The calendar on screen. */
+  const shownSystem = system === 'dual' ? dualTab : system;
+  // A value from outside counts as picked in the calendar the props open on,
+  // not the one the user has since chosen in the switch.
+  const propSystem = precision === 'day' ? resolveCalendarSystem(openedOn) : 'gregory';
+  const outsideSystem = propSystem === 'dual' ? dualDefaultTab : propSystem;
+  // Picks say which calendar they were made in only when one can be Hijri.
+  const hijriInPlay = switchSystems !== null || system !== 'gregory';
+  /**
+   * The digits for one calendar: a Hijri calendar (and a date picked in it)
+   * shows Arabic digits (١٢٣) in any language; a Gregorian one shows 0–9.
+   * `numerals` sets both.
+   */
+  const digitsFor = sys => {
+    const kind = numeralsProp ?? (sys === 'hijri' ? 'arabic' : 'latin');
+    if (kind === 'arabic') return arabicDigits;
+    if (kind === 'latin') return latinDigits;
+    return localeDigits(sys === 'hijri' ? hijriLocale : loc);
+  };
+  /**
+   * The strings for one calendar. A Hijri one takes `hijriStrings` first, then
+   * AM / PM in `hijriLocale` (ص / م), then `strings`.
+   */
+  const hijriStrings = useMemo(() => ({
+    ...strings,
+    ...hijriPeriods(hijriLocale),
+    ...compactStrings(hijriOverrides)
+  }), [strings, hijriLocale, hijriOverrides]);
+  const stringsFor = sys => sys === 'hijri' ? hijriStrings : strings;
   const monthNames = useMemo(() => localeNames(loc).monthsLong, [loc]);
   /** A month or year pick shown as text: "March 2026" or "2026". */
   const periodText = v => {
@@ -202,7 +305,7 @@ const DateTimePicker = props => {
   const {
     isOpen: sheetOpen,
     open,
-    close
+    close: closePicker
   } = useOpenPicker({
     disabled,
     readOnly,
@@ -212,7 +315,7 @@ const DateTimePicker = props => {
     onClose
   });
   const isOpen = isInline || sheetOpen;
-  const keyboardUp = useKeyboardFold(isOpen);
+  const keyboardUp = useKeyboardFold(isOpen && hideCalendarOnKeyboard);
   // The picker's own boxes that have focus. Inline, another field on the
   // screen can raise the keyboard, so the calendar folds only for these.
   const [focusedParts, setFocusedParts] = useState({});
@@ -259,16 +362,36 @@ const DateTimePicker = props => {
       };
     })).catch(() => requestedYears.current.delete(year));
   }, [loadHolidays]);
+  // A month's grid also shows days of the months either side, and a Hijri
+  // month can run from December into January, so a month at either end of a
+  // year loads the year next to it too.
+  const loadHolidaysAround = useCallback((year, month) => {
+    loadHolidaysFor(year);
+    if (month >= 11 && year < yearRange.last) loadHolidaysFor(year + 1);
+    if (month === 1 && year > yearRange.first) loadHolidaysFor(year - 1);
+  }, [loadHolidaysFor, yearRange.first, yearRange.last]);
   const holidays = useMemo(() => [...(holidaysProp ?? []), ...Object.values(loadedHolidays).flat()], [holidaysProp, loadedHolidays]);
 
   // Limits are worked out when the picker opens (the screen's own validation
   // after Confirm stays the final check).
   const weekdaysKey = disabledWeekdays?.join(',');
+  // Limits built with `dependsOnNow` ("from now on") are rebuilt every minute
+  // while the picker is open.
+  const [minuteTick, setMinuteTick] = useState(0);
   const constraints = useMemo(() => {
     const nowDate = now?.() ?? new Date();
+    // yearRange bounds the limits too, so days outside it are greyed.
     const limits = {
-      minDate,
-      maxDate,
+      minDate: later(minDate, {
+        year: yearRange.first,
+        month: 1,
+        day: 1
+      }),
+      maxDate: earlier(maxDate, {
+        year: yearRange.last,
+        month: 12,
+        day: 31
+      }),
       disabledDates,
       enabledDates,
       timeBounds,
@@ -291,8 +414,8 @@ const DateTimePicker = props => {
       type,
       timeZone: zone,
       now: nowDate,
-      minDate,
-      maxDate,
+      minDate: limits.minDate,
+      maxDate: limits.maxDate,
       isDisabled: disabledDates,
       isEnabled: enabledDates,
       timeBounds,
@@ -300,8 +423,25 @@ const DateTimePicker = props => {
       holidays,
       disableHolidays
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `isOpen` and `today` refresh the limits on open and at midnight; weekdays are compared by content
-  }, [isOpen, today, type, zone, now, holidays, minDate, maxDate, disabledDates, enabledDates, timeBounds, weekdaysKey, disableHolidays, getConstraints]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `isOpen`, `today` and `minuteTick` refresh the limits on open, at midnight and each minute; weekdays are compared by content
+  }, [isOpen, today, minuteTick, type, zone, now, holidays, minDate, maxDate, disabledDates, enabledDates, timeBounds, weekdaysKey, disableHolidays, getConstraints, yearRange]);
+  const followsClock = isOpen && constraints.dependsOnNow;
+  useEffect(() => {
+    if (!followsClock) return;
+    let timer;
+    const arm = () => {
+      const ms = 60_000 - (now?.() ?? new Date()).getTime() % 60_000;
+      timer = setTimeout(() => {
+        setMinuteTick(n => n + 1);
+        arm();
+      }, ms);
+      // Under Node (e.g. Jest) the timer must not keep the process alive.
+      timer.unref?.();
+    };
+    arm();
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- armed while open with a clock-bound limit
+  }, [followsClock]);
 
   // A typed field that doesn't parse blocks Confirm, per field: one end of a
   // range can't hide the other end's problem.
@@ -328,14 +468,30 @@ const DateTimePicker = props => {
   const [wheelSpinning, setWheelSpinning] = useState(false);
   // From/To layout: the end that calendar taps fill. perDate: the day the time row edits.
   const [activeEnd, setActiveEnd] = useState('from');
+  // From/To layout: a From or To field was tapped, so the next day tap edits that end only.
+  const [endPicked, setEndPicked] = useState(false);
+  const activateEnd = useCallback(end => {
+    setActiveEnd(end);
+    setEndPicked(true);
+  }, []);
   const [activeDay, setActiveDay] = useState(null);
   const resetSelectionUi = useCallback(() => {
+    // What was typed is gone with the selection, so nothing blocks Confirm.
+    setTypingBlocks({});
     setPendingTimes({});
     setActiveEnd('from');
+    setEndPicked(false);
     setActiveDay(null);
   }, []);
+  // A day in the month the calendar last showed, so a switch to the other
+  // calendar opens on the same days. Each open starts from the value again.
+  const shownAnchor = useRef(null);
+  const rememberAnchor = useCallback(day => {
+    shownAnchor.current = day;
+  }, []);
   // Opening or closing starts fresh: nothing edited, nothing blocked.
   useEffect(() => {
+    shownAnchor.current = null;
     edited.current = false;
     setTypingBlocks({});
     setTimeCheck(0);
@@ -399,6 +555,59 @@ const DateTimePicker = props => {
   };
   const valueKey = JSON.stringify(value ?? '');
 
+  // A selection belongs to the calendar it was picked in (Gregorian or Hijri):
+  // it shows only there, and the field writes it in that calendar. A saved
+  // value remembers its calendar; one from outside counts as picked in the
+  // calendar the picker opens on.
+  // The saved value as a draft, for the on-screen field and for comparing
+  // values by what they hold.
+  const saved = useMemo(() => createDraft(mode, value, draftOptions),
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- the value is compared by content (`valueKey`)
+  [valueKey, mode, draftOptions]);
+  /** A draft's days and times, so a value written another way ({to, from}) still matches. */
+  const contentOf = dr => JSON.stringify(valuesOf(dr));
+  const savedContent = contentOf(saved);
+  const savedSystemRef = useRef(null);
+  const savedSystem = savedSystemRef.current?.content === savedContent ? savedSystemRef.current.system : outsideSystem;
+  const [draftSystem, setDraftSystem] = useState(savedSystem);
+  // The draft is rebuilt on open and on a new value; so is its calendar. A new
+  // calendarSystem prop while the user is picking starts the selection over,
+  // since a selection is one calendar's.
+  const systemSeen = useRef({
+    isOpen,
+    valueKey,
+    savedSystem
+  });
+  useEffect(() => {
+    const seen = systemSeen.current;
+    systemSeen.current = {
+      isOpen,
+      valueKey,
+      savedSystem
+    };
+    setDraftSystem(savedSystem);
+    const systemOnly = seen.isOpen === isOpen && seen.valueKey === valueKey && seen.savedSystem !== savedSystem;
+    if (systemOnly && isOpen && edited.current) {
+      draft.clear();
+      resetSelectionUi();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- the draft's actions are stable
+  }, [isOpen, valueKey, savedSystem]);
+  useEffect(() => setDualTab(dualDefaultTab), [isOpen, dualDefaultTab]);
+  const selectionShown = draftSystem === shownSystem;
+  /** Saves a value: with the calendar it was picked in, when one can be Hijri. */
+  const emitChange = useCallback((wire, picked) => {
+    savedSystemRef.current = {
+      content: contentOf(createDraft(mode, wire, draftOptions)),
+      system: picked
+    };
+    if (hijriInPlay) onChange(wire, {
+      calendarSystem: picked
+    });else onChange(wire);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- contentOf reads only `type` and the options listed
+  [hijriInPlay, onChange, mode, draftOptions]);
+
   /**
    * Whether a draft can be saved as it stands: complete, every day allowed,
    * every time allowed and on the minute step, and nothing being typed or
@@ -411,19 +620,19 @@ const DateTimePicker = props => {
 
   // Every save: Confirm, an 'instant' edit (onConfirm is added by `confirm`).
   const commit = useCallback(wire => {
-    onChange(wire);
+    emitChange(wire, draftSystem);
     onBlur?.();
-  }, [onChange, onBlur]);
+  }, [emitChange, draftSystem, onBlur]);
   const confirm = useCallback(() => {
     if (!canConfirm) return;
     const {
       validate: check,
       onError: report,
-      value: saved
+      value: current
     } = latest.current;
     if (timeBlocked) {
       setTimeCheck(n => n + 1);
-      report?.(timeIssue ?? 'TIME_NOT_ALLOWED', saved);
+      report?.(timeIssue ?? 'TIME_NOT_ALLOWED', current);
       return;
     }
     const wire = draftToWire(preview, draftOptions);
@@ -439,14 +648,14 @@ const DateTimePicker = props => {
     commit(wire);
     onConfirm?.(wire);
     edited.current = false;
-    if (!isInline) close();
-  }, [canConfirm, timeBlocked, timeIssue, commit, onConfirm, preview, draftOptions, isInline, close]);
+    if (!isInline) closePicker();
+  }, [canConfirm, timeBlocked, timeIssue, commit, onConfirm, preview, draftOptions, isInline, closePicker]);
   const clearValue = useCallback(() => {
     draft.clear();
     resetSelectionUi();
     edited.current = false;
-    onChange('');
-  }, [draft, onChange, resetSelectionUi]);
+    emitChange('', draftSystem);
+  }, [draft, emitChange, draftSystem, resetSelectionUi]);
   const clearDraft = useCallback(() => {
     edited.current = true;
     draft.clear();
@@ -455,9 +664,10 @@ const DateTimePicker = props => {
 
   // × in the field above the calendar. 'instant' saves every edit, so it
   // clears the saved value too (once; an empty value isn't saved again).
+  const hasSaved = valuesOf(saved).some(v => v !== null);
   const clearInSheet = useCallback(() => {
-    if (commitMode === 'instant' && valueKey !== '""') clearValue();else clearDraft();
-  }, [commitMode, valueKey, clearValue, clearDraft]);
+    if (commitMode === 'instant' && hasSaved) clearValue();else clearDraft();
+  }, [commitMode, hasSaved, clearValue, clearDraft]);
 
   // Opening or closing starts without the last `validate` message.
   useEffect(() => setValidation(null), [isOpen]);
@@ -468,15 +678,27 @@ const DateTimePicker = props => {
   // An edit equal to the saved value isn't saved again; one `validate`
   // rejected waits until the selection or the saved value changes.
   const lastRejected = useRef(null);
+  // The last value saved: not saved again while the parent's `value` catches
+  // up (a slow store, a server round trip) or when it never does.
+  const lastEmitted = useRef(null);
   useEffect(() => {
     lastRejected.current = null;
-  }, [valueKey]);
-  useEffect(() => {
+    lastEmitted.current = null;
+  }, [valueKey, isOpen]);
+  // The field in the sheet saves once typing there is done (focus leaves it),
+  // so 09:30 isn't saved as 09:00 and 09:03 on the way.
+  const sheetTyping = !!(focusedParts.value || focusedParts['value-from'] || focusedParts['value-to']);
+  /** Saves the draft in instant mode; `typingDone` once the sheet's field is left. */
+  const saveInstant = typingDone => {
     if (commitMode !== 'instant' || !isOpen || !edited.current) return;
-    if (timeIssue || !canSave(draft.draft)) return;
+    if (!typingDone || timeIssue || !canSave(draft.draft)) return;
     const wire = draft.toWire();
     const key = JSON.stringify(wire);
-    if (key === valueKey || key === lastRejected.current) return;
+    if (key === lastRejected.current || key === lastEmitted.current) return;
+    // The same dates picked in the same calendar aren't saved again; the same
+    // dates picked in the other calendar are.
+    const unchanged = key === valueKey || contentOf(draft.draft) === savedContent;
+    if (unchanged && draftSystem === savedSystem) return;
     const message = latest.current.validate?.(wire);
     if (message) {
       lastRejected.current = key;
@@ -487,9 +709,22 @@ const DateTimePicker = props => {
       latest.current.onError?.('VALIDATION', wire);
       return;
     }
+    lastEmitted.current = key;
     commit(wire);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- when the draft or what blocks it changes, not when callbacks are re-created
-  }, [commitMode, isOpen, draft.draft, timeIssue, typingBlocked, wheelSpinning, confirmDisabled, constraints]);
+  };
+  // Only typing waits for the field to be left; a tap is a finished edit.
+  const typedLast = useRef(false);
+  useEffect(() => saveInstant(!sheetTyping || !typedLast.current),
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- when the draft or what blocks it changes, not when callbacks are re-created
+  [commitMode, isOpen, sheetTyping, draft.draft, draftSystem, timeIssue, typingBlocked, wheelSpinning, confirmDisabled, constraints]);
+  // Closing while the sheet's field still has focus ends the typing: an
+  // instant picker saves what was typed before it closes.
+  const saveInstantRef = useRef(saveInstant);
+  saveInstantRef.current = saveInstant;
+  const close = useCallback(() => {
+    saveInstantRef.current(true);
+    closePicker();
+  }, [closePicker]);
 
   // A typed date with no time yet gets one the way a tapped day does: the fixed
   // newDayTime, else a time already typed in the time row, else now.
@@ -497,14 +732,24 @@ const DateTimePicker = props => {
     date: parsed.dateOnly,
     time: fixedTime ?? pending[key] ?? nowTime()
   } : null);
+
+  // Typed segments are Gregorian, so typing keeps the calendar a selection was
+  // picked in; into an empty draft, it takes the calendar on screen.
+  const adoptShownIfEmpty = () => {
+    if (valuesOf(d).every(v => v === null)) setDraftSystem(shownSystem);
+  };
   const onSheetTyped = parsed => {
     edited.current = true;
+    typedLast.current = true;
+    adoptShownIfEmpty();
     const typed = withFilledTime(parsed, 'single');
     setTypingBlock('single', !parsed.isEmpty && !typed);
     if (typed) draft.setValue(typed, 'single');else if (parsed.isEmpty) draft.clear();
   };
   const onRangeTyped = (end, parsed) => {
     edited.current = true;
+    typedLast.current = true;
+    adoptShownIfEmpty();
     const typed = withFilledTime(parsed, end);
     setTypingBlock(end, !parsed.isEmpty && !typed);
     if (typed || parsed.isEmpty) draft.setValue(typed, end);
@@ -525,28 +770,77 @@ const DateTimePicker = props => {
       minute: capped % 60
     };
   }, [now, zone, minuteStep]);
+
+  // A range end picked on the start's day starts an hour after the start (at
+  // most the day's latest allowed time, or its last step), so the range isn't
+  // out of order before the user has touched the time.
+  // A time typed for the end before its day is kept as typed.
+  const endTimeFor = (from, day, typed) => {
+    if (!fixedTime && typed) return typed;
+    const time = fixedTime ?? nowTime();
+    if (!from?.time || !isSameDay(from.date, day)) return time;
+    const start = from.time.hour * 60 + from.time.minute;
+    if (time.hour * 60 + time.minute > start) return time;
+    // Within the day's allowed hours when it has them.
+    const max = constraints.timeBounds(day)?.max;
+    const last = max ? max.hour * 60 + max.minute : 24 * 60 - Math.max(1, minuteStep);
+    const end = Math.min(start + 60, last);
+    return {
+      hour: Math.floor(end / 60),
+      minute: end % 60
+    };
+  };
   const onSelectDay = useCallback(day => {
     edited.current = true;
-    if (d.mode === 'range') {
+    typedLast.current = false;
+    // A pick in the other calendar starts over: the selection is one calendar's.
+    const fresh = draftSystem !== shownSystem && valuesOf(d).some(v => v !== null);
+    setDraftSystem(shownSystem);
+    const cur = fresh ? emptied(d) : d;
+    const end0 = fresh ? 'from' : activeEnd;
+    const dayInEdit = fresh ? null : activeDay;
+    const times = fresh ? {} : pending;
+    if (fresh) {
+      draft.clear();
+      resetSelectionUi();
+    }
+    if (cur.mode === 'range') {
       if (rangeLayout === 'fromTo') {
+        setEndPicked(false);
+        // A full range: the tap starts a new one (or moves the nearest end).
+        if (!endPicked && cur.from.value && cur.to.value) {
+          const moveNearest = range?.reselect === 'moveNearestEnd';
+          const nearest = Math.abs(daysBetween(cur.from.value.date, day)) < Math.abs(daysBetween(cur.to.value.date, day)) ? 'from' : 'to';
+          const end = moveNearest ? nearest : 'from';
+          setTypingBlock('from', false);
+          setTypingBlock('to', false);
+          draft.selectDay(day, fixedTime ?? times[end] ?? nowTime());
+          setActiveEnd(moveNearest ? nearest : 'to');
+          return;
+        }
+        // Choosing the end after a start tap: a day before the start moves the start.
+        const end1 = end0 === 'to' && !endPicked && cur.from.value && compareCalendarDates(day, cur.from.value.date) < 0 ? 'from' : end0;
         // The tapped day replaces whatever was typed in this end only.
-        setTypingBlock(activeEnd, false);
-        draft.setRangeEnd(day, activeEnd, fixedTime ?? pending[activeEnd] ?? nowTime());
-        if (activeEnd === 'from') setActiveEnd('to');
+        setTypingBlock(end1, false);
+        draft.setRangeEnd(day, end1, end1 === 'to' ? endTimeFor(cur.from.value, day, times.to) : fixedTime ?? times.from ?? nowTime());
+        // The start tapped again where a range can't be one day deselects
+        // it, so the next tap picks the start again.
+        const deselects = end1 === 'to' && !sameDayRangeOk(draftOptions) && isSameDay(cur.from.value?.date, day);
+        if (end0 === 'from') setActiveEnd('to');else if (deselects) setActiveEnd('from');
         return;
       }
       // The single field: the first tap is the start, the next one the end.
-      const startsOver = !d.from.value || !!d.to.value && range?.reselect !== 'moveNearestEnd';
+      const startsOver = !cur.from.value || !!cur.to.value && range?.reselect !== 'moveNearestEnd';
       const end = startsOver ? 'from' : 'to';
       setTypingBlock('single', false);
-      draft.selectDay(day, fixedTime ?? pending[end] ?? nowTime());
+      draft.selectDay(day, end === 'to' && !cur.to.value ? endTimeFor(cur.from.value, day, times.to) : fixedTime ?? times[end] ?? nowTime());
       return;
     }
-    if (d.mode === 'multiple') {
+    if (cur.mode === 'multiple') {
       const perDate = type === 'datetime' && multipleTimeMode === 'perDate';
-      const picked = d.slots.some(slot => isSameDay(slot.value?.date, day));
+      const picked = cur.slots.some(slot => isSameDay(slot.value?.date, day));
       // perDate: a tap on a picked day first makes it the one the time row edits.
-      if (perDate && picked && !isSameDay(activeDay, day)) {
+      if (perDate && picked && !isSameDay(dayInEdit, day)) {
         setActiveDay(day);
         return;
       }
@@ -555,18 +849,28 @@ const DateTimePicker = props => {
       return;
     }
     setTypingBlock('single', false);
-    draft.selectDay(day, fixedTime ?? pending.single ?? nowTime());
-  }, [d, draft, nowTime, rangeLayout, activeEnd, activeDay, fixedTime, pending, range?.reselect, type, multipleTimeMode, setTypingBlock]);
+    draft.selectDay(day, fixedTime ?? times.single ?? nowTime());
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- valuesOf reads only `d` and props listed here
+  [d, draft, nowTime, rangeLayout, activeEnd, activeDay, fixedTime, pending, range?.reselect, type, multipleTimeMode, setTypingBlock, draftSystem, shownSystem, resetSelectionUi, endPicked, draftOptions, minuteStep, constraints]);
+
+  // The calendar gets a tap handler that never changes, so its memoized day
+  // cells don't all redraw on every tap; it calls the current one.
+  const selectDayRef = useRef(onSelectDay);
+  selectDayRef.current = onSelectDay;
+  const onSelectDayStable = useCallback(day => selectDayRef.current(day), []);
 
   // Greying that depends on what's picked: range length, From/To order, the multiple cap.
   const calendarConstraints = useMemo(() => {
     if (d.mode === 'range') {
-      const choosingEnd = rangeLayout === 'fromTo' ? activeEnd === 'to' : !!d.from.value && !d.to.value;
+      // A full From/To range greys nothing: the next tap starts a new one.
+      const choosingEnd = rangeLayout === 'fromTo' ? activeEnd === 'to' && (endPicked || !d.to.value) : !!d.from.value && !d.to.value;
       return withSelectionRules(constraints, {
         rangeStart: choosingEnd ? d.from.value?.date : null,
         minDays: range?.minDays,
         maxDays: range?.maxDays,
-        blockBeforeStart: rangeLayout === 'fromTo'
+        // Only an end chosen from the To field can't go before the start.
+        blockBeforeStart: rangeLayout === 'fromTo' && endPicked
       });
     }
     if (d.mode === 'multiple') {
@@ -577,7 +881,7 @@ const DateTimePicker = props => {
       });
     }
     return constraints;
-  }, [constraints, d, rangeLayout, activeEnd, range?.minDays, range?.maxDays, multiple?.maxSelections]);
+  }, [constraints, d, rangeLayout, activeEnd, endPicked, range?.minDays, range?.maxDays, multiple?.maxSelections]);
   const selection = draft.draft.mode === 'single' ? {
     kind: 'single',
     day: draft.draft.slot.value?.date ?? null
@@ -604,13 +908,13 @@ const DateTimePicker = props => {
     }
   }, [isOpen, constraints, today]);
   const handleVisibleMonth = useCallback((year, month) => {
-    loadHolidaysFor(year);
+    loadHolidaysAround(year, month);
     onVisibleMonthChange?.(year, month);
-  }, [loadHolidaysFor, onVisibleMonthChange]);
+  }, [loadHolidaysAround, onVisibleMonthChange]);
   useEffect(() => {
     if (!isOpen) return;
-    const anchor = selection.kind === 'single' ? selection.day : null;
-    loadHolidaysFor((anchor ?? today).year);
+    const anchor = (selection.kind === 'single' ? selection.day : null) ?? today;
+    loadHolidaysAround(anchor.year, anchor.month);
     // eslint-disable-next-line react-hooks/exhaustive-deps -- once per open
   }, [isOpen]);
 
@@ -661,17 +965,24 @@ const DateTimePicker = props => {
       return;
     }
     setTriggerError('');
-    onChange(wire);
+    // Typing keeps the calendar the saved value was picked in.
+    emitChange(wire, savedSystem);
     onBlur?.();
   };
 
+  /** A value's date in the calendar it was picked in: Hijri text, or none for the dateFormat. */
+  const dateTextFor = picked => picked === 'hijri' ? v => hijriDateText(v.date, hijriLocale) ?? formatDateText(v, dateFormat) : undefined;
+  const savedDateText = dateTextFor(savedSystem);
+  const draftDateText = dateTextFor(draftSystem);
+  const savedStrings = stringsFor(savedSystem);
+  const draftStrings = stringsFor(draftSystem);
+  // Error messages inside the picker follow the tab on screen; the on-screen
+  // field's keep `strings`.
+  const shownStrings = stringsFor(shownSystem);
+
   // What the on-screen field shows: the saved value, never the draft.
-  const savedKey = valueKey;
-  const saved = useMemo(() => createDraft(mode, value, draftOptions),
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- the value is compared by content (`savedKey`)
-  [savedKey, mode, draftOptions]);
   const savedSingle = saved.mode === 'single' ? saved.slot.value : null;
-  const savedText = saved.mode === 'range' ? formatRangeText(saved.from.value, saved.to.value, type, dateFormat, timeFormat, strings.rangeSeparator) : saved.mode === 'multiple' ? formatMultipleText(saved.slots.map(slot => slot.value), type, dateFormat, timeFormat) : precision !== 'day' ? periodText(savedSingle) : undefined;
+  const savedText = saved.mode === 'range' ? formatRangeText(saved.from.value, saved.to.value, type, dateFormat, timeFormat, strings.rangeSeparator, savedDateText, savedStrings) : saved.mode === 'multiple' ? formatMultipleText(saved.slots.map(slot => slot.value), type, dateFormat, timeFormat, savedDateText, savedStrings) : precision !== 'day' ? periodText(savedSingle) : undefined;
   const periodPlaceholder = precision === 'year' ? strings.placeholderYear : precision === 'month' ? `${strings.placeholderMonth} ${strings.placeholderYear}` : undefined;
 
   // The time a custom renderTimeRow edits, and how it sets it (the same
@@ -697,7 +1008,7 @@ const DateTimePicker = props => {
     type,
     mode,
     value,
-    displayText: savedText ?? formatValueText(savedSingle, type, dateFormat, timeFormat),
+    displayText: digitsFor(savedSystem)(savedText ?? formatValueText(savedSingle, type, dateFormat, timeFormat, savedDateText, savedStrings)),
     disabled,
     readOnly,
     isOpen,
@@ -718,11 +1029,11 @@ const DateTimePicker = props => {
   };
   const sheetValue = draft.draft.mode === 'single' ? draft.draft.slot.value : null;
   // A time outside the limits is explained under the time row, not here.
-  const sheetValueError = sheetValue && dayOff(sheetValue.date) ? strings.errorNotAllowed : '';
+  const sheetValueError = sheetValue && dayOff(sheetValue.date) ? shownStrings.errorNotAllowed : '';
   let rangeError = '';
   if (d.mode === 'range' && d.from.value && d.to.value) {
     const length = daysBetween(d.from.value.date, d.to.value.date) + 1;
-    if (constraints.dayStatus(d.from.value.date).disabled || constraints.dayStatus(d.to.value.date).disabled) rangeError = strings.errorNotAllowed;else if (previewIssue === 'RANGE_ORDER') rangeError = strings.errorRangeOrder;else if (previewIssue === 'RANGE_LENGTH') rangeError = range?.minDays !== undefined && length < range.minDays ? strings.errorRangeTooShort(range.minDays) : strings.errorRangeTooLong(range?.maxDays ?? length);
+    if (constraints.dayStatus(d.from.value.date).disabled || constraints.dayStatus(d.to.value.date).disabled) rangeError = shownStrings.errorNotAllowed;else if (previewIssue === 'RANGE_ORDER') rangeError = shownStrings.errorRangeOrder;else if (previewIssue === 'RANGE_LENGTH') rangeError = range?.minDays !== undefined && length < range.minDays ? shownStrings.errorRangeTooShort(range.minDays) : shownStrings.errorRangeTooLong(range?.maxDays ?? length);
   }
   const fieldCommon = {
     type,
@@ -738,8 +1049,11 @@ const DateTimePicker = props => {
   };
   const trigger = !showField || isInline ? null : renderField ? renderField(state) : /*#__PURE__*/_jsx(ValueField, {
     ...fieldCommon,
+    strings: savedStrings,
+    errorStrings: strings,
     value: savedSingle,
     displayText: savedText,
+    dateText: savedDateText,
     allowTyping: mode === 'single' && precision === 'day' && allowFieldTyping,
     onTypingDone: onTriggerTyped,
     onTyped: () => setTriggerError(''),
@@ -769,8 +1083,11 @@ const DateTimePicker = props => {
     testID: testID ? `${testID}-value` : undefined
   }) : mode === 'single' ? /*#__PURE__*/_jsx(ValueField, {
     ...fieldCommon,
+    strings: draftStrings,
+    errorStrings: shownStrings,
     value: sheetValue,
     displayText: precision !== 'day' ? periodText(sheetValue) : undefined,
+    dateText: draftDateText,
     placeholder: sheetOptions?.fieldPlaceholder ?? periodPlaceholder,
     allowTyping: allowTyping && precision === 'day',
     onTyped: onSheetTyped,
@@ -783,13 +1100,16 @@ const DateTimePicker = props => {
     testID: testID ? `${testID}-value` : undefined
   }) : d.mode === 'range' ? /*#__PURE__*/_jsx(RangeFields, {
     ...fieldCommon,
+    strings: draftStrings,
+    errorStrings: shownStrings,
     layout: rangeLayout,
+    dateText: draftDateText,
     showIcon: sheetOptions?.fieldIcon,
     from: d.from.value,
     to: d.to.value,
     placeholder: sheetOptions?.fieldPlaceholder,
     activeEnd: activeEnd,
-    onActivate: setActiveEnd,
+    onActivate: activateEnd,
     allowTyping: allowTyping,
     onTyped: onRangeTyped,
     onFocusChange: (end, f) => reportFocus(`value-${end}`, f),
@@ -800,8 +1120,9 @@ const DateTimePicker = props => {
     testID: testID
   }) : d.mode === 'multiple' ? /*#__PURE__*/_jsx(ValueField, {
     ...fieldCommon,
+    strings: draftStrings,
     value: null,
-    displayText: formatMultipleText(draftValues, type, dateFormat, timeFormat),
+    displayText: formatMultipleText(draftValues, type, dateFormat, timeFormat, draftDateText, draftStrings),
     placeholder: sheetOptions?.fieldPlaceholder,
     allowClear: allowClear,
     onClear: clearInSheet,
@@ -810,37 +1131,102 @@ const DateTimePicker = props => {
     active: true,
     testID: testID ? `${testID}-value` : undefined
   }) : null;
-  const calendar = folded ? null : /*#__PURE__*/_jsx(Calendar, {
-    constraints: calendarConstraints,
-    today: today,
-    initialVisibleDate: initialVisibleDate,
-    selection: selection,
-    onSelectDay: onSelectDay,
-    firstDayOfWeek: firstDayOfWeek,
-    showOutsideDays: showOutsideDays,
-    showHolidays: showHolidays,
-    yearRange: yearRange,
-    locale: loc
-    // Month and year picks are Gregorian whatever the calendar system.
-    ,
-    calendarSystem: precision === 'day' ? resolveCalendarSystem(calendarSystem) : 'gregory',
-    initialView: initialView,
-    precision: precision,
-    enableMonthSwipe: enableMonthSwipe,
-    showToday: showToday,
-    onVisibleMonthChange: handleVisibleMonth,
-    renderDay: renderDay,
-    renderWeekday: renderWeekday,
-    renderMonthChip: renderMonthChip,
-    renderYearCell: renderYearCell,
-    renderMonthCell: renderMonthCell,
-    renderEmptyState: renderEmptyState,
-    icons: icons,
-    iconProps: iconProps,
+  const systemLabels = {
+    gregory: strings.calendarGregorian ?? DEFAULT_STRINGS.calendarGregorian,
+    hijri: strings.calendarHijri ?? DEFAULT_STRINGS.calendarHijri,
+    dual: strings.calendarDual ?? DEFAULT_STRINGS.calendarDual
+  };
+  const systemA11yLabel = strings.a11yCalendarSystem ?? DEFAULT_STRINGS.a11yCalendarSystem;
+  const chooseSystem = next => {
+    if (next === system) return;
+    setChosenSystem(next);
+    if (next === 'dual') setDualTab(dualDefaultTab);
+    echo.current = next;
+    onCalendarSystemChange?.(next);
+  };
+  const calendarSwitchNode = !switchSystems ? null : renderCalendarSwitch ? renderCalendarSwitch({
+    systems: switchSystems,
+    selected: system,
+    onSelect: chooseSystem,
+    tokens,
+    strings
+  }) : /*#__PURE__*/_jsx(CalendarSwitch, {
+    variant: "switch",
+    options: switchSystems.map(v => {
+      return {
+        value: v,
+        label: systemLabels[v]
+      };
+    }),
+    selected: system,
+    onSelect: chooseSystem,
+    accessibilityLabel: systemA11yLabel,
     tokens: tokens,
     styles: styles,
-    strings: strings,
-    testID: testID
+    testID: testID ? `${testID}-calendar-switch` : undefined
+  });
+  const dualTabs = system !== 'dual' ? null : /*#__PURE__*/_jsx(CalendarSwitch, {
+    variant: "tabs",
+    options: [{
+      value: 'gregory',
+      label: systemLabels.gregory
+    }, {
+      value: 'hijri',
+      label: systemLabels.hijri
+    }],
+    selected: dualTab,
+    onSelect: setDualTab,
+    accessibilityLabel: systemA11yLabel,
+    tokens: tokens,
+    styles: styles,
+    testID: testID ? `${testID}-dual-tabs` : undefined
+  });
+  // The Hijri tab lays out its calendar and time rows right to left; the
+  // wrapper always renders, so a tab change doesn't remount the time boxes.
+  const hijriShown = shownSystem === 'hijri';
+  const mirrored = node => node == null ? null : /*#__PURE__*/_jsx(RtlContext.Provider, {
+    value: hijriShown || null,
+    children: /*#__PURE__*/_jsx(View, {
+      style: hijriShown ? RTL : undefined,
+      children: node
+    })
+  });
+  // Another calendar opens on the days the last one showed, else on the
+  // selection (shown or not), else where the picker would open.
+  const calendarAnchor = shownAnchor.current ?? (selectionShown ? null : firstSelectedDay(selection)) ?? initialVisibleDate;
+  const calendar = /*#__PURE__*/_jsxs(View, {
+    style: folded ? FOLDED : undefined,
+    children: [calendarSwitchNode, dualTabs, mirrored(/*#__PURE__*/_jsx(Calendar, {
+      constraints: selectionShown ? calendarConstraints : constraints,
+      today: today,
+      initialVisibleDate: calendarAnchor,
+      selection: selectionShown ? selection : emptySelection(selection),
+      onSelectDay: onSelectDayStable,
+      firstDayOfWeek: firstDayOfWeek,
+      showOutsideDays: showOutsideDays,
+      showHolidays: showHolidays,
+      yearRange: yearRange,
+      locale: shownSystem === 'hijri' ? hijriLocale : loc,
+      calendarSystem: shownSystem,
+      initialView: initialView,
+      precision: precision,
+      enableMonthSwipe: enableMonthSwipe,
+      showToday: showToday,
+      onVisibleMonthChange: handleVisibleMonth,
+      onAnchorChange: rememberAnchor,
+      renderDay: renderDay,
+      renderWeekday: renderWeekday,
+      renderMonthChip: renderMonthChip,
+      renderYearCell: renderYearCell,
+      renderMonthCell: renderMonthCell,
+      renderEmptyState: renderEmptyState,
+      icons: icons,
+      iconProps: iconProps,
+      tokens: tokens,
+      styles: styles,
+      strings: stringsFor(shownSystem),
+      testID: testID
+    }, shownSystem))]
   });
   const timeRow = type !== 'datetime' ? null : renderTimeRow ? renderTimeRow(state) : /*#__PURE__*/_jsx(TimeRows, {
     draft: d,
@@ -867,14 +1253,26 @@ const DateTimePicker = props => {
     onPendingChange: onRowPending,
     tokens: tokens,
     styles: styles,
-    strings: strings,
+    strings: stringsFor(shownSystem),
     testID: testID
   });
 
   // Shown while the selection is still the one it was given for.
   const validationMessage = validation && (validation.key === JSON.stringify(draft.toWire()) || validation.key === JSON.stringify(draftToWire(preview, draftOptions))) ? validation.message : null;
+
+  // The field writes the date in the digits of the calendar it was picked in;
+  // the calendar and the time rows follow the tab that shows.
   const sheetContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [sheetField, calendar, timeRow, validationMessage ? /*#__PURE__*/_jsx(FieldMessages, {
+    children: [/*#__PURE__*/_jsx(NumeralsContext.Provider, {
+      value: digitsFor(draftSystem),
+      children: sheetField
+    }), /*#__PURE__*/_jsx(NumeralsContext.Provider, {
+      value: digitsFor(shownSystem),
+      children: calendar
+    }), /*#__PURE__*/_jsx(NumeralsContext.Provider, {
+      value: digitsFor(shownSystem),
+      children: mirrored(timeRow)
+    }), validationMessage ? /*#__PURE__*/_jsx(FieldMessages, {
       error: validationMessage,
       tokens: tokens,
       styles: {
@@ -884,7 +1282,8 @@ const DateTimePicker = props => {
       testID: testID ? `${testID}-validation` : undefined
     }) : null]
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs(NumeralsContext.Provider, {
+    value: digitsFor(savedSystem),
     children: [trigger, /*#__PURE__*/_jsx(PickerContainer, {
       presentation: presentation,
       isOpen: isOpen,