DEV Community

Raynaldo Sutisna
Raynaldo Sutisna

Posted on

πŸ“… Javascript Datetime πŸ“…

Introduction

Have you ever felt annoyed when you should code related to Datetime? Maybe you have not experienced it yet, but when you get there, you will be thankful to read this blog. I decided to write this post because I feel upset when I see a DateTime format. In this blog post, I will cover the timestamp format, Javascript Date, and my favorite Datetime NPM packages.

ISO 8601 and Unix Timestamp

I wish I know about these two main formats early before I work in my company. I experienced seeing these formats and I was so confused. What are the differences between these two?

// ISO 8601
2022-03-29T12:04:06.179Z 
2022-03-29T12:04:06.179+07:00

// Unix Timestamp
1648555411546
Enter fullscreen mode Exit fullscreen mode

ISO 8601

ISO 8601 Format

For ISO 8601 format, the confusing thing is the last indicator, which is z or +07:00. z means Zulu time, and Zulu time is the same like UTC (Universal Time Coordinated) or GMT+0 (Greenwich Mean Time Zone)

Zulu Time

How about Unix Timestamp?

Unix Timestamp is always based on UTC.

One interesting fact that you must know about Unix Timestamp is Unix Timestamp will end on January 19, 2038, at 3:14 a.m. UTC.
Why? It is because the Unix Timestamp data type is using a signed integer, which is traditionally 32 bits. If your logical thinking says that Unix Timestamp has a start time, you are absolutely correct. It started on January 1st, 1970 at 00:00:00 UTC. If you have heard about Unix Epoch Time, that refers to the start time of Unix Timestamp. Read about the definition of Epoch here. I even haven't been born yet, and hopefully, I can see how Unix Timestamp is ended. Leave a comment if you see the Unix Timestamp is started :P.

I also want to share this DateTime converter that I found helpful for my work. https://www.timestamp-converter.com/

Javascript Date

In this section, I will cover the most popular Javascript Date that most people use.

You can try my chunks of code in your browser developer tools, so you could prove it.

new Date()
Enter fullscreen mode Exit fullscreen mode

This is a Date constructor, so it will return a Date object.

new Date()

Date()
// "Thu Mar 31 2022 06:41:59 GMT-0400 (Eastern Daylight Time)"
Enter fullscreen mode Exit fullscreen mode

However, when we called Date as a function, it will return a string, which is the same like new Date().toString()

new date tostring

Date.now()
// 1648723728520
Enter fullscreen mode Exit fullscreen mode

If you are questioning how we can produce Unix Timestamp in Javascript, this is the answer.

new Date().toISOString()
// "2022-03-31T10:52:47.427Z"
Enter fullscreen mode Exit fullscreen mode

Of course, I will show it. This is for ISO ISO 8601. Remember there is a Z in the last character, which means Zulu time. Therefore, it's UTC, not our time zone (if you are not in the UTC zone)

Date NPM Package Library

In my company, I found three npm packages, which is annoying. I will share three of them, and I will give a recommendation.

We are using three libraries inside our projects, which are moment Moment.js, Day.js, and date-fns.

These three libraries are helpful to help us if we need to manipulate DateTime in our code. However, I have several considerations to choosing between these three.

Moment.js is a legacy code now. It states on their website here.

moment

Now, it's between Day.js and date-fns. I found an article that explains between Day.js and date-fns. I think it will give you the answer. https://how-to.dev/dayjs-vs-date-fns

To summarize, According to Marcin Wosinek, in his blog above, If you already use moment.js, you can use Day.js to convert it because most of the API is the same. However, for the size matter, date-fns is smaller than Day.js. You can start with date-fns if you don't have any preference. Focus on one Date library is enough because you do not want to learn all libraries.

Conclusion

Hopefully, my suffered how to read timestamp format could be helpful for you. Please leave a comment if you have any questions, and share the DateTime library that you love.
Happy reading πŸ“š!

Top comments (2)

Collapse
 
abhinav21 profile image
abhinav-root

Exactly what I needed
Great post
Thx

Collapse
 
raaynaldo profile image
Raynaldo Sutisna

Thank you! I'm glad it helps you!