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

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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
@@ -160,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"));
@@ -46,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];
 
@@ -575,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),
@@ -589,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 = {
@@ -638,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 {
@@ -674,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();
@@ -684,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]);
@@ -696,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.
@@ -714,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;
@@ -729,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);
@@ -752,16 +720,9 @@ const DateTimePicker = props => {
     date: parsed.dateOnly,
     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();
@@ -769,7 +730,6 @@ 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);
@@ -815,56 +775,45 @@ 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();
-    }
     // A multiple picker scrolls for its first date only, so more can be picked.
-    if (cur.mode !== 'multiple' || cur.slots.length === 0) revealTime();
-    if (cur.mode === 'range') {
+    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] ?? newTime());
+          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 ?? newTime());
+        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] ?? newTime());
+      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;
       }
@@ -873,10 +822,10 @@ const DateTimePicker = props => {
       return;
     }
     setTypingBlock('single', false);
-    draft.selectDay(day, fixedTime ?? times.single ?? newTime());
+    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, newTime, rangeLayout, activeEnd, activeDay, fixedTime, pending, range?.reselect, type, multipleTimeMode, setTypingBlock, draftSystem, shownSystem, resetSelectionUi, endPicked, draftOptions, minuteStep, constraints, revealTime]);
+  [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.
@@ -999,11 +948,10 @@ const DateTimePicker = props => {
   // The calendar the on-screen field writes the saved value in.
   const fieldSystem = fieldCalendar === 'gregory' ? 'gregory' : savedSystem;
   const savedDateText = dateTextFor(fieldSystem);
-  const draftDateText = dateTextFor(draftSystem);
+  const draftDateText = dateTextFor(shownSystem);
   const savedStrings = stringsFor(fieldSystem);
-  const draftStrings = stringsFor(draftSystem);
-  // Error messages inside the picker follow the tab on screen; the on-screen
-  // field's keep `strings`.
+  // 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.
@@ -1055,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,
@@ -1109,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,
@@ -1126,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,
@@ -1146,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,
@@ -1163,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,
@@ -1201,7 +1157,7 @@ const DateTimePicker = props => {
       label: systemLabels.hijri
     }],
     selected: dualTab,
-    onSelect: setDualTab,
+    onSelect: chooseTab,
     accessibilityLabel: systemA11yLabel,
     tokens: tokens,
     styles: styles,
@@ -1217,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,
@@ -1289,15 +1245,11 @@ 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, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_numerals2.NumeralsContext.Provider, {
       value: digitsFor(shownSystem),
-      children: calendar
+      children: [sheetField, calendar]
     }), timeRow == null ? null :
     /*#__PURE__*/
     // Measured for the scroll to the time (sheet.scrollToTime).