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

package/CHANGELOG.md

@@ -4,6 +4,36 @@ All notable changes to this project are documented here. The format follows [Kee
 
 ## [Unreleased]
 
+## [1.3.1] - 2026-11-13
+
+### Added
+
+- `sheet.showNotAllowedError` (default `true`): `false` hides "This date isn't available" above the calendar when the picked date (or a range's end) is a disabled day, such as a saved value the rules no longer allow. Confirm stays off for that day either way.
+
+### Fixed
+
+- A greyed (disabled) today no longer keeps the full accent ring. Its ring keeps the accent colour at 40% opacity, like the other greyed controls, and the day number stays as grey as the other greyed days. A custom `styles.today` (its border colour or width, for example) and the corner radius from `styles.day` still apply to that ring.
+- With a `fieldDateText` style, the empty date-time field's placeholder now sets its date apart from its time, like the value does, so `{ minWidth: '50%' }` starts the placeholder's time at the middle of the field too. A `placeholder` passed in is cut at the first `strings.dateTimeSeparator` when what follows is a time (`'DD/MM/YYYY HH:MM'`); wording such as `'Pick a time'` stays whole.
+
+### Changed
+
+- **A dual calendar's selection shows in both tabs.** A day picked on the Gregorian tab is highlighted on the Hijri tab too, and the other way round, and a tap on either tab edits the same selection instead of starting over, so a range can start on one tab and end on the other. The selection is saved with the tab on screen: Confirm on the Hijri tab saves a Gregorian pick as Hijri (`info.calendarSystem: 'hijri'`), and the field writes it that way. With `commitMode="instant"`, a tab (or a calendar in the switch) the user picks saves the selection again with that calendar; the tab the picker opens on doesn't. The field inside the sheet now follows the tab too. A new `calendarSystem` prop no longer clears a selection in progress. Values stay Gregorian.
+- **A dual calendar reopens on the tab its value was saved with.** A date saved from the Hijri tab opens the picker on the Hijri tab next time, while the picker stays mounted. With no value it still opens on `dualDefaultTab`, and so does a value passed in from outside: to keep the tab after a remount, store `info.calendarSystem` and pass it as `dualDefaultTab`.
+
+## [1.3.0] - 2026-11-12
+
+### Added
+
+- `fieldCalendar` (`'picked'` | `'gregory'`, default `'picked'`): how the on-screen field writes the saved value. `'gregory'` keeps it in `dateFormat`, with `strings` AM / PM and Gregorian digits, even when the date was picked on the Hijri tab. The field inside the sheet and the time rows still follow the tab, and `onChange` still reports the calendar the date was picked in.
+- `sheet.scrollProps`: props for the sheet body's ScrollView, over the picker's own defaults, in the built-in sheet and with `renderSheet`. For example `{ showsVerticalScrollIndicator: true, persistentScrollbar: true }` keeps the scrollbar showing on Android; iOS shows it only while scrolling. Its type is exported as `SheetScrollProps`.
+- `newDayTime: 'empty'`: a newly picked day gets no time. The time boxes stay empty (both ends of a range, the shared time of multiple dates) and Confirm stays disabled, and `commitMode: 'instant'` saves nothing, until the user enters a time. An hour alone counts, as it already did (empty minutes are 00). A saved time is kept when another day is picked. `newDayTime: 'now'` is the default and keeps the current-time behaviour; a `Time` still fixes the time.
+- `sheet.scrollToTime` (`true` | `'end'` | `false`, default `true`): in a date-time sheet whose body scrolls, a calendar tap that picks the date now scrolls the time section into view when it's below the fold, so the time boxes show before they're tapped. Single mode scrolls on every tap, range mode once the end is picked, and multiple mode for the first date only, so more dates can be picked. `true` scrolls just far enough to show the time, `'end'` to the end of the body, `false` turns it off. Nothing moves when the time already shows in full. Built-in sheet and `renderSheet`.
+- `scrollToTimeRef`: the same scroll for an inline date-time picker. Pass the ScrollView the picker sits in, and a calendar tap that picks the date scrolls it just far enough to show the time section. Without it an inline picker doesn't scroll, as before.
+
+### Fixed
+
+- Android: a drag that starts on a time box now scrolls the sheet (or the screen around an inline picker). A TextInput keeps any drag that starts on it, so the body only scrolled from the calendar. The boxes ignore touches and a wrapper takes them; a tap still focuses the box, and a tap on the box being edited brings the keyboard back. Nothing about this changes when a box gains focus, because a change at that moment made Android move focus from box to box. iOS is unchanged.
+
 ## [1.2.2] - 2026-11-05
 
 ### Fixed
@@ -146,6 +176,11 @@ Initial release.
 - `dateFormat` in any case (`'dd/mm/yyyy'`). A format the picker can't use warns in development and falls back to the locale order.
 - Accessibility labels and states, reduce-motion support, a font-scale cap and RTL mirroring. On iOS every typed box gets a Done button above the number pad, and errors are announced to VoiceOver.
 
+[Unreleased]: https://github.com/Bhairavi-ancy/rn-grid-date-time-picker/compare/v1.3.1...HEAD
+[1.3.1]: https://github.com/Bhairavi-ancy/rn-grid-date-time-picker/compare/v1.3.0...v1.3.1
+[1.3.0]: https://github.com/Bhairavi-ancy/rn-grid-date-time-picker/compare/v1.2.2...v1.3.0
+[1.2.2]: https://github.com/Bhairavi-ancy/rn-grid-date-time-picker/compare/v1.2.1...v1.2.2
+[1.2.1]: https://github.com/Bhairavi-ancy/rn-grid-date-time-picker/compare/v1.2.0...v1.2.1
 [1.2.0]: https://github.com/Bhairavi-ancy/rn-grid-date-time-picker/compare/v1.1.0...v1.2.0
 [1.1.0]: https://github.com/Bhairavi-ancy/rn-grid-date-time-picker/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/Bhairavi-ancy/rn-grid-date-time-picker/releases/tag/v1.0.0

package/lib/commonjs/components/DateTimePicker.js

@@ -21,7 +21,6 @@ var _CalendarSwitch = _interopRequireDefault(require("./calendar/CalendarSwitch.
 var _localeNames = require("./calendar/localeNames.js");
 var _direction = require("./theme/direction.js");
 var _numerals2 = require("./theme/numerals.js");
-var _selection = require("./calendar/selection.js");
 var _PickerContainer = _interopRequireDefault(require("./container/PickerContainer.js"));
 var _fieldText = require("./field/fieldText.js");
 var _FieldMessages = _interopRequireDefault(require("./field/FieldMessages.js"));
@@ -29,6 +28,7 @@ var _RangeFields = _interopRequireDefault(require("./field/RangeFields.js"));
 var _ValueField = _interopRequireDefault(require("./field/ValueField.js"));
 var _useKeyboardFold = require("./hooks/useKeyboardFold.js");
 var _useOpenPicker = require("./hooks/useOpenPicker.js");
+var _useScrollToTime = require("./hooks/useScrollToTime.js");
 var _usePickerDraft = require("./hooks/usePickerDraft.js");
 var _useTodayTick = require("./hooks/useTodayTick.js");
 var _TimeRows = _interopRequireDefault(require("./time/TimeRows.js"));
@@ -45,19 +45,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];
 
@@ -94,6 +81,7 @@ const DateTimePicker = props => {
     multiple,
     range,
     presentation = 'sheet',
+    scrollToTimeRef,
     visible,
     onOpen,
     onClose,
@@ -144,6 +132,7 @@ const DateTimePicker = props => {
     calendarSwitch,
     onCalendarSystemChange,
     dualDefaultTab = 'gregory',
+    fieldCalendar = 'picked',
     hijriLocale = 'ar-SA',
     renderCalendarSwitch,
     showToday = false,
@@ -334,12 +323,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 = (0, _react.useMemo)(() => {
     return {
       type,
       zone,
       adapter,
-      defaultTime: _draft.DEFAULT_TIME,
+      defaultTime: startsEmpty ? null : _draft.DEFAULT_TIME,
       multiple: {
         timeMode: multiple?.timeMode,
         maxSelections: multiple?.maxSelections
@@ -351,7 +341,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 = (0, _usePickerDraft.usePickerDraft)(mode, value, isOpen, draftOptions);
   const today = (0, _useTodayTick.useTodayTick)(zone, now);
 
@@ -526,6 +516,15 @@ const DateTimePicker = props => {
   const preview = (0, _react.useMemo)(() => Object.values(rowPending).reduce((acc, p) => p ? (0, _draft.setTime)(acc, p.time, p.target) : acc, draft.draft), [draft.draft, rowPending]);
   const previewIssue = (0, _draft.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
+  } = (0, _useScrollToTime.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];
@@ -562,10 +561,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 = (0, _react.useMemo)(() => (0, _draft.createDraft)(mode, value, draftOptions),
@@ -576,32 +575,12 @@ const DateTimePicker = props => {
   const savedContent = contentOf(saved);
   const savedSystemRef = (0, _react.useRef)(null);
   const savedSystem = savedSystemRef.current?.content === savedContent ? savedSystemRef.current.system : outsideSystem;
-  const [draftSystem, setDraftSystem] = (0, _react.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 = (0, _react.useRef)({
-    isOpen,
-    valueKey,
-    savedSystem
-  });
-  (0, _react.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]);
-  (0, _react.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.
+  (0, _react.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 = (0, _react.useCallback)((wire, picked) => {
     savedSystemRef.current = {
@@ -625,11 +604,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 = (0, _react.useCallback)(wire => {
-    emitChange(wire, draftSystem);
+    emitChange(wire, shownSystem);
     onBlur?.();
-  }, [emitChange, draftSystem, onBlur]);
+  }, [emitChange, shownSystem, onBlur]);
   const confirm = (0, _react.useCallback)(() => {
     if (!canConfirm) return;
     const {
@@ -661,8 +641,8 @@ const DateTimePicker = props => {
     draft.clear();
     resetSelectionUi();
     edited.current = false;
-    emitChange('', draftSystem);
-  }, [draft, emitChange, draftSystem, resetSelectionUi]);
+    emitChange('', shownSystem);
+  }, [draft, emitChange, shownSystem, resetSelectionUi]);
   const clearDraft = (0, _react.useCallback)(() => {
     edited.current = true;
     draft.clear();
@@ -671,7 +651,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 = (0, _react.useCallback)(() => {
     if (commitMode === 'instant' && hasSaved) clearValue();else clearDraft();
   }, [commitMode, hasSaved, clearValue, clearDraft]);
@@ -683,7 +662,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 = (0, _react.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.
@@ -701,11 +681,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;
@@ -716,14 +697,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 = (0, _react.useRef)(false);
   (0, _react.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 = (0, _react.useRef)(saveInstant);
@@ -734,21 +715,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();
@@ -756,14 +730,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.
@@ -777,6 +750,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 = (0, _react.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
@@ -784,8 +759,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 || !(0, _calendarDate.isSameDay)(from.date, day)) return time;
+    const time = fixedTime ?? newTime();
+    if (!time || !from?.time || !(0, _calendarDate.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.
@@ -800,66 +775,57 @@ const DateTimePicker = props => {
   const onSelectDay = (0, _react.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 ? (0, _draft.clearDraft)(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((0, _calendarDate.daysBetween)(cur.from.value.date, day)) < Math.abs((0, _calendarDate.daysBetween)(cur.to.value.date, day)) ? 'from' : 'to';
+          const nearest = Math.abs((0, _calendarDate.daysBetween)(d.from.value.date, day)) < Math.abs((0, _calendarDate.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 && (0, _calendarDate.compareCalendarDates)(day, cur.from.value.date) < 0 ? 'from' : end0;
+        const end1 = activeEnd === 'to' && !endPicked && d.from.value && (0, _calendarDate.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' && !(0, _draft.sameDayRangeOk)(draftOptions) && (0, _calendarDate.isSameDay)(cur.from.value?.date, day);
-        if (end0 === 'from') setActiveEnd('to');else if (deselects) setActiveEnd('from');
+        const deselects = end1 === 'to' && !(0, _draft.sameDayRangeOk)(draftOptions) && (0, _calendarDate.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 => (0, _calendarDate.isSameDay)(slot.value?.date, day));
+      const picked = d.slots.some(slot => (0, _calendarDate.isSameDay)(slot.value?.date, day));
       // perDate: a tap on a picked day first makes it the one the time row edits.
-      if (perDate && picked && !(0, _calendarDate.isSameDay)(dayInEdit, day)) {
+      if (perDate && picked && !(0, _calendarDate.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.
@@ -979,12 +945,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 => (0, _calendarSystem.hijriDateText)(v.date, hijriLocale) ?? (0, _fieldText.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.
@@ -1015,7 +982,7 @@ const DateTimePicker = props => {
     type,
     mode,
     value,
-    displayText: digitsFor(savedSystem)(savedText ?? (0, _fieldText.formatValueText)(savedSingle, type, dateFormat, timeFormat, savedDateText, savedStrings)),
+    displayText: digitsFor(fieldSystem)(savedText ?? (0, _fieldText.formatValueText)(savedSingle, type, dateFormat, timeFormat, savedDateText, savedStrings)),
     disabled,
     readOnly,
     isOpen,
@@ -1036,11 +1003,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 = (0, _calendarDate.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,
@@ -1090,7 +1058,7 @@ const DateTimePicker = props => {
     testID: testID ? `${testID}-value` : undefined
   }) : mode === 'single' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ValueField.default, {
     ...fieldCommon,
-    strings: draftStrings,
+    strings: shownStrings,
     errorStrings: shownStrings,
     value: sheetValue,
     displayText: precision !== 'day' ? periodText(sheetValue) : undefined,
@@ -1107,7 +1075,7 @@ const DateTimePicker = props => {
     testID: testID ? `${testID}-value` : undefined
   }) : d.mode === 'range' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeFields.default, {
     ...fieldCommon,
-    strings: draftStrings,
+    strings: shownStrings,
     errorStrings: shownStrings,
     layout: rangeLayout,
     dateText: draftDateText,
@@ -1127,9 +1095,9 @@ const DateTimePicker = props => {
     testID: testID
   }) : d.mode === 'multiple' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ValueField.default, {
     ...fieldCommon,
-    strings: draftStrings,
+    strings: shownStrings,
     value: null,
-    displayText: (0, _fieldText.formatMultipleText)(draftValues, type, dateFormat, timeFormat, draftDateText, draftStrings),
+    displayText: (0, _fieldText.formatMultipleText)(draftValues, type, dateFormat, timeFormat, draftDateText, shownStrings),
     placeholder: sheetOptions?.fieldPlaceholder,
     allowClear: allowClear,
     onClear: clearInSheet,
@@ -1144,13 +1112,20 @@ const DateTimePicker = props => {
     dual: strings.calendarDual ?? _defaultStrings.DEFAULT_STRINGS.calendarDual
   };
   const systemA11yLabel = strings.a11yCalendarSystem ?? _defaultStrings.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,
@@ -1182,7 +1157,7 @@ const DateTimePicker = props => {
       label: systemLabels.hijri
     }],
     selected: dualTab,
-    onSelect: setDualTab,
+    onSelect: chooseTab,
     accessibilityLabel: systemA11yLabel,
     tokens: tokens,
     styles: styles,
@@ -1198,16 +1173,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 : (0, _selection.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: folded ? FOLDED : undefined,
     children: [calendarSwitchNode, dualTabs, mirrored(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.default, {
-      constraints: selectionShown ? calendarConstraints : constraints,
+      constraints: calendarConstraints,
       today: today,
       initialVisibleDate: calendarAnchor,
-      selection: selectionShown ? selection : emptySelection(selection),
+      selection: selection,
       onSelectDay: onSelectDayStable,
       firstDayOfWeek: firstDayOfWeek,
       showOutsideDays: showOutsideDays,
@@ -1270,18 +1245,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((0, _draft.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_numerals2.NumeralsContext.Provider, {
-      value: digitsFor(draftSystem),
-      children: sheetField
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_numerals2.NumeralsContext.Provider, {
-      value: digitsFor(shownSystem),
-      children: calendar
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_numerals2.NumeralsContext.Provider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_numerals2.NumeralsContext.Provider, {
       value: digitsFor(shownSystem),
-      children: mirrored(timeRow)
+      children: [sheetField, calendar]
+    }), timeRow == null ? null :
+    /*#__PURE__*/
+    // Measured for the scroll to the time (sheet.scrollToTime).
+    (0, _jsxRuntime.jsx)(_reactNative.View, {
+      ref: timeRef,
+      collapsable: false,
+      testID: testID ? `${testID}-time-section` : undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_numerals2.NumeralsContext.Provider, {
+        value: digitsFor(shownSystem),
+        children: mirrored(timeRow)
+      })
     }), validationMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldMessages.default, {
       error: validationMessage,
       tokens: tokens,
@@ -1293,13 +1272,14 @@ const DateTimePicker = props => {
     }) : null]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_numerals2.NumeralsContext.Provider, {
-    value: digitsFor(savedSystem),
+    value: digitsFor(fieldSystem),
     children: [trigger, /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerContainer.default, {
       presentation: presentation,
       isOpen: isOpen,
       onRequestClose: close,
       renderSheet: renderSheet,
       sheet: sheetOptions,
+      scrollRef: scrollRef,
       state: state,
       header: header,
       title: title ?? (isInline ? undefined : strings.titleDate),