codesandbox link below
I am using react-date-range
library that user can use to select start date and end date. After selecting the startDate
and endDate
, I am turning the output date to ISOString and when I send the date to BE, the date is incorrect. It's always one day late. Why is that and how can I fixed it?
If relevant in anyway, I am in Myanmar time zone which is GMT + 630
import { useState } from "react";
import moment from "moment";
import "./styles.css";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css";
import { DateRangePicker } from "react-date-range";
import { add } from "date-fns";
export default function App() {
const [selectionRange, setSelectionRange] = useState({
startDate: new Date(),
endDate: new Date(),
key: "selection"
});
const handleSelection = (range) => {
setSelectionRange(range.selection);
};
const handleSend = () => {
const { startDate, endDate } = selectionRange;
const isoStartDate = startDate.toISOString();
const isoEndDate = endDate.toISOString();
console.log({ isoStartDate, isoEndDate });
};
return (
<div className="App">
<DateRangePicker ranges={[selectionRange]} onChange={handleSelection} />
<button onClick={handleSend}>Send</button>
</div>
);
}
Steps to reproduce
- Select the start date and end date
- Click send and check the console