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

package/src/components/field/fieldText.ts

@@ -119,27 +119,70 @@ export const formatMultipleText = (
     )
     .join(', ');
 
-/** 'DD-MM-YYYY' or 'DD-MM-YYYY hh:mm AM', from the placeholder strings. */
-export const placeholderText = (
+/** { date: 'DD-MM-YYYY', time: 'hh:mm AM' } (time '' unless datetime), from the placeholder strings. */
+export const placeholderParts = (
   type: PickerType,
   dateFormat: string,
   timeFormat: TimeFormat,
   strings: PickerStrings = DEFAULT_STRINGS
-): string => {
+): { date: string; time: string } => {
   const parts: Record<string, string> = {
     dd: strings.placeholderDay,
     MM: strings.placeholderMonth,
     yyyy: strings.placeholderYear,
   };
   const date = dateFormat.replace(/yyyy|MM|dd/g, (t) => parts[t] ?? t);
-  if (type !== 'datetime') return date;
+  if (type !== 'datetime') return { date, time: '' };
   const time =
     timeFormat === '24h'
       ? `${strings.placeholderHour24}:${strings.placeholderMinute}`
       : `${strings.placeholderHour}:${strings.placeholderMinute} ${strings.am}`;
-  return `${date}${strings.dateTimeSeparator ?? ' '}${time}`;
+  return { date, time };
 };
 
+/** 'DD-MM-YYYY' or 'DD-MM-YYYY hh:mm AM', from the placeholder strings. */
+export const placeholderText = (
+  type: PickerType,
+  dateFormat: string,
+  timeFormat: TimeFormat,
+  strings: PickerStrings = DEFAULT_STRINGS
+): string => {
+  const { date, time } = placeholderParts(
+    type,
+    dateFormat,
+    timeFormat,
+    strings
+  );
+  return time ? `${date}${strings.dateTimeSeparator ?? ' '}${time}` : date;
+};
+
+/**
+ * A placeholder passed in, cut at the first date-time separator into the
+ * date and the time ('DD/MM/YYYY HH:MM' -> 'DD/MM/YYYY', 'HH:MM'). Text
+ * whose second part isn't a time (no ':'), like 'Pick a time', stays whole.
+ */
+export const splitPlaceholder = (
+  text: string,
+  separator: string
+): { date: string; time: string } => {
+  const at = separator ? text.indexOf(separator) : -1;
+  const time = at > 0 ? text.slice(at + separator.length) : '';
+  if (!time.includes(':')) return { date: text, time: '' };
+  return { date: text.slice(0, at), time };
+};
+
+/** The empty field's placeholder (the one passed in, else the built one) as date and time. */
+export const emptyFieldParts = (
+  placeholder: string | undefined,
+  type: PickerType,
+  dateFormat: string,
+  timeFormat: TimeFormat,
+  strings: PickerStrings = DEFAULT_STRINGS
+): { date: string; time: string } =>
+  placeholder
+    ? splitPlaceholder(placeholder, strings.dateTimeSeparator ?? ' ')
+    : placeholderParts(type, dateFormat, timeFormat, strings);
+
 const TIME_KEYS = ['hour', 'minute', 'period'];
 
 /** The message shown below the field for the first typed-input problem. */

package/src/components/theme/styleKeys.ts

@@ -27,7 +27,9 @@ export const STYLE_KEYS = [
   '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.
+   * `{ minWidth: '50%' }` starts the time at the middle of the field. The empty
+   * field's placeholder does the same: a passed `placeholder` is cut at the
+   * first `strings.dateTimeSeparator` when what follows is a time ('HH:MM').
    */
   'fieldDateText',
   'fieldPlaceholder',

package/src/components/types.ts

@@ -131,6 +131,13 @@ export interface SheetOptions {
   fieldPlaceholder?: string;
   /** The calendar icon at the end of that field, as on the on-screen field. Default false. */
   fieldIcon?: boolean;
+  /**
+   * "This date isn't available" above the calendar while the picked date (or a
+   * range's end) is a disabled day, e.g. a saved value the rules no longer
+   * allow. false hides it; Confirm stays off for that day. Default true;
+   * applies inline too.
+   */
+  showNotAllowedError?: boolean;
   /**
    * Passed to the sheet body's ScrollView, over the picker's own defaults, e.g.
    * `{ showsVerticalScrollIndicator: true, persistentScrollbar: true }` to keep
@@ -156,7 +163,8 @@ export type SheetScrollProps = Omit<
 
 /**
  * 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 calendar the date was picked in, which is the tab on screen when it was
+ * saved. 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`.
@@ -365,9 +373,9 @@ export interface DateTimePickerProps {
   showToday?: boolean;
   /**
    * 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
+   * Gregorian and Hijri tabs, one calendar at a time. A selection shows in
+   * both tabs and is saved with the tab on screen, 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.
    */
@@ -386,7 +394,12 @@ export interface DateTimePickerProps {
    * readers say. Default 'ar-SA' (Arabic).
    */
   hijriLocale?: string;
-  /** The tab a dual calendar opens on, each time it opens. Default 'gregory'. */
+  /**
+   * The tab a dual calendar opens on when it has no value. With a value, it
+   * opens on the tab that value was saved with (remembered while the picker is
+   * mounted; a value from outside counts as saved with this tab). Default
+   * 'gregory'.
+   */
   dualDefaultTab?: 'gregory' | 'hijri';
   /**
    * How the on-screen field writes the saved value. 'picked' (default): in the