Questions tagged [date-fns]

date-fns is a JavaScript date/time library that provides a comprehensive, simple and consistent toolset for manipulating JavaScript dates in a browser and Node.js.

date-fns provides a comprehensive, simple and consistent toolset for manipulating JavaScript dates in a browser and Node.js.

date-fns supports both Flow and TypeScript and it works well with module bundlers such as webpack, Browserify, or Rollup and also supports tree-shaking.

Features:

date-fns helps:

  • showing JavaScript dates in a given format
  • checking if a date isAfter or isBefore another
  • adding or removing units of time (addHours, subHours, addMinutes, subMinutes etc)

and it offers other functionalities listed in the documentation.

Example:

Represent a given date in middle-endian format:

var result = format(
  new Date(2014, 1, 11),
  'MM/DD/YYYY'
)
//=> '02/11/2014'

Resources:

496 questions
94
votes
9 answers

date-fns | How do I format to UTC

Problem It looks like when I use the format() function, it automatically convert the original UTC time into my timezone (UTC+8). I have been digging through their docs for hours and couldn't seem to find a way to default it to UTC time. import {…
Patrick Mao
  • 1,013
  • 1
  • 8
  • 12
67
votes
34 answers

Difference between two dates in years, months, days in JavaScript

How to get the difference between two dates in years, months, and days in JavaScript, like: 10th of April 2010 was 3 years, x month and y days ago? There are lots of solutions, but they only offer the difference in the format of either days OR…
Chris
  • 3,756
  • 7
  • 35
  • 54
49
votes
6 answers

Format a duration ( from seconds ) using date-fns

Given int value 1807, format to 30:07 using date-fns? Yes, I know this can be achieved with vanilla js, but is this possible using date-fns?
Simon
  • 2,484
  • 6
  • 35
  • 54
43
votes
2 answers

Time zone issue involving date fns format()

const dt = new Date('2017-12-12'); console.log(format(dt, 'YYYY-MM-DD')); The above code logs 2017-12-11 in the US, but 2017-12-12 in India. I followed this github thread here and tried out things but am not getting the desired results. My…
codeX
  • 4,842
  • 2
  • 31
  • 36
37
votes
3 answers

Module not found: Can't resolve '@date-io/date-fns'

I'm using React Material UI and I get this error : Module not found: Can't resolve '@date-io/date-fns'. Here are the dependencies that I have in my package.json file : "dependencies": { "@date-io/date-fns": "^2.0.0", "@material-ui/core":…
Ala Ben Aicha
  • 1,155
  • 2
  • 14
  • 30
35
votes
2 answers

Get the current date using date-fns in ISO-8601 format

I want to get a ISO-8601 format of last hour:minute:secounds from the current day using date-fns lib: I'm using: endOfDay(new Date()); Fri Sep 14 2018 23:59:59 GMT-0300 So add toISOString() to get it in ISO format: endOfDay(new…
Joel
  • 974
  • 2
  • 10
  • 18
34
votes
2 answers

How to format date with date-fns?

I've been trying to format a date using date-fns but I keep failing. Basically I have it working just fine with momentJS but not with date-fns: Here's my date: "10-13-20" // month, day, and year Now with momentJS it works just fine like this: let…
Devmix
  • 1,599
  • 5
  • 36
  • 73
30
votes
3 answers

Receive a string and verify if it is a valid date with date-fns

I just want to validate if the string that i received is a valid date using date-fns. I gonna receive a date like this '29/10/1989', BR date. I want to transform it into 29-10-1989 and check if its valid. Anyone can help me with this? const…
Rafael de Carvalho
  • 501
  • 1
  • 5
  • 10
23
votes
4 answers

Parse and format date in string

I'm trying out date-fns v2. I want to format a date in a string by using the toDate and format functions: import { format, toDate } from 'date-fns' format(toDate('2019-02-11T14:00:00'), 'MM/dd/yyyy') But get the following error: RangeError:…
Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
22
votes
3 answers

date-fns: Difference between parseISO(string) and new Date(string)?

I'm trying out date-fns v2. I got some errors when I ran: parseISO("Apr 9, 2020, 12:00:00 am"); or parseISO("Apr 9, 2020, 12:00:00 am", "MMM M, YYYY, hh:mm:ss aaaa"); but this worked fine: new Date("Apr 9, 2020, 12:00:00 am"); I'm trying to…
Dev01
  • 13,292
  • 19
  • 70
  • 124
20
votes
2 answers

How to guess user's timezone using date-fns?

I have a requirement, where I need to show a user's time in their local time zone. This needs to be done using date-fns. The following code checks the current time and then given a timezone converts it into local time as per the time zone. const {…
asanas
  • 3,782
  • 11
  • 43
  • 72
18
votes
4 answers

Material UI DatePicker Showing Wrong Date

The displayed date in Material UI Pickers is 1 day behind the selected date: I selected 25th, the value in formik is 25th but the value displayed on the form is 24th. "@date-io/date-fns": "^1.3.13", "date-fns": "^2.9.0", import DateFnsUtils…
Batman
  • 5,563
  • 18
  • 79
  • 155
17
votes
2 answers

How to set the placeholder text of the MUI DatePicker?

How can I set the placeholder text of the MUI DatePicker. The text that is displayed when deleting the text in the input field. I want to set the text to "tt.mm.jjjj" and I always the following error message: Format string contains an unescaped…
vuvu
  • 4,886
  • 12
  • 50
  • 73
17
votes
2 answers

How do you format a datetime to am/pm, without periods, when using date-fns version 2.x?

Version 2.x of the excellent date package date-fns only has these built-in am/pm formats. How can I format the lower case am/pm without the periods?
GollyJer
  • 23,857
  • 16
  • 106
  • 174
17
votes
2 answers

Getting duration between two dates in date-fns in days:hrs:mins:secs format

I'm trying to display a count-down timer using date-fns library and doing things the below way, unable to find the solution in react. Expected output: 60 days : 8 hours : 9 minutes : 5 seconds remaining const finishTime = new…
beta programmers
  • 513
  • 2
  • 8
  • 23
1
2 3
33 34