rn-grid-date-time-picker 1.2.2 → 1.3.1

package/lib/module/components/DateTimePicker.js

@@ -6,7 +6,7 @@ import { View } from 'react-native';
 import { resolveAdapter } from "../adapters/index.js";
 import { compareCalendarDates, daysBetween, isSameDay } from "../core/calendarDate.js";
 import { createConstraints } from "../core/constraints.js";
-import { clearDraft as emptied, createDraft, DEFAULT_TIME, draftToWire, sameDayRangeOk, setTime as applyTime, validateDraft } from "../core/draft.js";
+import { 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";
@@ -17,7 +17,6 @@ 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 { formatDateText, formatMultipleText, formatRangeText, formatValueText } from "./field/fieldText.js";
 import FieldMessages from "./field/FieldMessages.js";
@@ -25,6 +24,7 @@ import RangeFields from "./field/RangeFields.js";
 import ValueField from "./field/ValueField.js";
 import { useKeyboardFold } from "./hooks/useKeyboardFold.js";
 import { useOpenPicker } from "./hooks/useOpenPicker.js";
+import { useScrollToTime } from "./hooks/useScrollToTime.js";
 import { usePickerDraft } from "./hooks/usePickerDraft.js";
 import { useTodayTick } from "./hooks/useTodayTick.js";
 import TimeRows from "./time/TimeRows.js";
@@ -40,19 +40,6 @@ 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];
 
@@ -89,6 +76,7 @@ const DateTimePicker = props => {
     multiple,
     range,
     presentation = 'sheet',
+    scrollToTimeRef,
     visible,
     onOpen,
     onClose,
@@ -139,6 +127,7 @@ const DateTimePicker = props => {
     calendarSwitch,
     onCalendarSystemChange,
     dualDefaultTab = 'gregory',
+    fieldCalendar = 'picked',
     hijriLocale = 'ar-SA',
     renderCalendarSwitch,
     showToday = false,
@@ -329,12 +318,13 @@ const DateTimePicker = props => {
   const folded = keyboardUp && (!isInline || ownFocus);
   const rangeLayout = range?.layout ?? 'singleField';
   const multipleTimeMode = multiple?.timeMode ?? 'shared';
+  const startsEmpty = newDayTime === 'empty';
   const draftOptions = useMemo(() => {
     return {
       type,
       zone,
       adapter,
-      defaultTime: DEFAULT_TIME,
+      defaultTime: startsEmpty ? null : DEFAULT_TIME,
       multiple: {
         timeMode: multiple?.timeMode,
         maxSelections: multiple?.maxSelections
@@ -346,7 +336,7 @@ const DateTimePicker = props => {
         maxDays: range?.maxDays
       }
     };
-  }, [type, zone, adapter, multiple?.timeMode, multiple?.maxSelections, range?.allowSameDay, range?.reselect, range?.minDays, range?.maxDays]);
+  }, [type, zone, adapter, startsEmpty, multiple?.timeMode, multiple?.maxSelections, range?.allowSameDay, range?.reselect, range?.minDays, range?.maxDays]);
   const draft = usePickerDraft(mode, value, isOpen, draftOptions);
   const today = useTodayTick(zone, now);
 
@@ -521,6 +511,15 @@ const DateTimePicker = props => {
   const preview = useMemo(() => Object.values(rowPending).reduce((acc, p) => p ? applyTime(acc, p.time, p.target) : acc, draft.draft), [draft.draft, rowPending]);
   const previewIssue = validateDraft(preview, draftOptions);
   const d = draft.draft;
+  // Once a calendar tap picks the date (both ends of a range), the sheet (or
+  // the app's ScrollView around an inline picker) scrolls the time section
+  // into view.
+  const datePicked = d.mode === 'single' ? !!d.slot.value : d.mode === 'range' ? !!d.from.value && !!d.to.value : d.slots.length > 0;
+  const {
+    scrollRef,
+    timeRef,
+    request: revealTime
+  } = useScrollToTime(type !== 'datetime' ? false : isInline ? !!scrollToTimeRef : sheetOptions?.scrollToTime ?? true, datePicked, isInline ? scrollToTimeRef : undefined);
   /** The values a draft would save, with a shared time applied. */
   const valuesOf = dr => {
     if (dr.mode === 'single') return [dr.slot.value];
@@ -557,10 +556,10 @@ 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.
+  // A selection shows in both tabs (Gregorian and Hijri). It is saved with the
+  // calendar on screen, and the on-screen 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),
@@ -571,32 +570,12 @@ const DateTimePicker = props => {
   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;
+  const hasSaved = valuesOf(saved).some(v => v !== null);
+  // Each open starts on the tab the saved value was saved with; with no value,
+  // on dualDefaultTab.
+  useEffect(() => setDualTab(hasSaved ? savedSystem : dualDefaultTab),
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- on open and on a new dualDefaultTab, not on every save
+  [isOpen, dualDefaultTab]);
   /** Saves a value: with the calendar it was picked in, when one can be Hijri. */
   const emitChange = useCallback((wire, picked) => {
     savedSystemRef.current = {
@@ -620,11 +599,12 @@ const DateTimePicker = props => {
     bounds: constraints.timeBounds(v.date)
   }) === null)) && !typingBlocked && !wheelSpinning && !confirmDisabled;
 
-  // Every save: Confirm, an 'instant' edit (onConfirm is added by `confirm`).
+  // Every save: Confirm, an 'instant' edit (onConfirm is added by `confirm`),
+  // with the calendar on screen.
   const commit = useCallback(wire => {
-    emitChange(wire, draftSystem);
+    emitChange(wire, shownSystem);
     onBlur?.();
-  }, [emitChange, draftSystem, onBlur]);
+  }, [emitChange, shownSystem, onBlur]);
   const confirm = useCallback(() => {
     if (!canConfirm) return;
     const {
@@ -656,8 +636,8 @@ const DateTimePicker = props => {
     draft.clear();
     resetSelectionUi();
     edited.current = false;
-    emitChange('', draftSystem);
-  }, [draft, emitChange, draftSystem, resetSelectionUi]);
+    emitChange('', shownSystem);
+  }, [draft, emitChange, shownSystem, resetSelectionUi]);
   const clearDraft = useCallback(() => {
     edited.current = true;
     draft.clear();
@@ -666,7 +646,6 @@ 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' && hasSaved) clearValue();else clearDraft();
   }, [commitMode, hasSaved, clearValue, clearDraft]);
@@ -678,7 +657,8 @@ const DateTimePicker = props => {
   // Confirm press, but only while open (closing discards, as with Confirm),
   // and only what the draft holds: a time still being typed isn't saved yet.
   // An edit equal to the saved value isn't saved again; one `validate`
-  // rejected waits until the selection or the saved value changes.
+  // rejected waits until the selection or the saved value changes. A tab
+  // change the user makes saves the selection again with the new calendar.
   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.
@@ -696,11 +676,12 @@ const DateTimePicker = props => {
     if (!typingDone || timeIssue || !canSave(draft.draft)) return;
     const wire = draft.toWire();
     const key = JSON.stringify(wire);
-    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 sent = `${shownSystem} ${key}`;
+    if (key === lastRejected.current || sent === lastEmitted.current) return;
+    // The same dates in the same calendar aren't saved again; the same dates
+    // with the other tab on screen are.
     const unchanged = key === valueKey || contentOf(draft.draft) === savedContent;
-    if (unchanged && draftSystem === savedSystem) return;
+    if (unchanged && shownSystem === savedSystem) return;
     const message = latest.current.validate?.(wire);
     if (message) {
       lastRejected.current = key;
@@ -711,14 +692,14 @@ const DateTimePicker = props => {
       latest.current.onError?.('VALIDATION', wire);
       return;
     }
-    lastEmitted.current = key;
+    lastEmitted.current = sent;
     commit(wire);
   };
   // 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]);
+  [commitMode, isOpen, sheetTyping, draft.draft, shownSystem, 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);
@@ -729,21 +710,14 @@ const DateTimePicker = props => {
   }, [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.
+  // newDayTime, else a time already typed in the time row, else now (or none).
   const withFilledTime = (parsed, key) => parsed.value ?? (parsed.dateOnly ? {
     date: parsed.dateOnly,
-    time: fixedTime ?? pending[key] ?? nowTime()
+    time: fixedTime ?? pending[key] ?? newTime()
   } : 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();
@@ -751,14 +725,13 @@ const DateTimePicker = props => {
   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);
   };
 
   // A fixed time for every newly picked day (wins over a typed time and over "now").
-  const fixedTime = newDayTime ?? null;
+  const fixedTime = typeof newDayTime === 'object' ? newDayTime : null;
 
   // A day picked on an empty date-time starts at the current time, moved up to
   // the next allowed minute step. An existing time is kept.
@@ -772,6 +745,8 @@ const DateTimePicker = props => {
       minute: capped % 60
     };
   }, [now, zone, minuteStep]);
+  /** A new day's time when nothing fixed or typed: now, or none with newDayTime 'empty'. */
+  const newTime = useCallback(() => startsEmpty ? null : nowTime(), [startsEmpty, nowTime]);
 
   // 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
@@ -779,8 +754,8 @@ const DateTimePicker = props => {
   // 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 time = fixedTime ?? newTime();
+    if (!time || !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.
@@ -795,66 +770,57 @@ const DateTimePicker = props => {
   const onSelectDay = useCallback(day => {
     edited.current = true;
     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') {
+    // A multiple picker scrolls for its first date only, so more can be picked.
+    if (d.mode !== 'multiple' || d.slots.length === 0) revealTime();
+    if (d.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) {
+        if (!endPicked && d.from.value && d.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 nearest = Math.abs(daysBetween(d.from.value.date, day)) < Math.abs(daysBetween(d.to.value.date, day)) ? 'from' : 'to';
           const end = moveNearest ? nearest : 'from';
           setTypingBlock('from', false);
           setTypingBlock('to', false);
-          draft.selectDay(day, fixedTime ?? times[end] ?? nowTime());
+          draft.selectDay(day, fixedTime ?? pending[end] ?? newTime());
           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;
+        const end1 = activeEnd === 'to' && !endPicked && d.from.value && compareCalendarDates(day, d.from.value.date) < 0 ? 'from' : activeEnd;
         // The tapped day replaces whatever was typed in this end only.
         setTypingBlock(end1, false);
-        draft.setRangeEnd(day, end1, end1 === 'to' ? endTimeFor(cur.from.value, day, times.to) : fixedTime ?? times.from ?? nowTime());
+        draft.setRangeEnd(day, end1, end1 === 'to' ? endTimeFor(d.from.value, day, pending.to) : fixedTime ?? pending.from ?? newTime());
         // 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');
+        const deselects = end1 === 'to' && !sameDayRangeOk(draftOptions) && isSameDay(d.from.value?.date, day);
+        if (activeEnd === '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 = !cur.from.value || !!cur.to.value && range?.reselect !== 'moveNearestEnd';
+      const startsOver = !d.from.value || !!d.to.value && range?.reselect !== 'moveNearestEnd';
       const end = startsOver ? 'from' : 'to';
       setTypingBlock('single', false);
-      draft.selectDay(day, end === 'to' && !cur.to.value ? endTimeFor(cur.from.value, day, times.to) : fixedTime ?? times[end] ?? nowTime());
+      draft.selectDay(day, end === 'to' && !d.to.value ? endTimeFor(d.from.value, day, pending.to) : fixedTime ?? pending[end] ?? newTime());
       return;
     }
-    if (cur.mode === 'multiple') {
+    if (d.mode === 'multiple') {
       const perDate = type === 'datetime' && multipleTimeMode === 'perDate';
-      const picked = cur.slots.some(slot => isSameDay(slot.value?.date, day));
+      const picked = d.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(dayInEdit, day)) {
+      if (perDate && picked && !isSameDay(activeDay, day)) {
         setActiveDay(day);
         return;
       }
-      draft.selectDay(day, fixedTime ?? nowTime());
+      draft.selectDay(day, fixedTime ?? newTime());
       if (perDate) setActiveDay(picked ? null : day);
       return;
     }
     setTypingBlock('single', false);
-    draft.selectDay(day, fixedTime ?? times.single ?? nowTime());
+    draft.selectDay(day, fixedTime ?? pending.single ?? newTime());
   },
   // 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]);
+  [d, draft, newTime, rangeLayout, activeEnd, activeDay, fixedTime, pending, range?.reselect, type, multipleTimeMode, setTypingBlock, endPicked, draftOptions, minuteStep, constraints, revealTime]);
 
   // 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.
@@ -974,12 +940,13 @@ const DateTimePicker = props => {
 
   /** 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`.
+  // The calendar the on-screen field writes the saved value in.
+  const fieldSystem = fieldCalendar === 'gregory' ? 'gregory' : savedSystem;
+  const savedDateText = dateTextFor(fieldSystem);
+  const draftDateText = dateTextFor(shownSystem);
+  const savedStrings = stringsFor(fieldSystem);
+  // The texts inside the picker, its error messages too, 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.
@@ -1010,7 +977,7 @@ const DateTimePicker = props => {
     type,
     mode,
     value,
-    displayText: digitsFor(savedSystem)(savedText ?? formatValueText(savedSingle, type, dateFormat, timeFormat, savedDateText, savedStrings)),
+    displayText: digitsFor(fieldSystem)(savedText ?? formatValueText(savedSingle, type, dateFormat, timeFormat, savedDateText, savedStrings)),
     disabled,
     readOnly,
     isOpen,
@@ -1031,11 +998,12 @@ 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) ? shownStrings.errorNotAllowed : '';
+  const notAllowedError = sheetOptions?.showNotAllowedError === false ? '' : shownStrings.errorNotAllowed;
+  const sheetValueError = sheetValue && dayOff(sheetValue.date) ? notAllowedError : '';
   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 = 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);
+    if (constraints.dayStatus(d.from.value.date).disabled || constraints.dayStatus(d.to.value.date).disabled) rangeError = notAllowedError;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,
@@ -1085,7 +1053,7 @@ const DateTimePicker = props => {
     testID: testID ? `${testID}-value` : undefined
   }) : mode === 'single' ? /*#__PURE__*/_jsx(ValueField, {
     ...fieldCommon,
-    strings: draftStrings,
+    strings: shownStrings,
     errorStrings: shownStrings,
     value: sheetValue,
     displayText: precision !== 'day' ? periodText(sheetValue) : undefined,
@@ -1102,7 +1070,7 @@ const DateTimePicker = props => {
     testID: testID ? `${testID}-value` : undefined
   }) : d.mode === 'range' ? /*#__PURE__*/_jsx(RangeFields, {
     ...fieldCommon,
-    strings: draftStrings,
+    strings: shownStrings,
     errorStrings: shownStrings,
     layout: rangeLayout,
     dateText: draftDateText,
@@ -1122,9 +1090,9 @@ const DateTimePicker = props => {
     testID: testID
   }) : d.mode === 'multiple' ? /*#__PURE__*/_jsx(ValueField, {
     ...fieldCommon,
-    strings: draftStrings,
+    strings: shownStrings,
     value: null,
-    displayText: formatMultipleText(draftValues, type, dateFormat, timeFormat, draftDateText, draftStrings),
+    displayText: formatMultipleText(draftValues, type, dateFormat, timeFormat, draftDateText, shownStrings),
     placeholder: sheetOptions?.fieldPlaceholder,
     allowClear: allowClear,
     onClear: clearInSheet,
@@ -1139,13 +1107,20 @@ const DateTimePicker = props => {
     dual: strings.calendarDual ?? DEFAULT_STRINGS.calendarDual
   };
   const systemA11yLabel = strings.a11yCalendarSystem ?? DEFAULT_STRINGS.a11yCalendarSystem;
+  // A calendar or tab the user picks is an edit: 'instant' saves the selection
+  // again with that calendar.
   const chooseSystem = next => {
     if (next === system) return;
+    edited.current = true;
     setChosenSystem(next);
     if (next === 'dual') setDualTab(dualDefaultTab);
     echo.current = next;
     onCalendarSystemChange?.(next);
   };
+  const chooseTab = next => {
+    edited.current = true;
+    setDualTab(next);
+  };
   const calendarSwitchNode = !switchSystems ? null : renderCalendarSwitch ? renderCalendarSwitch({
     systems: switchSystems,
     selected: system,
@@ -1177,7 +1152,7 @@ const DateTimePicker = props => {
       label: systemLabels.hijri
     }],
     selected: dualTab,
-    onSelect: setDualTab,
+    onSelect: chooseTab,
     accessibilityLabel: systemA11yLabel,
     tokens: tokens,
     styles: styles,
@@ -1193,16 +1168,16 @@ const DateTimePicker = props => {
       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;
+  // Another calendar opens on the days the last one showed, else where the
+  // picker would open.
+  const calendarAnchor = shownAnchor.current ?? initialVisibleDate;
   const calendar = /*#__PURE__*/_jsxs(View, {
     style: folded ? FOLDED : undefined,
     children: [calendarSwitchNode, dualTabs, mirrored(/*#__PURE__*/_jsx(Calendar, {
-      constraints: selectionShown ? calendarConstraints : constraints,
+      constraints: calendarConstraints,
       today: today,
       initialVisibleDate: calendarAnchor,
-      selection: selectionShown ? selection : emptySelection(selection),
+      selection: selection,
       onSelectDay: onSelectDayStable,
       firstDayOfWeek: firstDayOfWeek,
       showOutsideDays: showOutsideDays,
@@ -1265,18 +1240,22 @@ const DateTimePicker = props => {
   // 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.
+  // The field, the calendar and the time rows follow the tab that shows.
   const sheetContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(NumeralsContext.Provider, {
-      value: digitsFor(draftSystem),
-      children: sheetField
-    }), /*#__PURE__*/_jsx(NumeralsContext.Provider, {
-      value: digitsFor(shownSystem),
-      children: calendar
-    }), /*#__PURE__*/_jsx(NumeralsContext.Provider, {
+    children: [/*#__PURE__*/_jsxs(NumeralsContext.Provider, {
       value: digitsFor(shownSystem),
-      children: mirrored(timeRow)
+      children: [sheetField, calendar]
+    }), timeRow == null ? null :
+    /*#__PURE__*/
+    // Measured for the scroll to the time (sheet.scrollToTime).
+    _jsx(View, {
+      ref: timeRef,
+      collapsable: false,
+      testID: testID ? `${testID}-time-section` : undefined,
+      children: /*#__PURE__*/_jsx(NumeralsContext.Provider, {
+        value: digitsFor(shownSystem),
+        children: mirrored(timeRow)
+      })
     }), validationMessage ? /*#__PURE__*/_jsx(FieldMessages, {
       error: validationMessage,
       tokens: tokens,
@@ -1288,13 +1267,14 @@ const DateTimePicker = props => {
     }) : null]
   });
   return /*#__PURE__*/_jsxs(NumeralsContext.Provider, {
-    value: digitsFor(savedSystem),
+    value: digitsFor(fieldSystem),
     children: [trigger, /*#__PURE__*/_jsx(PickerContainer, {
       presentation: presentation,
       isOpen: isOpen,
       onRequestClose: close,
       renderSheet: renderSheet,
       sheet: sheetOptions,
+      scrollRef: scrollRef,
       state: state,
       header: header,
       title: title ?? (isInline ? undefined : strings.titleDate),