👀 Views: 427 💬 Answers: 1 📅 Created: 2025-06-22

react datepicker timezone JavaScript

I'm using the `react-datepicker` library (version 3.8.0) to handle date inputs in my React application. When I attempt to set a date in my state using an ISO 8601 string with a timezone offset, the date picker does not seem to parse the string correctly, leading to unexpected date representations. For example, the string `"2023-10-01T12:00:00-05:00"` should represent October 1st, 2023, at noon in the UTC-5 timezone. However, when I set this to the state and use it as the `selected` prop in `<DatePicker>`, the displayed date changes unexpectedly as if the timezone offset is ignored. Here’s the code snippet I’m using: ```javascript import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; const DateSelector = () => { const [startDate, setStartDate] = useState(new Date('2023-10-01T12:00:00-05:00')); const handleChange = (date) => { setStartDate(date); }; return ( <DatePicker selected={startDate} onChange={handleChange} showTimeSelect dateFormat='Pp' /> ); }; export default DateSelector; ``` I’ve also tried to convert the ISO string to a JavaScript Date object using `new Date()` directly, but the behavior remains the same. I expected the `DatePicker` to respect the timezone offset and show the corresponding local time correctly based on the user's timezone. Instead, the displayed date seems to revert to UTC, leading to an apparent confusion when users select dates. I have double-checked the timezone settings of my computer and they seem correct. Is there something I’m missing here, or is this a known limitation of the `react-datepicker` library? Any help would be greatly appreciated! Any examples would be super helpful.