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

package/src/components/time/Wheel.tsx

@@ -15,6 +15,7 @@ import type { Time, TimeFormat } from '../../core/types';
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import { MAX_FONT_SCALE } from '../theme/a11y';
+import { useNumerals } from '../theme/numerals';
 import type { ThemeTokens } from '../theme/tokens';
 import { useReduceMotion } from '../hooks/useReduceMotion';
 import { buildTimeStyles } from './timeStyles';
@@ -31,6 +32,21 @@ export interface WheelItem {
   disabled: boolean;
 }
 
+/**
+ * The row showing `value`, or the nearest one when the value has no row (a
+ * minute off the step, e.g. 07 on a 5-minute wheel, shows at 05, not 00).
+ */
+export const indexOfValue = (items: WheelItem[], value: number): number => {
+  const exact = items.findIndex((i) => i.value === value);
+  if (exact > -1) return exact;
+  let best = 0;
+  items.forEach((item, i) => {
+    if (Math.abs(item.value - value) < Math.abs(items[best]!.value - value))
+      best = i;
+  });
+  return best;
+};
+
 /** The enabled row nearest to `index` (searching both ways), or `index` when none is. */
 export const nearestEnabled = (items: WheelItem[], index: number): number => {
   const start = Math.max(0, Math.min(items.length - 1, index));
@@ -83,13 +99,11 @@ const WheelColumnBase: React.FC<ColumnProps> = ({
   styles,
   testID,
 }) => {
+  const digits = useNumerals();
   const s = buildTimeStyles(tokens);
   const ref = useRef<ScrollViewRef>(null);
   const reduceMotion = useReduceMotion();
-  const selectedIndex = Math.max(
-    0,
-    items.findIndex((i) => i.value === value)
-  );
+  const selectedIndex = indexOfValue(items, value);
   const [centered, setCentered] = useState(selectedIndex);
   const spinning = useRef(false);
   const momentumTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -216,7 +230,7 @@ const WheelColumnBase: React.FC<ColumnProps> = ({
                 ],
               ]}
             >
-              {item.label}
+              {digits(item.label)}
             </Text>
           </View>
         ))}

package/src/components/time/timeStyles.ts

@@ -23,13 +23,13 @@ const create = (t: ThemeTokens) =>
       fontSize: t.fontSizeLarge,
       color: t.heading,
     },
-    // Times read hh:mm in every language, so the boxes don't mirror in RTL.
     boxes: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 22,
-      direction: 'ltr',
     },
+    // The boxes follow the row's direction: right to left (the Hijri tab, or a
+    // right-to-left app), the hour sits on the right and AM / PM on the left.
     clock: { flexDirection: 'row', alignItems: 'center' },
     // Each box is 50 × 46 with a 1 pt border and radius 6.
     boxWrap: { width: 50 },
@@ -104,7 +104,6 @@ const create = (t: ThemeTokens) =>
       flexDirection: 'row',
       alignItems: 'center',
       alignSelf: 'center',
