parse function in date-fns returns one day previous value

Question

I am trying to parse date using date-fns library but getting one day previous as result. How can I avoid this and get the right result?

start = '2021-08-16'
const parseStart = parse(start, 'yyyy-MM-dd', new Date());

output:

2021-08-15T18:30:00.000Z

Bunin

Welcome to timezones :) new Date("2021-08-15T18:30:00.000Z") should transform it back to your timezone – Endblown

@Endblown I knew this is related to timezones. God, I hate dates. Can you give some references to how can I modify parse with tz. Thanks, man :) – Bunin

Its is giving you the UTC time, convert it to your local time and you will good to go – Kibe

You have date-fns-tz if you need to deal with timezones. And good luck :) – Endblown

Answer 1

Not to have this timezone overhead I'd suggest formatting your date string into ISO string and then using parseISO function of date-fns.

Like this:

import { parseISO } from 'date-fns';

const parseStringDate = (dateString: string): Date => {
  const ISODate = new Date(dateString).toISOString();
  return parseISO(ISODate);
};

parseStringDate("2021-08-19") //2021-08-19T00:00:00.000Z

Reminisce

Hi, if I have a datestring formatted like this "yyyyMMdd", conversion give me an error – Crap

@Crap In your case, I'd suggest reformatting your date string first: const format = (date: string) => { const year = date.substring(0, 4); const month = date.substring(4, 6); const day = date.substring(6, 8); return `${year}-${month}-${day}`; }; – Reminisce

I made exactly like this – Crap

Answer 2

We had a similar problem while trying to use the date-fns format function on a hyphened string date. It was subtracting one day from the date while formating. The solution was in fact to change the hypes for slashes.

const dateString = '2010-08-03'
const date = new Date(dateString.replace(/-/g, '/'))

Vern

const formatDate = (d: string) => format(new Date(d.replaceAll('-', '/').split('T')[0]), 'dd-MM-yyyy') for ISOstrings seems to work – Overweary

Answer 3

I was using in a filter so the initial value was with "-" and i have to replace it for using "/" as well, it work's like a charm

filters: {
    formatedDate(value) {
        value = value.replaceAll('-', '/')
        return format(new Date(value), 'd MMM')
    }
},

and append it in html with a pipe like this

{{ date | formatedDate }}

so the output on the screen was

for a string '2022-10-21'

Squires

Answer 4

None of the solutions worked for me, because the timezone was still not being unconsidered. Instead, I used:

import { isValid } from 'date-fns' 

let removeTimezone = (date) => {
   date = new Date(date);
   return new Date(
     date.valueOf() + date.getTimezoneOffset() * 60 * 1000
   );
};
   
const date = '2023-01-22'
const dtDateOnly = removeTimezone(date)
if(!isValid(dtDateOnly)) console.log("cannot convert to date")
else console.log(dtDateOnly)

Shed

Answer 5

This worked for me (v.2+):

// wrong:
const date = format(new Date('2021-10-01'),'dd/MM/yyyy')
console.log(date) // "30/09/2021"

// ok:
const date = format(new Date('2021/10/01'),'dd/MM/yyyy')
console.log(date) // "01/10/2021"

Piper