feat(components): add DatePicker composite component#9958
Merged
originalix merged 20 commits intoOneKeyHQ:xfrom Feb 3, 2026
Merged
feat(components): add DatePicker composite component#9958originalix merged 20 commits intoOneKeyHQ:xfrom
originalix merged 20 commits intoOneKeyHQ:xfrom
Conversation
Add DatePicker composite component with single date, date range, year, month, and multi-select modes. Built on @rehookify/datepicker with OneKey Popover integration for web/desktop floating panels.
- Refactor Calendar to support dual panel layout for range mode - Update DayCell with proper range highlight styling - Replace custom trigger with Input component - Make CalendarHeader nav buttons optional for dual panel
- Compact layout: smaller day cells (32px), tighter spacing - Inline view switching (day/month/year) with slide animations - Range picker: dual calendar on desktop, single on mobile - Fix: non-current-month dates use $textDisabled, no range highlight - Fix: year/month picker now fills value on click - Fix: disabled state blocks popover open - Fix: range picker reopens with end date on right panel - Add clear button with stopPropagation, calendar icon hover state
- Rename useDateAnimation.tsx to .ts (no JSX) - Use relative import path in type.ts - Replace requestAnimationFrame with useRef+useEffect for RN compat - Replace hardcoded height 36 with $9 token - Remove empty onPress handler in DatePickerTrigger - Pass onYearSelect/onMonthSelect through CalendarPanel
…entions - Add optional `title` prop to all picker variants (was hardcoded) - Add `renderTrigger` support for custom trigger UI - Change `floatingPanelProps` type to `IPopoverProps['floatingPanelProps']` - Use `export * from './type'` instead of explicit type re-exports - Move `onOpenChange` to base props, add nav boundary constraints - Add today dot indicator, same-day range styling, disabled date band - Disable month/year drill-down in range dual-panel mode
- Replace locale-dependent Date string parsing with numeric month/year from $date - Increase day cell height ($8→$10), month/year grid height ($9→$11), weekday row height ($6→$8) for better mobile touch targets - Set week start to Monday via calendar.startDay across all picker variants
- Fix CalendarPanel height collapse in single-panel mode by conditionally
applying flex={1}/flexBasis={0} only for dual-panel range layout
- Remove internal slide animations (useDateAnimation deleted)
- Simplify conditional logic across Calendar, DayCell, CalendarHeader
- Extract common picker config into createPickerConfig helper
- Add fullWidth/hideOutOfMonth props for range mode improvements
- Make CalendarHeader responsive with useMedia
- Unify date format to yyyy-MM-dd, month to yyyy-MM
- Hide Sheet header on all picker types (showHeader={false})
Extract DayGrid, MonthGrid, YearGrid, and CalendarPanel into individual files for better maintainability and easier modification. Calendar.tsx now serves as the assembler component only.
Replace all hardcoded English strings in DatePicker with ETranslations keys (global_select_date, global_select_date_range, global_select_year, global_select_month, global_select_dates, global_number_dates_selected). Also fetch latest locale translations.
- Extract usePickerState hook for common open/close state management - Extract usePickerI18n hook for i18n fallback pattern - Extract PickerPopover wrapper to eliminate repeated Popover setup - Extract renderPickerTrigger helper for trigger rendering logic - Extract SINGLE_PANEL_PROPS constant for shared panel dimensions - Reduces ~100 lines of duplicated code across 5 picker variants
… code - Extract shared callOnClick helper into utils.ts (same pattern as Tabs) - Simplify conditional logic in CalendarHeader and CalendarPanel - Extract named variables to reduce nested ternaries - Wrap hasValue in useMemo in DatePickerTrigger - Reorder variable declarations for better logical grouping in DayCell
yikZero
requested review from
ezailWang,
huhuanming,
originalix,
revan-zhang and
sidmorizon
as code owners
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub. |
|
All alerts resolved. Learn more about Socket for GitHub. This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored. |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
originalix
approved these changes
Feb 2, 2026
huhuanming
approved these changes
Feb 2, 2026
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
4 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
Add a new cross-platform
DatePickercomposite component to@onekeyhq/componentswith 5 selection modes: single date, date range, year, month, and multi-select.Changes
packages/components/src/composite/DatePicker/(11 files)DatePicker.Basic— single date selectionDatePicker.Range— date range selection with dual-panel on desktopDatePicker.Year— year grid selectionDatePicker.Month— month grid selectionDatePicker.MultiSelect— multiple date selection@rehookify/datepickerfor headless date picker state managementglobal_select_date,global_select_date_range,global_select_year,global_select_month,global_select_dates,global_number_dates_selected)DatePickerstory page with all 5 modes demonstratedDesign Decisions
withStaticPropertiesusagePopoverfor trigger/calendar popup, consistent with existing componentsmdbreakpoint), single panel on mobileuseMediafor responsive sizing,useIntlfor i18n — same as other components