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

package/src/components/DateTimePicker.tsx

@@ -15,7 +15,6 @@ import {
 } from '../core/calendarDate';
 import { createConstraints } from '../core/constraints';
 import {
-  clearDraft as emptied,
   createDraft,
   DEFAULT_TIME,
   draftToWire,
@@ -56,7 +55,7 @@ import CalendarSwitch from './calendar/CalendarSwitch';
 import { localeNames } from './calendar/localeNames';
 import { RtlContext } from './theme/direction';
 import { NumeralsContext } from './theme/numerals';
-import { firstSelectedDay, type CalendarSelection } from './calendar/selection';
+import type { CalendarSelection } from './calendar/selection';
 import PickerContainer from './container/PickerContainer';
 import {
   formatDateText,
@@ -70,6 +69,7 @@ import RangeFields, { type RangeEnd } from './field/RangeFields';
 import ValueField from './field/ValueField';
 import { useKeyboardFold } from './hooks/useKeyboardFold';
 import { useOpenPicker } from './hooks/useOpenPicker';
+import { useScrollToTime } from './hooks/useScrollToTime';
 import { usePickerDraft } from './hooks/usePickerDraft';
 import { useTodayTick } from './hooks/useTodayTick';
 import TimeRows, { type PendingTimes } from './time/TimeRows';
@@ -94,14 +94,6 @@ const sameValue = (a: DateTimeValue, b: DateTimeValue): boolean =>
 const ALL_SYSTEMS: CalendarSystem[] = ['gregory', 'hijri', 'dual'];
 const RTL = { direction: 'rtl' } as const;
 
-/** The same kind of selection with nothing in it. */
-const emptySelection = (sel: CalendarSelection): CalendarSelection =>
-  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];
 
@@ -138,6 +130,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     multiple,
     range,
     presentation = 'sheet',
+    scrollToTimeRef,
     visible,
     onOpen,
     onClose,
@@ -188,6 +181,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     calendarSwitch,
     onCalendarSystemChange,
     dualDefaultTab = 'gregory',
+    fieldCalendar = 'picked',
     hijriLocale = 'ar-SA',
     renderCalendarSwitch,
     showToday = false,
@@ -432,12 +426,13 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
 
   const rangeLayout = range?.layout ?? 'singleField';
   const multipleTimeMode = multiple?.timeMode ?? 'shared';
+  const startsEmpty = newDayTime === 'empty';
   const draftOptions = useMemo((): DraftOptions => {
     return {
       type,
       zone,
       adapter,
-      defaultTime: DEFAULT_TIME,
+      defaultTime: startsEmpty ? null : DEFAULT_TIME,
       multiple: {
         timeMode: multiple?.timeMode,
         maxSelections: multiple?.maxSelections,
@@ -453,6 +448,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     type,
     zone,
     adapter,
+    startsEmpty,
     multiple?.timeMode,
     multiple?.maxSelections,
     range?.allowSameDay,
@@ -672,6 +668,28 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
   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: Draft): (DateTimeValue | null)[] => {
     if (dr.mode === 'single') return [dr.slot.value];
@@ -714,10 +732,10 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
   latest.current = { validate, onError, value };
   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(
@@ -736,27 +754,14 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     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: PickerValue, picked: 'gregory' | 'hijri') => {
@@ -794,13 +799,14 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     !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: PickerValue) => {
-      emitChange(wire, draftSystem);
+      emitChange(wire, shownSystem);
       onBlur?.();
     },
-    [emitChange, draftSystem, onBlur]
+    [emitChange, shownSystem, onBlur]
   );
 
   const confirm = useCallback(() => {
@@ -838,8 +844,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (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;
@@ -849,7 +855,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (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();
@@ -862,7 +867,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (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<string | null>(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.
@@ -884,12 +890,13 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (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;
@@ -897,7 +904,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (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.
@@ -910,7 +917,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       isOpen,
       sheetTyping,
       draft.draft,
-      draftSystem,
+      shownSystem,
       timeIssue,
       typingBlocked,
       wheelSpinning,
@@ -928,7 +935,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (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: ParsedSegments,
     key: 'single' | RangeEnd
@@ -937,20 +944,13 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     (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: ParsedSegments) => {
     edited.current = true;
     typedLast.current = true;
-    adoptShownIfEmpty();
     const typed = withFilledTime(parsed, 'single');
     setTypingBlock('single', !parsed.isEmpty && !typed);
     if (typed) draft.setValue(typed, 'single');
@@ -960,14 +960,13 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
   const onRangeTyped = (end: RangeEnd, parsed: ParsedSegments) => {
     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.
@@ -978,6 +977,11 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     const capped = Math.min(minutes, 23 * 60 + 60 - step);
     return { hour: Math.floor(capped / 60), 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(
+    (): Time | null => (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
@@ -987,10 +991,10 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     from: DateTimeValue | null,
     day: CalendarDate,
     typed: Time | null | undefined
-  ): Time => {
+  ): Time | null => {
     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.
@@ -1006,99 +1010,87 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     (day: CalendarDate) => {
       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: RangeEnd = fresh ? 'from' : activeEnd;
-      const dayInEdit = fresh ? null : activeDay;
-      const times: PendingTimes = 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: RangeEnd =
-              Math.abs(daysBetween(cur.from.value.date, day)) <
-              Math.abs(daysBetween(cur.to.value.date, day))
+              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: RangeEnd =
-            end0 === 'to' &&
+            activeEnd === 'to' &&
             !endPicked &&
-            cur.from.value &&
-            compareCalendarDates(day, cur.from.value.date) < 0
+            d.from.value &&
+            compareCalendarDates(day, d.from.value.date) < 0
               ? 'from'
-              : end0;
+              : 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())
+              ? 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');
+            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');
+          !d.from.value ||
+          (!!d.to.value && range?.reselect !== 'moveNearestEnd');
         const end: RangeEnd = 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())
+          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,
+      newTime,
       rangeLayout,
       activeEnd,
       activeDay,
@@ -1108,13 +1100,11 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       type,
       multipleTimeMode,
       setTypingBlock,
-      draftSystem,
-      shownSystem,
-      resetSelectionUi,
       endPicked,
       draftOptions,
       minuteStep,
       constraints,
+      revealTime,
     ]
   );
 
@@ -1271,12 +1261,13 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       ? (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.
@@ -1353,7 +1344,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     type,
     mode,
     value,
-    displayText: digitsFor(savedSystem)(
+    displayText: digitsFor(fieldSystem)(
       savedText ??
         formatValueText(
           savedSingle,
@@ -1388,8 +1379,12 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (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 notAllowedError =
+    sheetOptions?.showNotAllowedError === false
+      ? ''
+      : shownStrings.errorNotAllowed;
   const sheetValueError =
-    sheetValue && dayOff(sheetValue.date) ? shownStrings.errorNotAllowed : '';
+    sheetValue && dayOff(sheetValue.date) ? notAllowedError : '';
 
   let rangeError = '';
   if (d.mode === 'range' && d.from.value && d.to.value) {
@@ -1398,7 +1393,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       constraints.dayStatus(d.from.value.date).disabled ||
       constraints.dayStatus(d.to.value.date).disabled
     )
-      rangeError = shownStrings.errorNotAllowed;
+      rangeError = notAllowedError;
     else if (previewIssue === 'RANGE_ORDER')
       rangeError = shownStrings.errorRangeOrder;
     else if (previewIssue === 'RANGE_LENGTH')
@@ -1473,7 +1468,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     ) : mode === 'single' ? (
       <ValueField
         {...fieldCommon}
-        strings={draftStrings}
+        strings={shownStrings}
         errorStrings={shownStrings}
         value={sheetValue}
         displayText={precision !== 'day' ? periodText(sheetValue) : undefined}
@@ -1492,7 +1487,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     ) : d.mode === 'range' ? (
       <RangeFields
         {...fieldCommon}
-        strings={draftStrings}
+        strings={shownStrings}
         errorStrings={shownStrings}
         layout={rangeLayout}
         dateText={draftDateText}
@@ -1514,7 +1509,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     ) : d.mode === 'multiple' ? (
       <ValueField
         {...fieldCommon}
-        strings={draftStrings}
+        strings={shownStrings}
         value={null}
         displayText={formatMultipleText(
           draftValues,
@@ -1522,7 +1517,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
           dateFormat,
           timeFormat,
           draftDateText,
-          draftStrings
+          shownStrings
         )}
         placeholder={sheetOptions?.fieldPlaceholder}
         allowClear={allowClear}
@@ -1541,13 +1536,20 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
   };
   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: CalendarSystem) => {
     if (next === system) return;
+    edited.current = true;
     setChosenSystem(next);
     if (next === 'dual') setDualTab(dualDefaultTab);
     echo.current = next;
     onCalendarSystemChange?.(next);
   };
+  const chooseTab = (next: 'gregory' | 'hijri') => {
+    edited.current = true;
+    setDualTab(next);
+  };
   const calendarSwitchNode = !switchSystems ? null : renderCalendarSwitch ? (
     renderCalendarSwitch({
       systems: switchSystems,
@@ -1579,7 +1581,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
           { value: 'hijri', label: systemLabels.hijri },
         ]}
         selected={dualTab}
-        onSelect={setDualTab}
+        onSelect={chooseTab}
         accessibilityLabel={systemA11yLabel}
         tokens={tokens}
         styles={styles}
@@ -1595,12 +1597,9 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
         <View style={hijriShown ? RTL : undefined}>{node}</View>
       </RtlContext.Provider>
     );
-  // 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 = (
     <View style={folded ? FOLDED : undefined}>
@@ -1609,10 +1608,10 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       {mirrored(
         <Calendar
           key={shownSystem}
-          constraints={selectionShown ? calendarConstraints : constraints}
+          constraints={calendarConstraints}
           today={today}
           initialVisibleDate={calendarAnchor}
-          selection={selectionShown ? selection : emptySelection(selection)}
+          selection={selection}
           onSelectDay={onSelectDayStable}
           firstDayOfWeek={firstDayOfWeek}
           showOutsideDays={showOutsideDays}
@@ -1688,19 +1687,25 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       ? 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 = (
     <>
-      <NumeralsContext.Provider value={digitsFor(draftSystem)}>
-        {sheetField}
-      </NumeralsContext.Provider>
       <NumeralsContext.Provider value={digitsFor(shownSystem)}>
+        {sheetField}
         {calendar}
       </NumeralsContext.Provider>
-      <NumeralsContext.Provider value={digitsFor(shownSystem)}>
-        {mirrored(timeRow)}
-      </NumeralsContext.Provider>
+      {timeRow == null ? null : (
+        // Measured for the scroll to the time (sheet.scrollToTime).
+        <View
+          ref={timeRef}
+          collapsable={false}
+          testID={testID ? `${testID}-time-section` : undefined}
+        >
+          <NumeralsContext.Provider value={digitsFor(shownSystem)}>
+            {mirrored(timeRow)}
+          </NumeralsContext.Provider>
+        </View>
+      )}
       {validationMessage ? (
         <FieldMessages
           error={validationMessage}
@@ -1716,7 +1721,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
   );
 
   return (
-    <NumeralsContext.Provider value={digitsFor(savedSystem)}>
+    <NumeralsContext.Provider value={digitsFor(fieldSystem)}>
       {trigger}
       <PickerContainer
         presentation={presentation}
@@ -1724,6 +1729,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
         onRequestClose={close}
         renderSheet={renderSheet}
         sheet={sheetOptions}
+        scrollRef={scrollRef}
         state={state}
         header={header}
         title={title ?? (isInline ? undefined : strings.titleDate)}