🌟 Major New Features
🌍 Timezone Support (Finally!)
The most requested feature is here! Add the timeZone prop to display and handle dates in any timezone. Works with date-fns-tz as an optional peer dependency. <DatePicker timeZone="America/New_York" />
⏰ Time Selection with Date Ranges
showTimeSelect and showTimeInput now work beautifully with selectsRange! Select time for both start and end dates independently. 🎉
🎁 New Props Under the Tree
- 🎯
popperTargetRef- Custom popper positioning for advanced layouts - 📍
monthHeaderPosition- Control month header placement (top, middle, bottom) - 🗓️
renderCustomDayName- Customize weekday header rendering - 📝
formatMultipleDates- Custom formatting for multi-select dates - ♿
aria-label- Better accessibility support
🔧 Bug Fixes & Improvements
- 🎯 Navigate calendar view when typing partial dates
- 📅 Calendar view updates when selected/startDate props change programmatically
- 🕐 Fixed infinite height growth in time picker
- 🗓️ Fixed month view jump when selecting from second calendar in range mode
- ✍️ Allow typing dates before 1800 when minDate permits
- 🌐 Parse holiday date strings as local time (no more timezone shifts!)
- 📐 Use em units internally - easily inherit font size from parent!
- 🎨 Fixed in-selecting-range highlight for days outside current month
- 🔗 Hiding popper arrow now properly removes offset
- 🔄 Fixed preSelection updates for selectsRange input changes
- 📊 Improved source maps (no more Webpack warnings!)
- 🏷️ Better TypeScript discriminated union type inference
🛠️ Under the Hood
- 🚀 Node 24.x LTS - Upgraded CI to latest LTS
- 📦 Updated dependencies across the board
- 🧪 Significantly improved test coverage
- 📚 New timezone documentation
💫 Happy Holidays!
Thank you to all contributors who made this release possible! May your dates always be in the right timezone! 🎅🎄
What's Changed
- feat: add aria-label prop support for DatePicker by @martijnrusschen in #6057
- fix: reset monthSelectedIn when changeMonth is called in custom header by @martijnrusschen in #6058
- feat: add formatMultipleDates prop to DatePicker by @kykim00 in #6067
- fix: Hiding popper arrow should remove offset by @tejas-agravat-dev in #6071
- fix: prevent in-selecting-range highlight for days outside current month by @martijnrusschen in #6073
- fix: showTimeSelect now works with selectsRange (#4332) by @martijnrusschen in #6074
- fix: add explicit return type to TabLoop render method (#6075) by @martijnrusschen in #6077
- fix: improve DatePickerProps discriminated union type inference by @martijnrusschen in #6078
- fix: update preSelection when input changes for selectsRange by @martijnrusschen in #6101
- feat: Add monthHeaderPosition prop for flexible calendar header placement by @gnato in #6092
- feat: add popperTargetRef prop for custom popper positioning by @martijnrusschen in #6102
- fix: prevent infinite height growth in time picker by @martijnrusschen in #6104
- fix: prevent month view jump when selecting from second calendar in range mode by @martijnrusschen in #6103
- Fix the broken doc-site example - Custom input with popper positioning by @balajis-qb in #6110
- fix: allow manually typing dates before 1800 when minDate permits by @martijnrusschen in #6107
- fix: parse holiday date strings as local time to prevent timezone shift by @martijnrusschen in #6106
- fix: Inline source content in source maps to prevent Webpack warnings by @martijnrusschen in #6112
- fix: Update calendar view when selected/startDate props change programmatically by @martijnrusschen in #6111
- fix: Navigate calendar view when typing partial dates (#5459) by @martijnrusschen in #6113
- fix: support time selection with selectsRange for showTimeInput by @martijnrusschen in #6079
- fix: use em units for internal sizing to allow font-size inheritance by @martijnrusschen in #6076
- Timezone support by @martijnrusschen in #6068
New Contributors
Full Changelog: v8.10.0...v9.0.0
Contributors
martijnrusschen, gnato, and 3 other contributors