afialapis / reactstrap-date-picker

A Reactstrap based, zero dependencies, date picker
MIT License
12 stars 6 forks source link

Incorrect date parsing #21

Closed wholegroup closed 2 years ago

wholegroup commented 2 years ago

Let's assume I have a date which is 2022-08-02 and my timezone is Pacific/Fiji (UTC+12) I need to set this value for DatePicker. I convert the data into ISO format 2022-08-02T12:00:00.000Z and see 2022-08-03 in DatePicker

because

new Date('2022-08-02T12:00:00.000Z').toLocaleString('en-US', { timeZone: 'Pacific/Fiji' }) 

give me '8/3/2022, 12:00:00 AM'

The issue is that new Date().toString() converts data according user timezone and this can return yesterday/tomorrow

https://github.com/afialapis/reactstrap-date-picker/blob/d7a1c7acaf4e289bf31ba833415c32237d718bc5/src/util/getDateFromIsoString.js#L3-L4

p.s. I believe DatePicker should operate with only date and doesn't look to time/timezone. And also DatePicker should return only date but not time. Current version returns '2022-08-01T12:00:00.000Z'.

afialapis commented 2 years ago

reactstrap-date-picker receives ISO strings. So, yes, '2022-08-02T12:00:00.000Z' is October 3rd in Fiji.

And I don't see how this is wrong.

wholegroup commented 2 years ago

@afialapis sorry for not clearly description pls re-open the issue

Set in Chrome 'Pacific/Fiji' Locale (doesn't work in incognito mode), set any date and get invalid date/time. This is because reactstrap-date-picker doesn't respect user timezone. That's why there is difference between dates in the screenshot

Screenshot 2022-10-18 at 09 12 42

https://codesandbox.io/s/dazzling-lalande-nz80bf?file=/src/App.js

import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import { DatePicker } from "reactstrap-date-picker";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div>
      <div className="App">
        <DatePicker id="fiji" onChange={(v, _f) => setValue(v)} />
      </div>
      <div>{value}</div>
    </div>
  );
}

my point is
work with time in different timezones is very tricky, and pretty easy to make mistake i see it very often in my practice well, I believe DatePicker should operate with only date and doesn't look to time/timezone.

But if you need to work with ISO strings, pls make reactstrap-date-picker returns T00:00:00.000Z instead of T12:00:00.000Z. It helps to catch issues easier.