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
8
votes
2 answers

RangeError: locale must contain localize property when using Angular material date picker with date fns

I have the following configuration on the app-module.ts import { ReactiveFormsModule } from '@angular/forms'; import { DateFnsAdapter, MatDateFnsModule } from '@angular/material-date-fns-adapter'; import { DateAdapter, MatDateFormats,…
8
votes
2 answers

date-fns format time in 24 hour format

I'm using date-fns in a React project. const sampleText = 'Tue Aug 03 2021 18:49:11 GMT+0800'; const sampleDate = new Date(sampleText); format(sampleDate, 'hh:mm') This returns '06:49'. How can I get this to return '18:49' instead?
Gen Tan
  • 858
  • 1
  • 11
  • 26
8
votes
1 answer

How to detect timezone abbreviation using date-fns-tz?

I want to print timeZone abbreviation like: IST, UTC, PST, MST, CST, EST, etc... I'm migrating my code from momentJS to date-fns and having the following issue. When I was using momentJS everything was working as expected. For example, the code…
Devmix
  • 1,599
  • 5
  • 36
  • 73
8
votes
0 answers

startOfMonth returns last day of month before

So it's pretty straight forwards: import startOfMonth from 'date-fns/start_of_month'; export const getFirstDayThisMonth = date => { const firstDay = startOfMonth(date); return firstDay; }; given input (for example): 1987-02-02T00:00:00.000Z it…
MrJalapeno
  • 1,532
  • 3
  • 18
  • 37
7
votes
6 answers

isSameOrBefore implementation for date-fns

As moment is deprecated, I decided to stash moment from my entire project and thinking to use datefns as a replacement. While I was going through the code file, I came across a line which is saying, moment(date1).isSameOrBefore(date2, year); I…
Ashish Bairwa
  • 757
  • 1
  • 6
  • 19
7
votes
2 answers

date-fns How to get the end of day with the format 00:00:00 insted of 23:59:59

I am replacing moment by date-fns and I would like to have the endOfDay formatted as moment.js does. I mean moment.js gives me this 00:00:00 date-fns gives me this 23:59:59 moment.js moment().endOf('isoWeek').startOf('day').toDate() //output:…
Sargentogato
  • 85
  • 1
  • 2
  • 9
7
votes
0 answers

What is the difference between local, non-local, and ISO in unicode date fields?

I am using the date-fns library to format a javascript date object to a specific format. date-fns uses the Unicode date field symbols. In this table documenting the symbols, there is a distinction between "local" (ie, local day of week: e) and…
InspectorDanno
  • 935
  • 2
  • 12
  • 23
7
votes
1 answer

date-fns addBusinessdays but include predefined holiday-dates

So basicly I am trying to use addBusinessDays(new Date(), 3) which sets a startdate without taking weekends into account. However I need to make use of a list of dates ( holidays ) into this aswell. I can't find any documentation on how to add those…
Joelgullander
  • 1,624
  • 2
  • 20
  • 46
7
votes
3 answers

TypeError: format is not a function in date-fns

I am migrating from moment to date-fns and following docs on the official site. I have installed date-fns from npm and when I try to use I get this error: TypeError: format is not a function I have tried import, require but they all give same…
Rohit Kumar
  • 79
  • 1
  • 2
  • 5
6
votes
2 answers

Date-fns format distance is not in correct words

I am facing a problem with the UI and want to show the timestamp distance into 3 hours ago and 4 hours ago etc. The timestamp coming from the server with a property named createdAt which has the following value. createdAt:…
Ven Nilson
  • 969
  • 4
  • 16
  • 42
6
votes
1 answer

chartjs time cartesian axis adapter and date library setup

I am trying to implement this tutorial and could not get it done. https://www.chartjs.org/docs/latest/axes/cartesian/time.html Input: list of objects with (time,value) attributes. Time is Integer that means unix time in seconds; value is Float. The…
vadtam
  • 343
  • 4
  • 15
6
votes
5 answers

parse function in date-fns returns one day previous value

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…
Asit Prakash
  • 341
  • 3
  • 9
6
votes
2 answers

date-fns: how to define a default locale app-wide?

It's pretty straightforward to set a locale in a per-function call basis: import { formatRelative, subDays } from 'date-fns' import { ptBR } from 'date-fns/locale' formatRelative(subDays(new Date(), 3), new Date(), { locale: ptBR }) But how do I…
darksoulsong
  • 13,988
  • 14
  • 47
  • 90
6
votes
1 answer

material-ui LocalizationProvider for a remote time zone

My app needs material-ui date and time pickers to operate on a remote time zone specified by the server. I'd like the today circle on the date picker to actually indicate today in the remote time zone, and I'd like to translate the datetimes in the…
Scott Lamb
  • 2,266
  • 1
  • 19
  • 21
6
votes
4 answers

How to use Date-FNS in VueJS?

I'm new to Date-FNS and I need to get this example to work in VueJS: import { format, formatDistance, formatRelative, subDays } from 'date-fns' format(new Date(), '[Today is a] dddd') //=> "Today is a Wednesday" formatDistance(subDays(new Date(),…
Tom
  • 5,588
  • 20
  • 77
  • 129
1 2
3
33 34