@xh/hoist 86.4.1 → 86.4.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 86.4.2 - 2026-08-20
+
+### 🎁 New Features
+
+* Mobile `DateInput` now opens a themeable calendar picker (react-day-picker) within a dialog,
+  replacing the OS-provided picker of the native `<input type="date">` element. Adds a
+  `formatString` prop to control the in-input display of the value, and a `dayPickerProps` escape
+  hatch to pass props (e.g. `disabled` day matchers) directly to the underlying calendar.
+
+### 📚 Libraries
+
+* react-day-picker `added @ 9.14`
+
 ## 86.4.1 - 2026-08-11
 
 ### 🐞 Bug Fixes
@@ -10,7 +23,7 @@
 * Revert swiper library to previous version to address swiping regressions (#4559)
 
 ### 📚 Libraries
-* swiper  `12.1 -> 14.0`
+* swiper  `14.0 -> 12.1`
 
 
 ## 86.4.0 - 2026-07-15

package/build/types/kit/react-day-picker/index.d.ts

@@ -0,0 +1,5 @@
+import { DayPicker } from 'react-day-picker';
+import 'react-day-picker/style.css';
+export { DayPicker };
+export type { DayPickerProps, Matcher } from 'react-day-picker';
+export declare const dayPicker: import("@xh/hoist/core").ElementFactory<any>;

package/build/types/mobile/cmp/input/DateInput.d.ts

@@ -1,5 +1,6 @@
 import { HoistInputProps } from '@xh/hoist/cmp/input';
 import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
+import { DayPickerProps } from '@xh/hoist/kit/react-day-picker';
 import '@xh/hoist/mobile/register';
 import { LocalDate } from '@xh/hoist/utils/datetime';
 import type { Property } from 'csstype';
@@ -7,26 +8,28 @@ import { ReactElement } from 'react';
 import './DateInput.scss';
 export interface DateInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
     value?: Date | LocalDate;
+    /**
+     * Escape hatch to pass props directly to the underlying react-day-picker calendar.
+     * `disabled` matchers are combined with those generated by minDate/maxDate. Selection
+     * wiring (`mode`, `selected`, `onSelect`) cannot be overridden.
+     */
+    dayPickerProps?: Partial<DayPickerProps>;
     /** True to show a "clear" button aligned to the right of the control. Defaults to false. */
     enableClear?: boolean;
+    /** MomentJS format string for the in-input display of the value. Defaults to `YYYY-MM-DD`. */
+    formatString?: string;
     /** Icon to display inline on the left side of the input. */
     leftIcon?: ReactElement;
     /** Icon to display inline on the right side of the input. Defaults to a calendar icon. */
     rightIcon?: ReactElement;
     /**
-     * Maximum (inclusive) valid date. Applied to the native input's `max` attribute and also
-     * enforced on commit, resetting any out-of-bounds value to `null`.
-     *
-     * Note this is distinct in these ways from FormModel based validation, which will leave an
-     * invalid date entry in place but flag as invalid via FormField. For cases where it is
-     * possible to use FormField, that is often a better choice.
+     * Maximum (inclusive) valid date. Days beyond this bound are disabled within the calendar,
+     * and the calendar cannot be navigated past its month.
      */
     maxDate?: Date | LocalDate;
     /**
-     * Minimum (inclusive) valid date. Applied to the native input's `min` attribute and also
-     * enforced on commit, resetting any out-of-bounds value to `null`.
-     *
-     * See note re. validation on maxDate, above.
+     * Minimum (inclusive) valid date. Days before this bound are disabled within the calendar,
+     * and the calendar cannot be navigated before its month.
      */
     minDate?: Date | LocalDate;
     /** Alignment of entry text within control, default 'left'. */
@@ -35,12 +38,8 @@ export interface DateInputProps extends HoistProps, HoistInputProps, StyleProps,
     valueType?: 'date' | 'localDate';
 }
 /**
- * A mobile-first calendar control for choosing a Date, backed by the browser's native
- * `<input type="date">` element. Tapping the input invokes the OS-provided date picker -
- * a drum/wheel on iOS, a Material date dialog on Android, and a popover calendar on desktop
- * browsers.
- *
- * The in-input display and picker UI follow the user's OS locale. Values are read from and
- * written to the underlying input as ISO-8601 (`YYYY-MM-DD`) strings.
+ * A mobile-first calendar control for choosing a Date. Tapping the input opens a calendar
+ * picker (react-day-picker) hosted within a modal dialog. Selecting a day commits the value
+ * and dismisses the picker.
  */
 export declare const DateInput: import("react").FC<DateInputProps>, dateInput: import("@xh/hoist/core").ElementFactory<DateInputProps>;

package/kit/react-day-picker/index.ts