-      direction: 'ltr',
     },
     wheelColumn: { width: 64, height: 200, overflow: 'hidden' },
     wheelHighlight: {

package/src/components/types.ts

@@ -1,6 +1,8 @@
 import type React from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
+import type { CalendarSystem } from '../core/calendarSystem';
 import type { Constraints, TimeBounds } from '../core/constraints';
+import type { Numerals } from '../core/numerals';
 import type {
   CalendarDate,
   PickerType,
@@ -35,7 +37,7 @@ export interface PickerState {
   disabled: boolean;
   readOnly: boolean;
   isOpen: boolean;
-  /** The keyboard is up inside the picker; the calendar folds away. */
+  /** The keyboard is up inside the picker and `hideCalendarOnKeyboard` hid the calendar. */
   folded: boolean;
   /**
    * Confirm can be pressed: the dates are complete and allowed. A time with a
@@ -102,6 +104,18 @@ export interface SheetOptions {
   height?: SheetSize;
   /** Default '90%'. Built-in sheet only. */
   maxHeight?: SheetSize;
+  /**
+   * The most the sheet grows to while the keyboard is up; a percentage is of
+   * the room above the keyboard. Default: `maxHeight`. Built-in sheet only.
+   */
+  keyboardMaxHeight?: SheetSize;
+  /**
+   * Space kept free below Confirm while the keyboard is down: the home
+   * indicator, or Android's navigation bar in an edge-to-edge app. Default:
+   * the bottom inset from react-native-safe-area-context's SafeAreaProvider
+   * when the app has one, else 0. Built-in sheet only.
+   */
+  bottomInset?: number;
   /** The header stays put while the body scrolls. false: it scrolls with the body. Default true. */
   fixedHeader?: boolean;
   /** The footer (Confirm) stays pinned below the body. false: it scrolls at the end of the body. Default true. */
@@ -118,6 +132,27 @@ export interface SheetOptions {
   fieldIcon?: boolean;
 }
 
+/**
+ * The second argument of `onChange` when the picker can show a Hijri calendar:
+ * the calendar the date was picked in. The value itself is always Gregorian.
+ * The picker remembers it while mounted; to show a stored value back the same
+ * way later, store this too and pass it as `dualDefaultTab` (dual) or
+ * `calendarSystem`.
+ */
+export interface ChangeInfo {
+  calendarSystem: 'gregory' | 'hijri';
+}
+
+/** What `renderCalendarSwitch` receives. */
+export interface CalendarSwitchRenderProps {
+  /** The choices, in order. */
+  systems: CalendarSystem[];
+  selected: CalendarSystem;
+  onSelect: (system: CalendarSystem) => void;
+  tokens: ThemeTokens;
+  strings: PickerStrings;
+}
+
 /** What `renderLabel` receives. */
 export interface LabelRenderProps {
   label?: string;
@@ -167,8 +202,10 @@ export interface DateTimePickerProps {
   /**
    * A value was saved: on Confirm; as it's edited with commitMode 'instant';
    * when typing in the on-screen field pauses; or '' on clear. Never on close.
+   * When the picker can show a Hijri calendar, `info` says which calendar the
+   * date was picked in.
    */
-  onChange: (value: PickerValue) => void;
+  onChange: (value: PickerValue, info?: ChangeInfo) => void;
   /**
    * Right after every onChange that saves a value (Confirm, an 'instant' edit,
    * on-screen typing), like a form field losing focus. Not on clear.
@@ -213,6 +250,12 @@ export interface DateTimePickerProps {
   readOnly?: boolean;
   /** Type date and time as segments in the field inside the sheet. */
   allowTyping?: boolean;
+  /**
+   * Hide the calendar while the keyboard is up (typing a date or a time), so
+   * the box being typed in and Confirm stay in view on small phones. Default
+   * true; `false` keeps the calendar in view.
+   */
+  hideCalendarOnKeyboard?: boolean;
   /**
    * The on-screen field is typeable too. A complete, allowed value is saved
    * once, when focus leaves the field or its last box fills. Default false.
@@ -277,10 +320,42 @@ export interface DateTimePickerProps {
   initialVisibleDate?: CalendarDate;
   enableMonthSwipe?: boolean;
   showToday?: boolean;
-  /** Default 'gregory'. Falls back to 'gregory' when the platform has no Hijri calendar. */
-  calendarSystem?: 'gregory' | 'dual' | 'hijri';
+  /**
+   * The calendar the grid uses: 'gregory', 'hijri' (Umm al-Qura), or 'dual':
+   * Gregorian and Hijri tabs, one calendar at a time. A day is shown selected
+   * only in the calendar it was picked in, and the field writes it in that
+   * calendar. With `calendarSwitch`, this is the one shown first. Default
+   * 'gregory'; anything Hijri falls back to 'gregory' when the platform has no
+   * Hijri calendar.
+   */
+  calendarSystem?: CalendarSystem;
+  /**
+   * A Gregorian / Hijri / Dual switch above the calendar. true shows all three;
+   * a list shows those, in that order (e.g. ['hijri', 'gregory']). Not shown for
+   * month and year picks, or when the platform has no Hijri calendar. Default false.
+   */
+  calendarSwitch?: boolean | CalendarSystem[];
+  /** The user picked another calendar in the switch. */
+  onCalendarSystemChange?: (system: CalendarSystem) => void;
+  /**
+   * The language a Hijri calendar is written in, whatever `locale` is: its
+   * month and weekday names, the Hijri date in the field, and what screen
+   * readers say. Default 'ar-SA' (Arabic).
+   */
+  hijriLocale?: string;
+  /** The tab a dual calendar opens on, each time it opens. Default 'gregory'. */
+  dualDefaultTab?: 'gregory' | 'hijri';
+  /** Replaces the built-in calendar switch. */
+  renderCalendarSwitch?: (p: CalendarSwitchRenderProps) => React.ReactNode;
   /** Any BCP-47 tag; decides names, the date order and the clock. Default: the device locale. */
   locale?: string;
+  /**
+   * The digits every number is drawn in: 'latin' (0–9), 'arabic' (١٢٣ in any
+   * language) or 'locale' (the language's own: ١٢٣ for 'ar-SA', ۱۲۳ for
+   * 'fa-IR', 123 for 'en-US'). Values stay 0–9. Default: 'arabic' for a Hijri
+   * calendar and a date picked in it, 'latin' for a Gregorian one.
+   */
+  numerals?: Numerals;
   /** IANA zone for date-time values and "today". Default: the device zone. */
   timeZone?: string;
   /** The current time, for "today" and a new day's time. Default `() => new Date()`. */
@@ -316,6 +391,13 @@ export interface DateTimePickerProps {
   theme?: Partial<ThemeTokens>;
   styles?: PickerStyles;
   strings?: Partial<PickerStrings>;
+  /**
+   * The texts while the Hijri tab shows (e.g. Arabic), for its calendar and
+   * time rows, the error messages inside the picker, and a date picked in it
+   * (the on-screen field's errors keep `strings`). A key left out (or `undefined`)
+   * keeps AM / PM in `hijriLocale` (ص / م), then `strings`.
+   */
+  hijriStrings?: Partial<PickerStrings>;
   testID?: string;
 
   // events

package/src/core/calendarSystem.ts

@@ -1,13 +1,15 @@
 import { addDays, addMonths, daysInMonth } from './calendarDate';
 import type { CalendarDate, Weekday } from './types';
 import { weekdayOf } from './calendarDate';
+import { toLatinDigits } from './digits';
+import { withCalendar } from './locale';
 
 /**
- * Calendar systems for the picker grid. Saved values are always Gregorian;
- * a system only changes how months are laid out and labelled.
+ * Calendar systems for the picker. Saved values are always Gregorian; a
+ * system only changes how months are laid out and labelled.
  * - 'gregory': the normal grid;
- * - 'dual':    the Gregorian grid with the Hijri day under each day;
- * - 'hijri':   a Hijri (Umm al-Qura) grid showing only the Hijri day.
+ * - 'hijri':   a Hijri (Umm al-Qura) grid showing the Hijri day;
+ * - 'dual':    both, as Gregorian and Hijri tabs showing one grid at a time.
  *
  * Hijri dates come from the platform's Intl ('islamic-umalqura'). When Intl
  * can't do it (checked once; some JS engines ship without that calendar) the
@@ -57,16 +59,9 @@ const utcDate = (
   return d;
 };
 
-/**
- * The locale with the Umm al-Qura calendar, keeping any Unicode extension it
- * already has ('ar-SA-u-nu-arab' → 'ar-SA-u-ca-islamic-umalqura-nu-arab').
- */
-const withHijriCalendar = (locale: string): string => {
-  const [base, ext] = locale.split(/-u-/i);
-  if (ext === undefined) return `${locale}-u-ca-islamic-umalqura`;
-  const rest = ext.replace(/(^|-)ca(-[a-z0-9]{3,8})+/i, '').replace(/^-/, '');
-  return `${base}-u-ca-islamic-umalqura${rest ? `-${rest}` : ''}`;
-};
+/** The locale with the Umm al-Qura calendar ('ar-SA-u-nu-arab' → 'ar-SA-u-ca-islamic-umalqura-nu-arab'). */
+const withHijriCalendar = (locale: string): string =>
+  withCalendar(locale, 'islamic-umalqura');
 
 const readParts = (
   f: Intl.DateTimeFormat,
@@ -83,19 +78,45 @@ const readParts = (
     : null;
 };
 
+/**
+ * Remembers results by key. Every tap redraws the grid and its labels, and
+ * Intl is slow on some engines (Hermes on Android), so Hijri conversions are
+ * worked out once. Cleared when full, to stay small.
+ */
+const memoize = <V>(limit = 4000) => {
+  const map = new Map<string, V>();
+  return {
+    get: (key: string, make: () => V): V => {
+      if (map.has(key)) return map.get(key)!;
+      const value = make();
+      if (map.size >= limit) map.clear();
+      map.set(key, value);
+      return value;
+    },
+    clear: () => map.clear(),
+  };
+};
+const hijriDays = memoize<CalendarDate | null>();
+const hijriStarts = memoize<CalendarDate>(600);
+const hijriTexts = memoize<string | null>();
+
 /** Whether this device can show Hijri dates. */
 export const isHijriSupported = (): boolean => getHijriFormat() !== null;
 
-/** Test hook: forget the cached Intl check. */
+/** Test hook: forget the cached Intl check and what was worked out with it. */
 export const resetHijriSupportCache = (): void => {
   hijriFormat = undefined;
+  hijriDays.clear();
+  hijriStarts.clear();
+  hijriTexts.clear();
 };
 
 /** Gregorian day → Hijri {year, month, day}, or null when unsupported. */
-export const toHijri = (d: CalendarDate): CalendarDate | null => {
-  const f = getHijriFormat();
-  return f ? readParts(f, d) : null;
-};
+export const toHijri = (d: CalendarDate): CalendarDate | null =>
+  hijriDays.get(`${d.year}-${d.month}-${d.day}`, () => {
+    const f = getHijriFormat();
+    return f ? readParts(f, d) : null;
+  });
 
 const HIJRI_EPOCH = { year: 622, month: 7, day: 19 };
 const MEAN_YEAR = 354.367;
@@ -105,7 +126,10 @@ const cmp = (a: SystemMonth, b: SystemMonth) =>
   a.year - b.year || a.month - b.month;
 
 /** The Gregorian day on which a Hijri month starts. */
-export const hijriMonthStart = (year: number, month: number): CalendarDate => {
+export const hijriMonthStart = (year: number, month: number): CalendarDate =>
+  hijriStarts.get(`${year}-${month}`, () => findMonthStart(year, month));
+
+const findMonthStart = (year: number, month: number): CalendarDate => {
   const estimate = Math.round(
     (year - 1) * MEAN_YEAR + (month - 1) * MEAN_MONTH
   );
@@ -125,7 +149,11 @@ export const hijriMonthStart = (year: number, month: number): CalendarDate => {
 
 export const addHijriMonths = (m: SystemMonth, n: number): SystemMonth => {
   const index = m.year * 12 + (m.month - 1) + n;
-  return { year: Math.floor(index / 12), month: (index % 12) + 1 };
+  // % keeps the sign in JS, so a year before 1 AH still gets months 1–12.
+  return {
+    year: Math.floor(index / 12),
+    month: (((index % 12) + 12) % 12) + 1,
+  };
 };
 
 export const hijriMonthLength = (year: number, month: number): number => {
@@ -154,13 +182,26 @@ export const HIJRI_MONTHS_EN = [
   'Dhuʻl-Hijjah',
 ];
 
+const monthNameCache = new Map<string, string[]>();
+
 /** Hijri month names in the user's language (Intl), English otherwise. */
 export const hijriMonthNames = (locale: string): string[] => {
+  const hit = monthNameCache.get(locale);
+  if (hit) return hit;
+  const names = readHijriMonthNames(locale);
+  monthNameCache.set(locale, names);
+  return names;
+};
+
+const readHijriMonthNames = (locale: string): string[] => {
   try {
     const f = new Intl.DateTimeFormat(withHijriCalendar(locale), {
       timeZone: 'UTC',
       month: 'long',
     });
+    // A locale Intl doesn't know drops the calendar and would give Gregorian names.
+    if (f.resolvedOptions().calendar !== 'islamic-umalqura')
+      return HIJRI_MONTHS_EN;
     return HIJRI_MONTHS_EN.map((fallback, i) => {
       const start = hijriMonthStart(1448, i + 1);
       const name = f.format(
@@ -173,6 +214,89 @@ export const hijriMonthNames = (locale: string): string[] => {
   }
 };
 
+const dateTextFormats = new Map<string, Intl.DateTimeFormat | null>();
+
+/**
+ * A Gregorian day written as a Hijri date in the user's language, in 0–9
+ * ('16 Jumada I 1448 AH', '16 جمادى الأولى 1448 هـ'), or null when unsupported.
+ */
+export const hijriDateText = (d: CalendarDate, locale: string): string | null =>
+  hijriTexts.get(`${locale}|${d.year}-${d.month}-${d.day}`, () =>
+    writeHijriDate(d, locale)
+  );
+
+const writeHijriDate = (d: CalendarDate, locale: string): string | null => {
+  const h = toHijri(d);
+  if (!h) return null;
+  if (!dateTextFormats.has(locale)) {
+    let f: Intl.DateTimeFormat | null = null;
+    try {
+      f = new Intl.DateTimeFormat(withHijriCalendar(locale), {
+        timeZone: 'UTC',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+      });
+    } catch {
+      f = null;
+    }
+    // A locale Intl doesn't know drops the calendar: build the text instead.
+    dateTextFormats.set(
+      locale,
+      f?.resolvedOptions().calendar === 'islamic-umalqura' ? f : null
+    );
+  }
+  const f = dateTextFormats.get(locale);
+  const text = f
+    ? toLatinDigits(f.format(utcDate(d.year, d.month - 1, d.day, 12)))
+    : '';
+  // An engine that ignores the calendar writes the Gregorian year: build it instead.
+  if (text.includes(String(h.year))) return text;
+  return `${h.day} ${hijriMonthNames(locale)[h.month - 1]} ${h.year}`;
+};
+
+export interface Periods {
+  am: string;
+  pm: string;
+}
+
+const ARABIC_PERIODS: Periods = { am: 'ص', pm: 'م' };
+const periodCache = new Map<string, Periods | null>();
+
+/**
+ * AM and PM in the Hijri locale's language, as Intl writes them ('ar-SA' →
+ * ص / م). An Arabic locale whose engine gives none, or Latin ones, gets ص / م;
+ * another locale gets null (the picker keeps strings.am / pm).
+ */
+export const hijriPeriods = (locale: string): Periods | null => {
+  if (!periodCache.has(locale)) periodCache.set(locale, readPeriods(locale));
+  return periodCache.get(locale)!;
+};
+
+const readPeriods = (locale: string): Periods | null => {
+  const arabic = /^ar\b/i.test(locale);
+  try {
+    const f = new Intl.DateTimeFormat(locale, {
+      timeZone: 'UTC',
+      hour: 'numeric',
+      hour12: true,
+    });
+    const period = (hour: number) =>
+      f
+        .formatToParts(utcDate(2026, 0, 1, hour))
+        // Some engines write the part type in lower case.
+        .find((p) => p.type.toLowerCase() === 'dayperiod')
+        ?.value.trim();
+    const am = period(9);
+    const pm = period(21);
+    if (am && pm && am !== pm && !(arabic && /[A-Za-z]/.test(am + pm)))
+      return { am, pm };
+  } catch {
+    // An engine without this locale falls through.
+  }
+  return arabic ? ARABIC_PERIODS : null;
+};
+
 /**
  * The system the picker uses: the requested one, Gregorian by default.
  * Anything Hijri falls back to Gregorian when unsupported.

package/src/core/digits.ts

@@ -0,0 +1,21 @@
+/**
+ * The zero of each decimal digit block a keyboard may type in: Arabic-Indic
+ * (٠–٩), Persian (۰–۹), N'Ko, the Indic scripts, Thai, Lao, Tibetan, Myanmar,
+ * Khmer, Mongolian and full-width. Each block runs zero to nine in order.
+ */
+const DIGIT_ZEROS = [
+  0x0660, 0x06f0, 0x07c0, 0x0966, 0x09e6, 0x0a66, 0x0ae6, 0x0b66, 0x0be6,
+  0x0c66, 0x0ce6, 0x0d66, 0x0e50, 0x0ed0, 0x0f20, 0x1040, 0x17e0, 0x1810,
+  0xff10,
+];
+
+/** Any decimal digits as 0–9 ('٢٥' → '25'); other characters are kept. */
+export const toLatinDigits = (text: string): string => {
+  let out = '';
+  for (const ch of text) {
+    const code = ch.charCodeAt(0);
+    const zero = DIGIT_ZEROS.find((z) => code >= z && code <= z + 9);
+    out += zero === undefined ? ch : String(code - zero);
+  }
+  return out;
+};

package/src/core/draft.ts

@@ -37,7 +37,15 @@ export interface DraftSlot {
 export type Draft =
   | { mode: 'single'; slot: DraftSlot }
   | { mode: 'range'; from: DraftSlot; to: DraftSlot }
-  | { mode: 'multiple'; slots: DraftSlot[]; sharedTime: Time | null };
+  | {
+      mode: 'multiple';
+      slots: DraftSlot[];
+      /**
+       * Shared time mode: the time every date gets. Null while the saved dates
+       * have different times, which each date then keeps until one is set.
+       */
+      sharedTime: Time | null;
+    };
 
 export interface DraftOptions {
   type: PickerType;
@@ -119,13 +127,22 @@ export const createDraft = (
     return { mode, from: slotFrom(from, opts), to: slotFrom(to, opts) };
   }
   if (mode === 'multiple') {
+    // One slot per day: a later value on a day already listed is dropped.
     const slots = sortSlots(
       splitMultiple(safe)
         .map((w) => slotFrom(w, opts))
-        .filter((s) => s.value)
+        .filter(
+          (s, i, all) =>
+            s.value &&
+            all.findIndex((o) => isSameDay(o.value?.date, s.value?.date)) === i
+        )
+    );
+    const times = slots.map((s) => s.value?.time ?? null);
+    const first = times[0] ?? null;
+    const sameTime = times.every(
+      (t) => t?.hour === first?.hour && t?.minute === first?.minute
     );
-    const sharedTime =
-      opts.type === 'datetime' ? (slots[0]?.value?.time ?? null) : null;
+    const sharedTime = opts.type === 'datetime' && sameTime ? first : null;
     return { mode, slots, sharedTime };
   }
   return {
@@ -158,6 +175,14 @@ const withDay = (
   };
 };
 
+/**
+ * Whether a range may start and end on one day: date-time ranges and
+ * `allowSameDay` date ranges, as long as minDays allows a 1-day range.
+ */
+export const sameDayRangeOk = (opts: DraftOptions): boolean =>
+  (opts.type === 'datetime' || !!opts.range?.allowSameDay) &&
+  (opts.range?.minDays ?? 1) <= 1;
+
 const pickRangeDay = (
   draft: Extract<Draft, { mode: 'range' }>,
   day: CalendarDate,
@@ -166,10 +191,6 @@ const pickRangeDay = (
 ): Draft => {
   const from = draft.from.value?.date;
   const to = draft.to.value?.date;
-  // A same-day range is 1 day long, so it's only an end when minDays allows it.
-  const allowSameDay =
-    (opts.type === 'datetime' || !!opts.range?.allowSameDay) &&
-    (opts.range?.minDays ?? 1) <= 1;
 
   if (!from) return { ...draft, from: withDay(draft.from, day, opts, eq) };
 
@@ -177,7 +198,8 @@ const pickRangeDay = (
     const order = compareCalendarDates(day, from);
     if (order < 0)
       return { ...draft, from: withDay(draft.from, day, opts, eq) };
-    if (order === 0 && !allowSameDay)
+    // The start tapped again, where it can't also be the end: deselects it.
+    if (order === 0 && !sameDayRangeOk(opts))
       return { ...draft, from: { ...draft.from, value: null } };
     return { ...draft, to: withDay(draft.to, day, opts, eq) };
   }
@@ -228,8 +250,10 @@ export const selectDay = (
       ...draft.slots,
       { value: { date: day, time }, initialWire: '' },
     ]),
+    // The first date's time becomes the shared one; dates with their own
+    // (different) times keep them.
     sharedTime:
-      opts.type === 'datetime' && !perDate
+      opts.type === 'datetime' && !perDate && draft.slots.length === 0
         ? (draft.sharedTime ?? time)
         : draft.sharedTime,
   };
@@ -237,7 +261,9 @@ export const selectDay = (
 
 /**
  * From/To layout: a tap fills the end being edited. An end that would come
- * before the start (or after the end) clears the other one.
+ * before the start (or after the end) clears the other one. The start tapped
+ * again as the end, where a range can't be one day, deselects the start, as
+ * in the single field.
  */
 export const setRangeEnd = (
   draft: Draft,
@@ -247,12 +273,14 @@ export const setRangeEnd = (
   newDayTime?: Time | null
 ): Draft => {
   if (draft.mode !== 'range') return draft;
-  const sameDayOk = opts.type === 'datetime' || !!opts.range?.allowSameDay;
+  const sameDayOk = sameDayRangeOk(opts);
   const fits = (from?: CalendarDate, to?: CalendarDate) => {
     if (!from || !to) return true;
     const order = compareCalendarDates(to, from);
     return order > 0 || (order === 0 && sameDayOk);
   };
+  if (end === 'to' && !sameDayOk && isSameDay(draft.from.value?.date, day))
+    return { ...draft, from: { ...draft.from, value: null } };
   if (end === 'from') {
     const from = withDay(draft.from, day, opts, newDayTime);
     const keepTo = fits(day, draft.to.value?.date);
@@ -346,7 +374,7 @@ const effectiveValue = (
     opts.type === 'datetime' &&
     opts.multiple?.timeMode !== 'perDate'
   ) {
-    return { ...slot.value, time: draft.sharedTime };
+    return { ...slot.value, time: draft.sharedTime ?? slot.value.time };
   }
   return slot.value;
 };

package/src/core/locale.ts

@@ -8,10 +8,24 @@ import type { TimeFormat, Weekday } from './types';
 const FALLBACK_LOCALE = 'en-US';
 const FALLBACK_DATE_FORMAT = 'yyyy-MM-dd';
 const SEPARATORS = ['/', '-', '.'];
-const DATE_TOKENS: Partial<Record<Intl.DateTimeFormatPartTypes, string>> = {
+const DATE_TOKENS: Partial<Record<string, string>> = {
   day: 'dd',
   month: 'MM',
   year: 'yyyy',
+  // Hermes on Android labels the year of some locales (ar-SA) this way.
+  yearName: 'yyyy',
+};
+
+/**
+ * The locale with a calendar, keeping any Unicode extension it already has
+ * ('ar-SA-u-nu-arab' → 'ar-SA-u-ca-gregory-nu-arab'). Some engines write a
+ * locale in its own calendar by default (iOS: Hijri for 'ar-SA').
+ */
+export const withCalendar = (locale: string, calendar: string): string => {
+  const [base, ext] = locale.split(/-u-/i);
+  if (ext === undefined) return `${locale}-u-ca-${calendar}`;
+  const rest = ext.replace(/(^|-)ca(-[a-z0-9]{3,8})+/i, '').replace(/^-/, '');
+  return `${base}-u-ca-${calendar}${rest ? `-${rest}` : ''}`;
 };
 
 /** The device locale (a BCP-47 tag), or 'en-US'. */
@@ -31,7 +45,7 @@ export const defaultLocale = (): string => {
  */
 export const deriveDateFormat = (locale: string): string => {
   try {
-    const parts = new Intl.DateTimeFormat(locale, {
+    const parts = new Intl.DateTimeFormat(withCalendar(locale, 'gregory'), {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
@@ -42,7 +56,10 @@ export const deriveDateFormat = (locale: string): string => {
       !['dd', 'MM', 'yyyy'].every((t) => tokens.includes(t))
     )
       return FALLBACK_DATE_FORMAT;
-    const first = parts.find((p) => p.type === 'literal')?.value ?? '';
+    // RTL locales mark the separator with a direction mark ('\u200F/').
+    const first = (
+      parts.find((p) => p.type === 'literal')?.value ?? ''
+    ).replace(/[\u200E\u200F\u061C]/g, '');
     const separator = SEPARATORS.includes(first) ? first : '/';
     return tokens.join(separator);
   } catch {