React Calendar value getting stored with one day less in database

Question

import React, { useState, useEffect } from "react";
import style from "./step1.module.css";
import { Calendar } from "react-date-range";

function Step2({ onNextClick, step }) {
  const [date1, setDate1] = useState({ dateFilled: new Date().toJSON().split("T")[0] });
  const [date2, setDate2] = useState({ dateOfDeath: new Date().toJSON().split("T")[0] });

 //const [date1, setDate1] = useState({ dateFilled: new Date()});
 //const [date2, setDate2] = useState({ dateOfDeath: new Date()});

  const year = new Date(date1?.dateFilled + "T00:00:00").getFullYear();
  const month = new Date(date1?.dateFilled + "T00:00:00").getMonth();
  const day = new Date(date1?.dateFilled + "T00:00:00").getDate();
  const filledDate = new Date(year, month, day, 0, 0, 0, 0);
  //filledDate.setHours(0,0,0,0);

  const year1 = new Date(date2?.dateOfDeath + "T00:00:00").getFullYear();
  const month1 = new Date(date2?.dateOfDeath + "T00:00:00").getMonth();
  const day1 = new Date(date2?.dateOfDeath + "T00:00:00").getDate();
  const deathDate = new Date(year1, month1, day1, 0, 0, 0, 0);
  //deathDate.setHours(0,0,0,0);
  const values = { filledDate, deathDate };

  const onChange1 = (date) => {
    //const options = { timeZone : 'America/Los_Angeles'};
    setDate1({ dateFilled: JSON.stringify(date).slice(1, 11) });
    const dateA = { dateFilled: JSON.stringify(date).slice(1, 11) };
    const year = new Date(dateA?.dateFilled + "T00:00:00").getFullYear();
    const month = new Date(dateA?.dateFilled + "T00:00:00").getMonth();
    const day = new Date(dateA?.dateFilled + "T00:00:00").getDate();
    const newFilledDate = new Date(year, month, day, 0, 0, 0, 0) ;
    //newFilledDate.setHours(0,0,0,0);
    onNextClick({
      filledDate: newFilledDate || new Date(),
      newDeathDate: deathDate || new Date(),
    });
  };
  
  const onChangeDate  = (date) => {
    console.log(date.toISOString());
    setDate1({ dateFilled: date.toISOString() });
    const newFilledDate = date.toISOString();
    onNextClick({
      filledDate: newFilledDate || new Date(),
      newDeathDate: deathDate || new Date(),
    });
  };

  const onChange2 = (date) => {
    setDate2({ dateOfDeath: JSON.stringify(date).slice(1, 11) });
    const dateB = { dateOfDeath: JSON.stringify(date).slice(1, 11) };
    const year = new Date(dateB?.dateOfDeath + "T00:00:00").getFullYear();
    const month = new Date(dateB?.dateOfDeath + "T00:00:00").getMonth();
    const day = new Date(dateB?.dateOfDeath + "T00:00:00").getDate();
    const newDeathDate = new Date(year, month, day, 0, 0, 0, 0);
    //newDeathDate.setHours(0,0,0,0);
    onNextClick({
      filledDate: filledDate,
      newDeathDate: newDeathDate,
    });
  };
  return (
    <div className={style.step2Main}>
      <div className={style.calendarsCont}>
        <div className={style.calenderLeft}>
          <h4 className={style.dateHeading}>
            <p> Date Filed</p>
            {`${year}-${month + 1}-${day}`}
          </h4>
          <Calendar date={filledDate} dateDisplayFormat='yyyy-MM-dd' onChange={onChange1} />
        </div>
        <div className={style.calenderRight}>
          <h4 className={style.dateHeading}>
            <p> Date of Death</p>
            {`${year1}-${month1 + 1}-${day1}`}
          </h4>
          <Calendar date={deathDate} dateDisplayFormat='yyyy-MM-dd'  onChange={onChange2} />
        </div>
      </div>
    </div>
  );
}

export default Step2;

The above code allows the User to select two dates. It works fine when the User enters from the US timezone. However, if the user is entering data from other timezones like say India \ Philippines it stores data for one day less. If I say select 4th July, it saves 3rd July in the database.

In the first line of the Step2 function, the new Date() returns the selected date with India/Philippines timezone, and even if I take away the time zone it still saves the date with one day less value. If I pass the ISO string instead of the date value, the Date Range picker gives Invalid Interval value error. Looks like it is expecting the date only. Is there any way to pass the selected date as it is? Users can enter data from any timezone and they will be selecting dates from the previous year/months mostly and it should be entered into the database as it is.

I tried converting it to JSON or adding "T00:00:00" at the end but the date is still getting stored incorrectly. I am not sure why the react-date-range picker was selected as control instead of React's date picker.

score 0 · Answer 1 · answered Mar 20 '23 at 06:37

This issue has nothing to do with react calendar package. This is something to do with JavaScript date conversion as it uses UTC time zone to covert the dates. For an example if you use following codes after setting Indian time zone and use time zone in your PC, the result will be like

console.log(new Date("Mar 20 2023").toISOString())
//In US time zone 2023-03-20T18:30:00.000Z
//In Indian time zone 2023-03-19T18:30:00.000Z

This might help Is the Javascript date object always one day off?

React Calendar value getting stored with one day less in database

1 Answers1