« Changelog History


react-datepicker v9.1.0 Release Notes

Release Date: 2025-12-19 // 9 months ago

  • Highlights

    🚀 This release includes important bug fixes, TypeScript improvements, and a new feature. Most notably, it restores date parsing behavior that was accidentally removed in v8.0.0.

    🆕 New Feature

    👍 Allow onClickOutside to prevent calendar from closing (#6179)

    0️⃣ The onClickOutside callback can now prevent the calendar from closing by calling event.preventDefault(). This is useful when using custom portal-based dropdowns in the calendar header.

    <DatePicker                                                                                                                                                                           
    onClickOutside={(event) => {                                                                                                                                                        
      if (myPortalRef.current?.contains(event.target)) {                                                                                                                                
        event.preventDefault(); // Keeps calendar open                                                                                                                                  
      }                                                                                                                                                                                 
    }}                                                                                                                                                                                  
  />

    Full Changelog

    What's Changed

    🆕 New Contributors

    Full Changelog : v9.0.0...v9.1.0


Previous changes from v9.0.0

  • 🌟 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

    🆕 New Contributors

    Full Changelog : v8.10.0...v9.0.0