react-date-range when turned to toISOString(), the output date is 1 day off React

598 Views Asked by At

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>
  );
}


codesandbox demo

Steps to reproduce

  1. Select the start date and end date
  2. Click send and check the console
0

There are 0 best solutions below