@@ -0,0 +1,17 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {elementFactory} from '@xh/hoist/core';
+import {ComponentType} from 'react';
+import {DayPicker} from 'react-day-picker';
+import 'react-day-picker/style.css';
+
+export {DayPicker};
+export type {DayPickerProps, Matcher} from 'react-day-picker';
+
+// DayPicker's props are a discriminated union over its selection modes. Cast to ComponentType to
+// keep our element factory ergonomic and produce portable type declarations.
+export const dayPicker = elementFactory(DayPicker as ComponentType<any>);

package/mobile/cmp/input/DateInput.scss

@@ -7,41 +7,22 @@
     flex: none;
   }
 
-  // Size onsen's inner input + label, matching sibling text/number inputs.
-  .text-input,
-  .text-input__label {
+  // Read-only display of the formatted value - tap to open the calendar picker.
+  &__display {
+    flex: 1;
+    min-width: 0;
     height: var(--xh-mobile-input-height-px);
-    padding: 0 var(--xh-pad-px);
-  }
-
-  // Strip native date chrome - Icon.calendar() is the sole affordance.
-  .text-input {
-    appearance: none;
-    -webkit-appearance: none;
-
-    // Center the value vertically within the fixed-height control. On iOS the formatted value sits
-    // in ::-webkit-date-and-time-value, which carries a default margin and aligns to the top of the
-    // content box - line-height centers it (single line, no vertical padding) without disturbing
-    // the horizontal text-align driven by the textAlign prop.
     line-height: var(--xh-mobile-input-height-px);
+    padding: 0 var(--xh-pad-px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
-    // Value sits in this pseudo, which ignores text-align unless inherited.
-    &::-webkit-date-and-time-value {
-      text-align: inherit;
-      margin: 0;
-    }
-
-    &:disabled {
+    &--disabled {
       color: var(--xh-text-color-muted);
-      opacity: 1;
     }
   }
 
-  &__input {
-    flex: 1;
-    min-width: 0;
-  }
-
   &__picker-button {
     flex: none;
     margin: 0 6px;
@@ -55,4 +36,33 @@
     padding-left: 0;
     color: var(--xh-text-color-muted) !important;
   }
+
+  &__picker-dialog {
+    // No title provided - suppress the empty title bar rendered by Dialog.
+    .xh-dialog__title:empty {
+      display: none;
+    }
+
+    // Theme react-day-picker to match the app via its published CSS custom props.
+    .rdp-root {
+      --rdp-accent-color: var(--xh-accent-color);
+      --rdp-accent-background-color: var(--xh-bg-alt);
+      --rdp-today-color: var(--xh-accent-color);
+    }
+
+    // blueprint-datetime.css - currently pulled into all bundles via kit/blueprint - embeds
+    // react-day-picker v8's stylesheet, whose class names partially collide with the v9 markup
+    // rendered here. Reset the clashing v8 rules, most critically the day cells, which v8 styles
+    // as flex-box buttons but v9 renders as table cells.
+    .rdp-day,
+    .rdp-weeknumber {
+      display: table-cell;
+      width: var(--rdp-day-width);
+      max-width: none;
+      height: var(--rdp-day-height);
+      overflow: visible;
+      border: none;
+      border-radius: 0;
+    }
+  }
 }

package/mobile/cmp/input/DateInput.ts

@@ -5,25 +5,40 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {box, hbox} from '@xh/hoist/cmp/layout';
+import {box, div, hbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
+import {fmtDate} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
-import {input} from '@xh/hoist/kit/onsen';
+import {dayPicker, DayPickerProps} from '@xh/hoist/kit/react-day-picker';
 import {button} from '@xh/hoist/mobile/cmp/button';
+import {dialog} from '@xh/hoist/mobile/cmp/dialog';
 import '@xh/hoist/mobile/register';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {isLocalDate, LocalDate} from '@xh/hoist/utils/datetime';
 import {getTestId, TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
+import classNames from 'classnames';
 import type {Property} from 'csstype';
-import {ChangeEvent, ReactElement} from 'react';
+import {castArray, isNil, omitBy} from 'lodash';
+import {ReactElement} from 'react';
 import './DateInput.scss';
 
 export interface DateInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
     value?: Date | LocalDate;
 
+    /**
+     * Escape hatch to pass props directly to the underlying react-day-picker calendar.
+     * `disabled` matchers are combined with those generated by minDate/maxDate. Selection
+     * wiring (`mode`, `selected`, `onSelect`) cannot be overridden.
+     */
+    dayPickerProps?: Partial<DayPickerProps>;
+
     /** True to show a "clear" button aligned to the right of the control. Defaults to false. */
     enableClear?: boolean;
 
+    /** MomentJS format string for the in-input display of the value. Defaults to `YYYY-MM-DD`. */
+    formatString?: string;
+
     /** Icon to display inline on the left side of the input. */
     leftIcon?: ReactElement;
 
@@ -31,20 +46,14 @@ export interface DateInputProps extends HoistProps, HoistInputProps, StyleProps,
     rightIcon?: ReactElement;
 
     /**
-     * Maximum (inclusive) valid date. Applied to the native input's `max` attribute and also
-     * enforced on commit, resetting any out-of-bounds value to `null`.
-     *
-     * Note this is distinct in these ways from FormModel based validation, which will leave an
-     * invalid date entry in place but flag as invalid via FormField. For cases where it is
-     * possible to use FormField, that is often a better choice.
+     * Maximum (inclusive) valid date. Days beyond this bound are disabled within the calendar,
+     * and the calendar cannot be navigated past its month.
      */
     maxDate?: Date | LocalDate;
 
     /**
-     * Minimum (inclusive) valid date. Applied to the native input's `min` attribute and also
-     * enforced on commit, resetting any out-of-bounds value to `null`.
-     *
-     * See note re. validation on maxDate, above.
+     * Minimum (inclusive) valid date. Days before this bound are disabled within the calendar,
+     * and the calendar cannot be navigated before its month.
      */
     minDate?: Date | LocalDate;
 
@@ -56,13 +65,9 @@ export interface DateInputProps extends HoistProps, HoistInputProps, StyleProps,
 }
 
 /**
- * A mobile-first calendar control for choosing a Date, backed by the browser's native
- * `<input type="date">` element. Tapping the input invokes the OS-provided date picker -
- * a drum/wheel on iOS, a Material date dialog on Android, and a popover calendar on desktop
- * browsers.
- *
- * The in-input display and picker UI follow the user's OS locale. Values are read from and
- * written to the underlying input as ISO-8601 (`YYYY-MM-DD`) strings.
+ * A mobile-first calendar control for choosing a Date. Tapping the input opens a calendar
+ * picker (react-day-picker) hosted within a modal dialog. Selecting a day commits the value
+ * and dismisses the picker.
  */
 export const [DateInput, dateInput] = hoistCmp.withFactory<DateInputProps>({
     displayName: 'DateInput',
@@ -80,6 +85,13 @@ export const [DateInput, dateInput] = hoistCmp.withFactory<DateInputProps>({
 class DateInputModel extends HoistInputModel {
     override xhImpl = true;
 
+    @bindable pickerIsOpen: boolean = false;
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
     get valueType(): 'date' | 'localDate' {
         return withDefault(this.componentProps.valueType, 'date');
     }
@@ -97,6 +109,15 @@ class DateInputModel extends HoistInputModel {
         return !!enableClear && !disabled && this.renderValue != null;
     }
 
+    get formatString(): string {
+        return withDefault(this.componentProps.formatString, 'YYYY-MM-DD');
+    }
+
+    get formattedRenderValue(): string {
+        const {renderValue} = this;
+        return renderValue ? (fmtDate(renderValue, this.formatString) as string) : '';
+    }
+
     override toExternal(internal: Date | null): Date | LocalDate | null {
         if (this.valueType === 'localDate') return internal ? LocalDate.from(internal) : null;
         return internal;
@@ -107,43 +128,19 @@ class DateInputModel extends HoistInputModel {
         return isLocalDate(external) ? external.date : (external as Date);
     }
 
-    onInputChange = (ev: ChangeEvent<HTMLInputElement>) => {
-        const str = ev.target.value;
-        if (!str) {
-            this.noteValueChange(null);
-            return;
-        }
-
-        let date = isoToDate(str);
-        if (date && this.isOutsideRange(date)) {
-            this.logDebug('Value exceeded max/minDate bounds on change - reset to null.');
-            date = null;
-            // Force the native input back in sync with the reset value. When the prior value was
-            // also null, the internalValue observable does not change, so no re-render fires and
-            // the out-of-bounds entry would otherwise remain displayed in the control.
-            ev.target.value = '';
-        }
-        this.noteValueChange(date);
-    };
-
-    isOutsideRange(date: Date): boolean {
-        const {minDate, maxDate} = this,
-            stamped = stripTime(date);
-        if (minDate && stamped < minDate) return true;
-        if (maxDate && stamped > maxDate) return true;
-        return false;
+    openPicker() {
+        if (!this.componentProps.disabled) this.pickerIsOpen = true;
     }
 
-    // No-op on browsers without showPicker() (pre-16.4 Safari); tapping the field still opens it.
-    showPicker() {
-        if (this.componentProps.disabled) return;
-        (this.inputEl as HTMLInputElement)?.showPicker?.();
-    }
+    onDaySelect = (date: Date) => {
+        this.noteValueChange(date ?? null);
+        this.doCommit();
+        this.pickerIsOpen = false;
+    };
 }
 
 const cmp = hoistCmp.factory<DateInputModel>(({model, className, ...props}, ref) => {
     const {width, ...layoutProps} = getLayoutProps(props),
-        {renderValue} = model,
         textAlign = withDefault(props.textAlign, 'left'),
         leftIcon = withDefault(props.leftIcon, null),
         rightIcon = withDefault(props.rightIcon, Icon.calendar());
@@ -158,32 +155,60 @@ const cmp = hoistCmp.factory<DateInputModel>(({model, className, ...props}, ref)
         },
         items: [
             leftIcon,
-            input({
-                type: 'date',
-                className: 'xh-date-input__input',
-                value: dateToIso(renderValue as Date) ?? '',
-                min: dateToIso(model.minDate),
-                max: dateToIso(model.maxDate),
-                disabled: props.disabled,
-                tabIndex: props.tabIndex,
+            div({
+                className: classNames(
+                    'xh-date-input__display',
+                    props.disabled ? 'xh-date-input__display--disabled' : null
+                ),
                 style: {textAlign},
+                tabIndex: props.tabIndex,
                 [TEST_ID]: props.testId,
-
-                onChange: model.onInputChange,
-                onFocus: model.onFocus,
-                onBlur: model.onBlur
+                item: model.formattedRenderValue,
+                onClick: () => model.openPicker()
             }),
             clearButton(),
             rightIcon &&
                 box({
                     className: 'xh-date-input__picker-button',
-                    onClick: () => model.showPicker(),
+                    onClick: () => model.openPicker(),
                     item: rightIcon
-                })
+                }),
+            pickerDialog()
         ]
     });
 });
 
+const pickerDialog = hoistCmp.factory<DateInputModel>(({model}) => {
+    let {minDate, maxDate, renderValue} = model,
+        {dayPickerProps} = model.componentProps,
+        disabledDays = [];
+    if (minDate) disabledDays.push({before: minDate});
+    if (maxDate) disabledDays.push({after: maxDate});
+    if (dayPickerProps?.disabled) disabledDays.push(...castArray(dayPickerProps.disabled));
+
+    dayPickerProps = omitBy(
+        {
+            defaultMonth: renderValue,
+            startMonth: minDate,
+            endMonth: maxDate,
+            ...dayPickerProps,
+            mode: 'single',
+            required: true,
+            selected: renderValue,
+            disabled: disabledDays,
+            onSelect: model.onDaySelect
+        },
+        isNil
+    );
+
+    return dialog({
+        isOpen: model.pickerIsOpen,
+        className: 'xh-date-input__picker-dialog',
+        onCancel: () => (model.pickerIsOpen = false),
+        content: dayPicker(dayPickerProps)
+    });
+});
+
 const clearButton = hoistCmp.factory<DateInputModel>(({model}) =>
     button({
         className: 'xh-date-input__clear-button',
@@ -193,8 +218,6 @@ const clearButton = hoistCmp.factory<DateInputModel>(({model}) =>
         omit: !model.showClearButton,
         testId: getTestId(model.componentProps, 'clear-btn'),
         onClick: () => {
-            // Intentionally no refocus after clearing - on iOS/Android, focusing the native
-            // date input reopens the OS picker, which is unwanted UX after an explicit clear.
             model.noteValueChange(null);
             model.doCommit();
         }
@@ -202,28 +225,13 @@ const clearButton = hoistCmp.factory<DateInputModel>(({model}) =>
 );
 
 //---------------------------------
-// Local helpers - date <-> ISO
+// Local helpers
 //---------------------------------
 function resolveBoundDate(val: Date | LocalDate | undefined | null): Date | null {
     if (val == null) return null;
     return isLocalDate(val) ? val.date : stripTime(val);
 }
 
-function isoToDate(iso: string): Date | null {
-    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-    if (!match) return null;
-    const [, y, m, d] = match;
-    return new Date(Number(y), Number(m) - 1, Number(d));
-}
-
-function dateToIso(date: Date | null | undefined): string | undefined {
-    if (date == null) return undefined;
-    const y = date.getFullYear(),
-        m = String(date.getMonth() + 1).padStart(2, '0'),
-        d = String(date.getDate()).padStart(2, '0');
-    return `${y}-${m}-${d}`;
-}
-
 function stripTime(date: Date): Date {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "86.4.1",
+  "version": "86.4.2",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -75,6 +75,7 @@
     "numbro": "~2.5.0",
     "onsenui": "~2.12.8",
     "qs": "~6.15.0",
+    "react-day-picker": "^9.14.0",
     "react-dropzone": "~15.0.0",
     "react-grid-layout": "~2.2.3",
     "react-markdown": "~10.1.0",