rn-grid-date-time-picker 1.1.0 → 1.2.1

package/src/components/theme/styleKeys.ts

@@ -25,6 +25,11 @@ export const STYLE_KEYS = [
   'fieldText',
   /** The value's text while the field is disabled (the placeholder keeps its own colour). */
   'fieldTextDisabled',
+  /**
+   * Sets the date of a single date-time value apart from its time, e.g.
+   * `{ minWidth: '50%' }` starts the time at the middle of the field.
+   */
+  'fieldDateText',
   'fieldPlaceholder',
   'fieldSegment',
   'fieldSegmentFocused',
@@ -105,6 +110,10 @@ export const STYLE_KEYS = [
   // time
   'timeRow',
   'timeLabel',
+  /** Holds the label and its date (`timeRowDate`) or a `renderTimeLabel` label. */
+  'timeLabelWrap',
+  /** The picked day under a time row's label (`timeRowDate`). */
+  'timeLabelDate',
   'timeBox',
   'timeBoxFocused',
   'timeBoxError',

package/src/components/time/TimeRow.tsx

@@ -57,6 +57,10 @@ export interface TimeRowProps {
   /** The day's limits (`Constraints.timeBounds`). */
   bounds?: TimeBounds | null;
   label: string;
+  /** The row's day, shown under the label (`timeRowDate`); null shows none. */
+  dateText?: string | null;
+  /** Replaces the label and its date (`renderTimeLabel`). */
+  renderLabel?: () => React.ReactNode;
   disabled?: boolean;
   tokens: ThemeTokens;
   styles?: PickerStyles;
@@ -77,6 +81,37 @@ const issueText = (
   return strings.errorTimeNotAllowed;
 };
 
+/** The row's label: plain, with the day under it, or the app's own. */
+const TimeLabel: React.FC<
+  Pick<
+    TimeRowProps,
+    'label' | 'dateText' | 'renderLabel' | 'tokens' | 'styles' | 'testID'
+  >
+> = ({ label, dateText, renderLabel, tokens, styles, testID }) => {
+  const s = buildTimeStyles(tokens);
+  if (!renderLabel && !dateText)
+    return <Text style={[s.label, styles?.timeLabel]}>{label}</Text>;
+  return (
+    <View style={[s.labelWrap, styles?.timeLabelWrap]}>
+      {renderLabel ? (
+        renderLabel()
+      ) : (
+        <>
+          <Text style={[s.label, s.labelInWrap, styles?.timeLabel]}>
+            {label}
+          </Text>
+          <Text
+            style={[s.labelDate, styles?.timeLabelDate]}
+            testID={testID ? `${testID}-date` : undefined}
+          >
+            {dateText}
+          </Text>
+        </>
+      )}
+    </View>
+  );
+};
+
 /**
  * Label, the time boxes and the error below them. The boxes are
  * normal inputs (free cursor, digits only, two at most) with three helpers:
@@ -97,6 +132,8 @@ const TimeRow: React.FC<TimeRowProps> = ({
   minuteStep = 1,
   bounds,
   label,
+  dateText,
+  renderLabel,
   disabled,
   tokens,
   styles,
@@ -205,8 +242,11 @@ const TimeRow: React.FC<TimeRowProps> = ({
   let issue: TimeEntryIssue | null = effective.issue;
   if (effective.isEmpty) issue = time ? 'INCOMPLETE' : null;
   if (effective.time) issue = checkTime(effective.time, { minuteStep, bounds });
+  // A time set elsewhere reaches the boxes one render later (the effect
+  // above); until then the boxes are stale, so check that time instead.
+  const boxesStale = !focused && timeKey(time) !== lastKey.current;
   // The wheel always holds a complete time: only the limits and the step apply.
-  if (input === 'wheel')
+  if (input === 'wheel' || boxesStale)
     issue = time ? checkTime(time, { minuteStep, bounds }) : null;
 
   const pending =
@@ -268,7 +308,14 @@ const TimeRow: React.FC<TimeRowProps> = ({
   return (
     <View style={s.wrapper} testID={testID}>
       <View style={[s.row, styles?.timeRow]}>
-        <Text style={[s.label, styles?.timeLabel]}>{label}</Text>
+        <TimeLabel
+          label={label}
+          dateText={dateText}
+          renderLabel={renderLabel}
+          tokens={tokens}
+          styles={styles}
+          testID={testID}
+        />
         {input === 'wheel' ? (
           <TimeWheel
             time={time}

package/src/components/time/TimeRows.tsx

@@ -5,10 +5,11 @@ import type { Draft, DraftTarget } from '../../core/draft';
 import type { TimeEntryIssue } from '../../core/timeEntry';
 import type { CalendarDate, Time, TimeFormat } from '../../core/types';
 import type { RangeEnd } from '../field/RangeFields';
-import { formatDateText } from '../field/fieldText';
+import { formatDateText, type DateTextFormatter } from '../field/fieldText';
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import type { ThemeTokens } from '../theme/tokens';
+import type { TimeLabelRenderProps } from '../types';
 import TimeRow from './TimeRow';
 
 /** Times typed before their day is picked, per end ('shared' lives in the draft). */
@@ -37,6 +38,11 @@ interface Props {
   onSpinChange: (spinning: boolean) => void;
   /** A row's box gained or lost focus. */
   onFocusChange?: (rowKey: string, focused: boolean) => void;
+  /** Shows each row's day under its label. */
+  timeRowDate?: boolean;
+  renderTimeLabel?: (p: TimeLabelRenderProps) => React.ReactNode;
+  /** A day as the field writes it (the Hijri text for a Hijri pick); default `dateFormat`. */
+  dateText?: DateTextFormatter;
   /** A row's time that is typed but not saved yet (null once saved or gone). */
   onPendingChange?: (
     rowKey: string,
@@ -51,6 +57,7 @@ interface Props {
 
 interface RowSpec {
   key: string;
+  kind: TimeLabelRenderProps['row'];
   label: string;
   time: Time | null;
   day: CalendarDate | null;
@@ -85,6 +92,9 @@ const TimeRows: React.FC<Props> = (props) => {
     onSpinChange,
     onFocusChange,
     onPendingChange,
+    timeRowDate = false,
+    renderTimeLabel,
+    dateText,
     tokens,
     styles,
     strings,
@@ -98,6 +108,7 @@ const TimeRows: React.FC<Props> = (props) => {
   ): RowSpec => {
     return {
       key,
+      kind: key,
       label,
       time: value?.time ?? pending[key] ?? null,
       day: value?.date ?? null,
@@ -123,6 +134,7 @@ const TimeRows: React.FC<Props> = (props) => {
     rows = [
       {
         key: 'shared',
+        kind: 'shared',
         label: strings.time,
         time: draft.sharedTime,
         day: null,
@@ -142,7 +154,11 @@ const TimeRows: React.FC<Props> = (props) => {
       rows = [
         {
           key: `day-${slot.date.year}-${slot.date.month}-${slot.date.day}`,
-          label: `${strings.time} · ${formatDateText(slot, dateFormat)}`,
+          kind: 'day',
+          // With timeRowDate the day goes under the label instead.
+          label: timeRowDate
+            ? strings.time
+            : `${strings.time} · ${formatDateText(slot, dateFormat)}`,
           time: slot.time,
           day: slot.date,
           target: { day: slot.date },
@@ -200,6 +216,24 @@ const TimeRows: React.FC<Props> = (props) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps -- reports changes only; the callback may be a new function on every render
   useEffect(() => onSpinChange(anySpinning), [anySpinning]);
 
+  /** A row's day as the field writes it, or null before it is picked. */
+  const dayText = (row: RowSpec): string | null => {
+    if (!row.day) return null;
+    const value = { date: row.day, time: row.time };
+    return dateText ? dateText(value) : formatDateText(value, dateFormat);
+  };
+  const labelRenderer = (row: RowSpec) =>
+    renderTimeLabel
+      ? () =>
+          renderTimeLabel({
+            label: row.label,
+            row: row.kind,
+            date: row.day,
+            dateText: dayText(row),
+            time: row.time,
+          })
+      : undefined;
+
   const single = rows.length === 1;
   return (
     <>
@@ -218,6 +252,8 @@ const TimeRows: React.FC<Props> = (props) => {
           minuteStep={minuteStep}
           bounds={row.day ? constraints.timeBounds(row.day) : null}
           label={row.label}
+          dateText={timeRowDate ? dayText(row) : null}
+          renderLabel={labelRenderer(row)}
           disabled={disabled}
           tokens={tokens}
           styles={styles}

package/src/components/time/timeStyles.ts

@@ -23,13 +23,22 @@ 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.
+    // The label with the day under it (timeRowDate), or a renderTimeLabel label.
+    labelWrap: { flexShrink: 1, marginEnd: 12 },
+    labelInWrap: { marginEnd: 0 },
+    labelDate: {
+      marginTop: 2,
+      ...fontStyle(t, 'regular'),
+      fontSize: t.fontSizeSmall,
+      color: t.mutedText,
+    },
     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 },
@@ -62,9 +71,9 @@ const create = (t: ThemeTokens) =>
     },
     boxFocused: { borderColor: t.borderFocused },
     boxError: { borderColor: t.error },
+    // No height of its own, so `timeBox` sets the row's height.
     colonCell: {
       width: 24,
-      height: 46,
       alignItems: 'center',
       justifyContent: 'center',
     },
@@ -104,7 +113,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

@@ -165,6 +165,20 @@ export interface LabelRenderProps {
   fieldTestID?: string;
 }
 
+/** What `renderTimeLabel` receives, for one time row. */
+export interface TimeLabelRenderProps {
+  /** The row's label from `strings`: 'Time', 'Start time' or 'End time'. */
+  label: string;
+  /** A single value's row, a range end, the multiple-mode shared row, or a day's own row (`timeMode: 'perDate'`). */
+  row: 'single' | 'from' | 'to' | 'shared' | 'day';
+  /** The row's picked day; null before it is picked, and for the shared row. */
+  date: CalendarDate | null;
+  /** That day as the field writes it; null when there is no day. Set whether or not `timeRowDate` is on. */
+  dateText: string | null;
+  /** The row's time, or null. */
+  time: Time | null;
+}
+
 /** What `renderInstruction` receives. */
 export interface InstructionRenderProps {
   instruction: string;
@@ -368,6 +382,14 @@ export interface DateTimePickerProps {
   minuteStep?: number;
   /** A newly picked day always gets this time (over a time typed first and over the current time). */
   newDayTime?: Time;
+  /**
+   * Shows each time row's picked day under its label ('Start time',
+   * 10-03-2026), as the field writes it. Nothing shows until the day is
+   * picked. Style it with `timeLabelDate`. Default false.
+   */
+  timeRowDate?: boolean;
+  /** Replaces a time row's label (and its date). The boxes and errors stay built in. */
+  renderTimeLabel?: (p: TimeLabelRenderProps) => React.ReactNode;
 
   // limits → greyed days and errors
   showHolidays?: boolean;
@@ -391,6 +413,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

@@ -255,6 +255,48 @@ const writeHijriDate = (d: CalendarDate, locale: string): string | null => {
   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/zoned.ts

@@ -1,9 +1,16 @@
 import { DateTime } from 'luxon';
 import type { DateTimeValue } from './types';
 
-/** The Luxon DateTime for a date-time value in `zone` (seconds and ms zeroed). */
-export const toZonedDateTime = (value: DateTimeValue, zone: string): DateTime =>
-  DateTime.fromObject(
+/**
+ * The Luxon DateTime for a date-time value in `zone` (seconds and ms zeroed).
+ * A time that happens twice resolves to its first occurrence: Luxon alone picks
+ * by the zone's offset today, so the result would change with the season.
+ */
+export const toZonedDateTime = (
+  value: DateTimeValue,
+  zone: string
+): DateTime => {
+  const dt = DateTime.fromObject(
     {
       ...value.date,
       hour: value.time?.hour ?? 0,
@@ -13,6 +20,11 @@ export const toZonedDateTime = (value: DateTimeValue, zone: string): DateTime =>
     },
     { zone }
   );
+  if (!dt.isValid) return dt;
+  return dt
+    .getPossibleOffsets()
+    .reduce((first, d) => (d.toMillis() < first.toMillis() ? d : first), dt);
+};
 
 export type DstStatus = 'ok' | 'gap' | 'overlap';
 

package/src/index.tsx

@@ -31,7 +31,7 @@ export {
   todayIn,
   weekdayOf,
 } from './core/calendarDate';
-export { hijriDateText } from './core/calendarSystem';
+export { hijriDateText, hijriPeriods } from './core/calendarSystem';
 export { arabicDigits } from './core/numerals';
 
 // Types
@@ -70,8 +70,9 @@ export type {
   SheetRenderProps,
   SheetSize,
   Slot,
+  TimeLabelRenderProps,
 } from './components/types';
-export type { CalendarSystem } from './core/calendarSystem';
+export type { CalendarSystem, Periods } from './core/calendarSystem';
 export type { Numerals } from './core/numerals';
 export type { PickerStrings } from './components/theme/defaultStrings';
 export type {