Replace react-dates on mobile DateInput with native picker#4343
Merged
Conversation
…="date"> The react-dates library was last released in January 2020 and is effectively abandoned. Its React peer dependency caps at v16, generating ~8 yarn install warnings against our React 18 runtime, and the library won't fix known SASS/darken() issues (hence our copied datepicker.css monkey-patch). Usage was narrow - only the mobile DateInput, and only SingleDatePicker. Swapped the internal picker for the browser's native <input type="date">, which delivers the OS-native date UI (wheel on iOS, Material dialog on Android, popover on desktop) with no library surface. Kept the HoistInputModel-backed DateInput component, its public API (value, min/max, valueType, enableClear, icons, textAlign), and the clear-button pattern from TextInput. Breaking removals (no downstream usage found in Toolbox): formatString, initialMonth, placeholder, singleDatePickerProps. Also deleted kit/react-dates/ and the copied datepicker.css. Apps with custom SCSS targeting the old react-dates class names should clean those up - noted in the changelog. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
# Conflicts: # package.json # yarn.lock
The appearance-reset, sizing, and pseudo-element rules were scoped to .xh-date-input__input, which onsen applies to the <ons-input> wrapper rather than the inner native <input>. Retarget them at .text-input / .text-input__label, following the sibling TextInput/NumberInput pattern, so native date chrome is actually stripped and sizing is consistent.
When an out-of-bounds date is selected and reset to null, `setInternalValue` short-circuits if the prior value was also null (the common empty-field case), so no re-render fires and the rejected value stays visible in the native input while the model reads null. Imperatively clear the element value on reset to keep the control in sync with the committed model value.
iOS renders the formatted value in `::-webkit-date-and-time-value`, which carries a default margin and aligns to the top of the fixed-height control. Reset that margin and set `line-height` to center the value, leaving the horizontal `textAlign` behavior intact.
+ Rebuild yarn.lock
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
DateInput's internal picker with the browser's native<input type="date">, removing the abandonedreact-datesdependency (last release Jan 2020, React peer caps at v16, unfixed SASS issue we had been monkey-patching with a copied CSS file).DateInputcomponent,HoistInputModelwiring, and the clear-button pattern are unchanged. Breaking removals onDateInputProps:formatString,initialMonth,placeholder,singleDatePickerProps— all documented in the changelog under 💥 Breaking Changes.yarn installpeer-dep warnings and deletes ~900 lines of copied CSS plus thekit/react-dates/sub-package.Toolbox mobile uses only baseline
DateInputprops (minDate,maxDate,textAlign,valueType); no Toolbox changes required.Test plan
FormPageopens the OS-native picker (iOS wheel, Android Material dialog) — tested on a real device, not the emulator.minDate/maxDateconstraints enforced via native UI and on programmatic commit; out-of-range values reset tonull.enableClearbutton clears value and does not reopen the OS picker.valueType: 'localDate'round-trips correctly;valueType: 'date'(default) unchanged.yarn installno longer emitsreact-dates-related peer warnings.Hoist P/R Checklist
developbranch as of last change.breaking-changelabel.DateInputPropsTSDoc refreshed,kit/README.md+docs/test-automation.mdupdated).📱 Addendum — running the Toolbox dev build on a physical device from a Mac
In both cases you need two things: (1) the device must reach the Mac's dev server, and (2) a remote inspector to debug. The approach differs by platform because Android and iOS expose
localhostdifferently.Android (Chrome) — USB port forwarding (keeps
localhost)Reach the dev server:
chrome://inspect/#devicesand ensure Discover USB devices is checked.3000→localhost:3000, and enable it.http://localhost:3000/mobile. Traffic tunnels over USB to the Mac, so the standardyarn startWithHoist(bound tolocalhost) works unchanged.Inspect: back in
chrome://inspect, the page appears under the device — click inspect for full remote DevTools.iOS (Safari) — LAN access (no Chrome-style port forwarding)
Reach the dev server over Wi-Fi, since iOS has no USB port forwarding:
yarn startWithHoistAndIp(Toolbox script — runs webpack with--env devHost=$(ipconfig getifaddr en0)).http://<mac-LAN-ip>:3000/mobile(the IP the start script prints).Inspect via Safari Web Inspector over USB:
Generated with Claude Opus 4.7 (1M context)