11

Parse, Validate, Manipulate, and Display Dates and Times in JavaScript with Day....

 4 years ago
source link: https://alligator.io/js/dayjs/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

With it’s last release nearly a year ago, the most recent commit over 6 months ago, and hundreds of open bugs and pull requests, it’s starting to seem likeMoment.js is slowing down and it’s time to shop for more actively maintained alternatives. Insert Day.js, a minimalist date and time library weighing in at 2kB that provides a mostly Moment.js-compatible API for ease of transition.

Getting Started with Day.js

To get started with Day.js in your Node.js project, simply add the dependency with either npm or yarn :

$ npm install dayjs --save
# or
$ yarn add dayjs

Then simply include it in your script:

const dayjs = require('dayjs');

Day.js also works in modern browsers and can be self-hosted or included by way of a CDN provider like cdnjs .

ZjyQvuu.png!web

This sponsored banner helps support the site :pray:

Parsing Dates and Times

Parsing a date and time string into a Day.js object is easy and supports strings, numbers, native JavaScript Date objects as well as other Day.js objects:

let date = dayjs('2019-12-27');
date = dayjs('20191227');
date = dayjs(new Date(2019, 11, 27));
date = dayjs(day('2019-12-27'));

You can even omit the string entirely to default the Day.js object to the current date and time:

date = dayjs();

Validating Dates and Times

Once you’ve parsed a date and time with Day.js you can leverage the isValid() method to determine if what you passed in was actually something Day.js could parse:

dayjs('2019-12-27').isValid(); // true
dayjs('tomorrow').isValid(); // false

Additionally, if you were to attempt to display a Day.js object that was fed with a date that couldn’t be parsed, the return will be Invalid Date .

Displaying Dates and Times

The .format() method allows us to take the Day.js object and convert it into a human-readable string. It supports your common set of date and time variables, like YYYY for a full year, and MM and mm for month and minutes respectively.

For those times when you want to include additional text that you don’t want to be converted to a date or time part, you can “hug” the string with brackets [ and ] :

dayjs().format('YYYY-MM-DD [at] HH:mm:ss');
dayjs().format('HH:mm:ss [on] YYYY-MM-DD');

Manipulating Dates and Times

In a previous section we attempted to pass in the string tomorrow and it was considered an invalid date. To be able to get the date and time for tomorrow, we can start with today’s date and time, and add a day to it:

dayjs().add(1, 'day').format('YYYY-MM-DD');

In addition to adding a day , you can also add month and year and even time-based intervals like hour and minute :

dayjs().add(1, 'hour').format('YYYY-MM-DD HH:mm:ss');
dayjs().add(30, 'minute').format('YYYY-MM-DD HH:mm:ss');
dayjs().add(3, 'month').format('YYYY-MM-DD HH:mm:ss');
dayjs().add(3, 'year').format('YYYY-MM-DD HH:mm:ss');

You can even chain it to do things like add multiple intervals:

dayjs().add(1, 'hour').add(30, 'minute').format('YYYY-MM-DD HH:mm:ss');

Don’t you worry, there’s a subtraction method as well:

dayjs().subtract(4, 'hour').format('YYYY-MM-DD HH:mm:ss');

Comparing Dates and Times

One of the more complex tasks that comes up pretty regularly in development is the comparison of dates and times. Day.js makes it easy be providing helper methods such as isBefore() and isAfter() :

const date1 = dayjs('2020-01-1');
const date2 = dayjs();

if (date1.isBefore(date2)) {
  console.log('Date 1 falls before date 2');
}
else if (date1.isAfter(date2)) {
  console.log('Date 2 falls before date 1');
}
else if (date1.isSame(date2)) {
  console.log('Date 1 and date 2 are the same');
}

Conclusion

With it’s familiar interfacing and active maintenance (even during the holidays), Day.js seems like a great alternative for Moment.js.

Give it a try on your next project, I know I will be.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK