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

package/src/components/field/fieldText.ts

@@ -1,4 +1,4 @@
-import type { SegmentError } from '../../core/segments';
+import { to12Hour, type SegmentError } from '../../core/segments';
 import type { DateTimeValue, PickerType, TimeFormat } from '../../core/types';
 import { DEFAULT_STRINGS, type PickerStrings } from '../theme/defaultStrings';
 
@@ -14,29 +14,62 @@ export const formatDateText = (
     .replace('MM', pad2(value.date.month))
     .replace('dd', pad2(value.date.day));
 
+/** The AM / PM labels and the date-time separator, from `strings`. */
+export type PeriodLabels = Pick<
+  PickerStrings,
+  'am' | 'pm' | 'dateTimeSeparator'
+>;
+
 /** '03:45 PM' (12-hour) or '15:45' (24-hour). Always shows AM/PM in 12-hour mode. */
 export const formatTimeText = (
   value: DateTimeValue,
-  timeFormat: TimeFormat
+  timeFormat: TimeFormat,
+  periods: PeriodLabels = DEFAULT_STRINGS
 ): string => {
   if (!value.time) return '';
   const { hour, minute } = value.time;
   if (timeFormat === '24h') return `${pad2(hour)}:${pad2(minute)}`;
-  const hour12 = hour % 12 === 0 ? 12 : hour % 12;
-  return `${pad2(hour12)}:${pad2(minute)} ${hour < 12 ? 'AM' : 'PM'}`;
+  const { hour12, period } = to12Hour(hour);
+  return `${pad2(hour12)}:${pad2(minute)} ${period === 'AM' ? periods.am : periods.pm}`;
 };
 
+/** Writes a value's date some other way, e.g. as a Hijri date. */
+export type DateTextFormatter = (value: DateTimeValue) => string;
+
+/** A value's date and time as two texts; the time is '' for a date or a value without one. */
+export const formatValueParts = (
+  value: DateTimeValue,
+  type: PickerType,
+  dateFormat: string,
+  timeFormat: TimeFormat,
+  dateText?: DateTextFormatter,
+  periods: PeriodLabels = DEFAULT_STRINGS
+): { date: string; time: string } => ({
+  date: dateText ? dateText(value) : formatDateText(value, dateFormat),
+  time:
+    type === 'datetime' && value.time
+      ? formatTimeText(value, timeFormat, periods)
+      : '',
+});
+
 export const formatValueText = (
   value: DateTimeValue | null,
   type: PickerType,
   dateFormat: string,
-  timeFormat: TimeFormat
+  timeFormat: TimeFormat,
+  dateText?: DateTextFormatter,
+  periods: PeriodLabels = DEFAULT_STRINGS
 ): string => {
   if (!value) return '';
-  const date = formatDateText(value, dateFormat);
-  return type === 'datetime' && value.time
-    ? `${date} ${formatTimeText(value, timeFormat)}`
-    : date;
+  const { date, time } = formatValueParts(
+    value,
+    type,
+    dateFormat,
+    timeFormat,
+    dateText,
+    periods
+  );
+  return time ? `${date}${periods.dateTimeSeparator ?? ' '}${time}` : date;
 };
 
 /** '21-10-2026 – 25-10-2026'; just the start (with the dash) while the end is open. */
@@ -46,11 +79,27 @@ export const formatRangeText = (
   type: PickerType,
   dateFormat: string,
   timeFormat: TimeFormat,
-  separator: string = ' – '
+  separator: string = ' – ',
+  dateText?: DateTextFormatter,
+  periods: PeriodLabels = DEFAULT_STRINGS
 ): string => {
   if (!from && !to) return '';
-  const a = formatValueText(from, type, dateFormat, timeFormat);
-  const b = formatValueText(to, type, dateFormat, timeFormat);
+  const a = formatValueText(
+    from,
+    type,
+    dateFormat,
+    timeFormat,
+    dateText,
+    periods
+  );
+  const b = formatValueText(
+    to,
+    type,
+    dateFormat,
+    timeFormat,
+    dateText,
+    periods
+  );
   return `${a}${separator}${b}`.trim();
 };
 
@@ -59,11 +108,15 @@ export const formatMultipleText = (
   values: (DateTimeValue | null)[],
   type: PickerType,
   dateFormat: string,
-  timeFormat: TimeFormat
+  timeFormat: TimeFormat,
+  dateText?: DateTextFormatter,
+  periods: PeriodLabels = DEFAULT_STRINGS
 ): string =>
   values
     .filter((v): v is DateTimeValue => !!v)
-    .map((v) => formatValueText(v, type, dateFormat, timeFormat))
+    .map((v) =>
+      formatValueText(v, type, dateFormat, timeFormat, dateText, periods)
+    )
     .join(', ');
 
 /** 'DD-MM-YYYY' or 'DD-MM-YYYY hh:mm AM', from the placeholder strings. */
@@ -84,7 +137,7 @@ export const placeholderText = (
     timeFormat === '24h'
       ? `${strings.placeholderHour24}:${strings.placeholderMinute}`
       : `${strings.placeholderHour}:${strings.placeholderMinute} ${strings.am}`;
-  return `${date} ${time}`;
+  return `${date}${strings.dateTimeSeparator ?? ' '}${time}`;
 };
 
 const TIME_KEYS = ['hour', 'minute', 'period'];

package/src/components/hooks/useBottomInset.ts

@@ -0,0 +1,33 @@
+import { createContext, useContext, type Context } from 'react';
+
+type Insets = { bottom: number } | null;
+
+declare const require: (name: string) => unknown;
+
+/**
+ * react-native-safe-area-context's insets, when the app has that package (an
+ * optional peer: most Expo apps do). The require sits in a try so a missing
+ * package is fine: Metro allows optional dependencies there.
+ */
+const readContext = (): Context<Insets> | null => {
+  try {
+    const lib = require('react-native-safe-area-context') as {
+      SafeAreaInsetsContext?: Context<Insets>;
+    };
+    return lib.SafeAreaInsetsContext ?? null;
+  } catch {
+    return null;
+  }
+};
+
+const NO_INSETS = createContext<Insets>(null);
+const InsetsContext = readContext() ?? NO_INSETS;
+
+/**
+ * The bottom safe-area inset (the home indicator, or Android's navigation bar
+ * in an edge-to-edge app), from the app's SafeAreaProvider; 0 without one.
+ * Read through the context rather than `useSafeAreaInsets`, which throws when
+ * there's no provider.
+ */
+export const useBottomInset = (): number =>
+  useContext(InsetsContext)?.bottom ?? 0;

package/src/components/hooks/useKeyboardFold.ts

@@ -1,31 +1,59 @@
 import { useEffect, useState } from 'react';
-import { Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform, type KeyboardEvent } from 'react-native';
 
-/**
- * True while the keyboard is up and the picker is open. The picker folds the
- * calendar away then, so the box being typed in (and Confirm) stay visible on
- * small phones; inline, it folds only while one of its own boxes has focus,
- * since another field on the screen can raise the keyboard too.
- */
-export const useKeyboardFold = (active: boolean): boolean => {
-  const [keyboardUp, setKeyboardUp] = useState(false);
+interface KeyboardState {
+  up: boolean;
+  /** The keyboard's height while it's up, 0 when down (or not reported). */
+  height: number;
+}
+
+const DOWN: KeyboardState = { up: false, height: 0 };
+
+/** The keyboard as it is now: it can already be up when the picker mounts or opens. */
+const current = (): KeyboardState =>
+  Keyboard.isVisible()
+    ? { up: true, height: Keyboard.metrics()?.height ?? 0 }
+    : DOWN;
+
+/** Whether the keyboard is up, and how tall it is, while `active`. */
+export const useKeyboard = (active: boolean): KeyboardState => {
+  const [keyboard, setKeyboard] = useState(() => (active ? current() : DOWN));
 
   useEffect(() => {
     if (!active) {
-      setKeyboardUp(false);
+      setKeyboard(DOWN);
       return undefined;
     }
+    setKeyboard(current());
     const showEvent =
       Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
     const hideEvent =
       Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    const show = Keyboard.addListener(showEvent, () => setKeyboardUp(true));
-    const hide = Keyboard.addListener(hideEvent, () => setKeyboardUp(false));
+    const show = Keyboard.addListener(showEvent, (e?: KeyboardEvent) =>
+      setKeyboard({ up: true, height: e?.endCoordinates?.height ?? 0 })
+    );
+    const hide = Keyboard.addListener(hideEvent, () => setKeyboard(DOWN));
+    // iOS: a sheet opened on keyboardWillHide mounts before the keyboard is
+    // gone, so it reads it as up; keyboardDidHide puts that right.
+    const hidden =
+      hideEvent === 'keyboardDidHide'
+        ? null
+        : Keyboard.addListener('keyboardDidHide', () => setKeyboard(DOWN));
     return () => {
       show.remove();
       hide.remove();
+      hidden?.remove();
     };
   }, [active]);
 
-  return keyboardUp;
+  return keyboard;
 };
+
+/**
+ * True while the keyboard is up and the picker is open. With
+ * `hideCalendarOnKeyboard` the picker folds the calendar away then, so the box being typed in (and Confirm) stay visible on
+ * small phones; inline, it folds only while one of its own boxes has focus,
+ * since another field on the screen can raise the keyboard too.
+ */
+export const useKeyboardFold = (active: boolean): boolean =>
+  useKeyboard(active).up;

package/src/components/hooks/useOpenPicker.ts

@@ -19,7 +19,8 @@ interface Options {
  * Opens and closes the picker.
  * - calls `onBeforeOpen` first;
  * - if a text input has focus, closes the keyboard and waits for it on iOS and
- *   Android (so the sheet doesn't jump as the keyboard leaves), with a 450 ms fallback;
+ *   Android (so the sheet doesn't jump as the keyboard leaves), with a 450 ms
+ *   fallback; a controlled `visible` turned on waits the same way;
  * - disabled and read-only pickers never open.
  */
 export const useOpenPicker = ({
@@ -32,7 +33,16 @@ export const useOpenPicker = ({
 }: Options): { isOpen: boolean; open: () => void; close: () => void } => {
   const [openState, setOpenState] = useState(false);
   const isControlled = visible !== undefined;
-  const isOpen = isControlled ? !!visible : openState;
+  // Controlled: `visible` turned on while a text input has focus waits for
+  // the keyboard. Decided while rendering, so the sheet never shows a frame
+  // early.
+  const [keyboardWait, setKeyboardWait] = useState(false);
+  const [seenVisible, setSeenVisible] = useState(visible);
+  if (isControlled && visible !== seenVisible) {
+    setSeenVisible(visible);
+    setKeyboardWait(!!visible && !!TextInput.State.currentlyFocusedInput?.());
+  }
+  const isOpen = isControlled ? !!visible && !keyboardWait : openState;
   const pending = useRef<{ cancel: () => void } | null>(null);
 
   const cancelPending = () => {
@@ -41,29 +51,17 @@ export const useOpenPicker = ({
   };
   useEffect(() => cancelPending, []);
 
-  const reallyOpen = useCallback(() => {
-    pending.current = null;
-    if (!isControlled) setOpenState(true);
-    onOpen?.();
-  }, [isControlled, onOpen]);
-
-  const open = useCallback(() => {
-    if (disabled || readOnly || isOpen || pending.current) return;
-    onBeforeOpen?.();
-    const focused = TextInput.State.currentlyFocusedInput?.();
-    if (!focused) {
-      reallyOpen();
-      return;
-    }
+  /** Closes the keyboard and calls `then` once it's gone (or after the fallback). */
+  const afterKeyboard = (then: () => void) => {
     const event =
       Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
     const sub = Keyboard.addListener(event, () => {
       cancelPending();
-      reallyOpen();
+      then();
     });
     const timer = setTimeout(() => {
       cancelPending();
-      reallyOpen();
+      then();
     }, KEYBOARD_WAIT_FALLBACK_MS);
     pending.current = {
       cancel: () => {
@@ -72,6 +70,31 @@ export const useOpenPicker = ({
       },
     };
     Keyboard.dismiss();
+  };
+
+  useEffect(() => {
+    if (!keyboardWait) return undefined;
+    afterKeyboard(() => setKeyboardWait(false));
+    return cancelPending;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- while waiting
+  }, [keyboardWait]);
+
+  const reallyOpen = useCallback(() => {
+    pending.current = null;
+    if (!isControlled) setOpenState(true);
+    onOpen?.();
+  }, [isControlled, onOpen]);
+
+  const open = useCallback(() => {
+    if (disabled || readOnly || isOpen || pending.current) return;
+    onBeforeOpen?.();
+    const focused = TextInput.State.currentlyFocusedInput?.();
+    if (!focused) {
+      reallyOpen();
+      return;
+    }
+    afterKeyboard(reallyOpen);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- afterKeyboard only uses refs and stable APIs
   }, [disabled, readOnly, isOpen, onBeforeOpen, reallyOpen]);
 
   const close = useCallback(() => {

package/src/components/hooks/useTypedSegments.ts

@@ -17,12 +17,13 @@ const valueKey = (v: DateTimeValue | null): string =>
 /**
  * State for the typed field. Re-syncs from `value` when it changes from outside
  * (a calendar tap, a clear) while no segment is focused, and reports every
- * parse result to `onParsed`.
+ * parse result to `onParsed`, saying whether it came from such a value
+ * (`fromOutside`) rather than from typing.
  */
 export const useTypedSegments = (
   value: DateTimeValue | null,
   options: SegmentEditorOptions,
-  onParsed?: (parsed: ParsedSegments) => void
+  onParsed?: (parsed: ParsedSegments, fromOutside: boolean) => void
 ): {
   state: SegmentEditorState;
   dispatch: (action: SegmentEditorAction) => void;
@@ -51,9 +52,12 @@ export const useTypedSegments = (
   // Fast typing (a hardware keyboard, autofill) sends the next character
   // before React re-renders, so inputs compare against this, not `state`.
   const latest = useRef(state);
+  // Whether the last action was a value set from outside, not typing.
+  const lastWasReset = useRef(false);
   const dispatch = useCallback(
     (action: SegmentEditorAction) => {
       latest.current = reducer(latest.current, action);
+      lastWasReset.current = action.type === 'reset';
       reactDispatch(action);
     },
     [reducer]
@@ -93,7 +97,7 @@ export const useTypedSegments = (
       // What's typed is newer than anything that was waiting to be shown.
       resetOnLeave.current = false;
     }
-    onParsedRef.current?.(state.parsed);
+    onParsedRef.current?.(state.parsed, lastWasReset.current);
   }, [state.parsed]);
 
   return { state, dispatch, getState };

package/src/components/theme/defaultStrings.ts

@@ -18,6 +18,8 @@ export interface PickerStrings {
   /** Between the two ends of a range in the field text. */
   rangeSeparator: string;
   pm: string;
+  /** Between the date and the time in the field text and its placeholder. */
+  dateTimeSeparator?: string;
   /** Placeholders of the typed date segments and time boxes, and of the empty field. */
   placeholderDay: string;
   placeholderMonth: string;
@@ -39,8 +41,15 @@ export interface PickerStrings {
   errorRangeTooShort: (days: number) => string;
   errorRangeTooLong: (days: number) => string;
   nothingSelectable: string;
+  /** The calendar switch and the dual tabs. */
+  calendarGregorian?: string;
+  calendarHijri?: string;
+  calendarDual?: string;
+  a11yCalendarSystem?: string;
   a11yClear: string;
   a11yOpen: string;
+  /** The built-in sheet's backdrop, which closes it. */
+  a11yClose?: string;
   a11yDay: string;
   a11yMonth: string;
   a11yYear: string;
@@ -57,7 +66,7 @@ export interface PickerStrings {
   a11yRangeEnd: string;
 }
 
-export const DEFAULT_STRINGS: PickerStrings = {
+export const DEFAULT_STRINGS: Required<PickerStrings> = {
   titleDate: 'Select date',
   confirm: 'Confirm',
   reset: 'Reset',
@@ -72,6 +81,7 @@ export const DEFAULT_STRINGS: PickerStrings = {
   am: 'AM',
   rangeSeparator: ' – ',
   pm: 'PM',
+  dateTimeSeparator: ' ',
   placeholderDay: 'DD',
   placeholderMonth: 'MM',
   placeholderYear: 'YYYY',
@@ -87,12 +97,17 @@ export const DEFAULT_STRINGS: PickerStrings = {
   errorNotAllowed: "This date isn't available",
   errorTimeNotAllowed: "This time isn't available",
   errorMinuteStep: (step) => `Choose a minute in steps of ${step}`,
-  errorRangeOrder: 'The end must be after the start',
+  errorRangeOrder: 'The end date must be greater than the start date',
   errorRangeTooShort: (n) => `Choose a range of at least ${n} days`,
   errorRangeTooLong: (n) => `Choose a range of at most ${n} days`,
   nothingSelectable: 'No dates are available',
+  calendarGregorian: 'Gregorian',
+  calendarHijri: 'Hijri',
+  calendarDual: 'Dual',
+  a11yCalendarSystem: 'Calendar',
   a11yClear: 'Clear date',
   a11yOpen: 'Open date picker',
+  a11yClose: 'Close',
   a11yDay: 'Day',
   a11yMonth: 'Month',
   a11yYear: 'Year',
@@ -109,9 +124,19 @@ export const DEFAULT_STRINGS: PickerStrings = {
   a11yRangeEnd: 'end of range',
 };
 
+/** The keys that have a value: one left `undefined` (or `null`) keeps what's under it. */
+export const compactStrings = (
+  overrides?: Partial<PickerStrings>
+): Partial<PickerStrings> =>
+  overrides
+    ? (Object.fromEntries(
+        Object.entries(overrides).filter(([, v]) => v != null)
+      ) as Partial<PickerStrings>)
+    : {};
+
 /** The English defaults with the caller's overrides on top. */
 export const resolveStrings = (
   overrides?: Partial<PickerStrings>
-): PickerStrings => {
-  return { ...DEFAULT_STRINGS, ...overrides };
+): Required<PickerStrings> => {
+  return { ...DEFAULT_STRINGS, ...compactStrings(overrides) };
 };

package/src/components/theme/direction.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+import { I18nManager } from 'react-native';
+
+/**
+ * Whether a part of the picker is laid out right to left. The picker sets it
+ * for the calendar and the time rows while the Hijri tab shows; elsewhere the
+ * app's direction (`I18nManager.isRTL`) decides.
+ */
+export const RtlContext = createContext<boolean | null>(null);
+
+export const useIsRTL = (): boolean =>
+  useContext(RtlContext) ?? I18nManager.isRTL;

package/src/components/theme/numerals.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+import { latinDigits } from '../../core/numerals';
+
+/**
+ * The digits every number in the picker is drawn with, set once by the picker
+ * from its `numerals` and `locale` props. Values and typed input stay 0–9.
+ */
+export const NumeralsContext =
+  createContext<(text: string) => string>(latinDigits);
+
+export const useNumerals = () => useContext(NumeralsContext);

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',
@@ -52,6 +57,18 @@ export const STYLE_KEYS = [
   'monthChipText',
   'monthChipSelected',
   'monthChipDisabled',
+  // calendar switch (calendarSwitch prop)
+  'calendarSwitch',
+  'calendarSwitchSegment',
+  'calendarSwitchSegmentSelected',
+  'calendarSwitchText',
+  'calendarSwitchTextSelected',
+  /** The Gregorian / Hijri tabs of a dual calendar. */
+  'dualTabs',
+  'dualTab',
+  'dualTabSelected',
+  'dualTabText',
+  'dualTabTextSelected',
   // weekdays
   'weekdayRow',
   'weekdayText',
@@ -73,7 +90,7 @@ export const STYLE_KEYS = [
   'disabledText',
   'holiday',
   'holidayText',
-  /** The small Hijri day under the Gregorian one ('dual'). */
+  /** A second line under the day number. Not drawn by the picker any more; kept so styles that set it still compile. */
   'daySubLabel',
   // grids
   'yearGrid',

package/src/components/theme/tokens.ts

@@ -9,6 +9,8 @@ export interface ThemeTokens {
   /** Headings in the sheet: the year title and the time label. */
   heading: string;
   mutedText: string;
+  /** Days of the months before and after, which can still be picked. */
+  outsideText?: string;
   placeholder: string;
   border: string;
   /** Typed time boxes. */
@@ -46,12 +48,13 @@ export interface ThemeTokens {
   touchTarget: number;
 }
 
-export const DEFAULT_TOKENS: ThemeTokens = {
+export const DEFAULT_TOKENS: Required<ThemeTokens> = {
   accent: '#2563EB',
   onAccent: '#FFFFFF',
   text: '#111827',
   heading: '#111827',
   mutedText: '#6B7280',
+  outsideText: '#6B7280',
   placeholder: '#9CA3AF',
   border: '#D1D5DB',
   inputBorder: '#D1D5DB',
@@ -109,6 +112,7 @@ export const buildTokens = (overrides?: Partial<ThemeTokens>): ThemeTokens => {
   return {
     ...DEFAULT_TOKENS,
     ...(overrides?.accent ? { borderFocused: overrides.accent } : null),
+    ...(overrides?.mutedText ? { outsideText: overrides.mutedText } : null),
     ...overrides,
   };
 };

package/src/components/time/TimeRow.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Text, View } from 'react-native';
 import type { TextInputRef } from '../nativeTypes';
 import type { TimeBounds } from '../../core/constraints';
@@ -244,6 +250,20 @@ const TimeRow: React.FC<TimeRowProps> = ({
   const setRef = useCallback((key: TimeKey, r: TextInputRef | null) => {
     refs.current[key] = r;
   }, []);
+  // 'Start time, Hour' and 'End time, Hour' read differently, as the typed
+  // date field's segments do.
+  const boxStrings = useMemo(
+    () =>
+      label
+        ? {
+            ...strings,
+            a11yHour: `${label}, ${strings.a11yHour}`,
+            a11yMinute: `${label}, ${strings.a11yMinute}`,
+            a11yPeriod: `${label}, ${strings.a11yPeriod}`,
+          }
+        : strings,
+    [label, strings]
+  );
 
   return (
     <View style={s.wrapper} testID={testID}>
@@ -263,7 +283,7 @@ const TimeRow: React.FC<TimeRowProps> = ({
             disabled={disabled}
             tokens={tokens}
             styles={styles}
-            strings={strings}
+            strings={boxStrings}
             testID={testID ? `${testID}-wheel` : undefined}
           />
         ) : (
@@ -282,7 +302,7 @@ const TimeRow: React.FC<TimeRowProps> = ({
             disabled={disabled}
             tokens={tokens}
             styles={styles}
-            strings={strings}
+            strings={boxStrings}
             testID={testID}
           />
         )}

package/src/components/time/TypedTime.tsx

@@ -12,6 +12,7 @@ import type { 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 { buildTimeStyles } from './timeStyles';
 
@@ -59,6 +60,7 @@ const TypedTime: React.FC<Props> = ({
   strings,
   testID,
 }) => {
+  const digits = useNumerals();
   const s = buildTimeStyles(tokens);
 
   const box = (key: TimeKey) => (
@@ -78,7 +80,7 @@ const TypedTime: React.FC<Props> = ({
             accessibilityLabel={
               key === 'hour' ? strings.a11yHour : strings.a11yMinute
             }
-            value={values[key] ?? ''}
+            value={digits(values[key] ?? '')}
             placeholder={
               key === 'minute'
                 ? strings.placeholderMinute