June 29, 2020

How to Convert Timestamp to Date Format in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to convert timestamp to date format in javascript. Some developers prefer to store the timestamp in the database so that in the front end, they can convert it into a date format of their choice and display it to the user.

In javascript, whenever we have to deal with dates, we use the Date constructor which returns a Date object. Since the Date object has various methods available, it becomes extremely easy to get the date in the desired format without putting in too much effort.

In the following example, we are going to convert Unix timestamp 1578162600000 to the “M/D/YYYY” date format. Unix timestamp is generally in seconds, but I have already multiplied it by 1000 to avoid an extra step of converting seconds to milliseconds.

We have done seconds to milliseconds conversion because the Date constructor takes the number of milliseconds as a parameter. I recommend you do the same to avoid any unexpected outcomes. Please have a look over the code example and steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and h1). The div element is just a wrapper for the rest of the elements.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button>Get</button>
        <h1>Result</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected 2 elements (button and h1) using the document.querySelector() method and stored them in btn and result variables.
We have created a global variable timestamp and assigned 1578162600000 as a value.
We have added a click event listener to the button element.
We are passing the timestamp variable to the Date constructor which returns a Date object.
We are getting month, year, and date by calling getMonth(), getFullYear(), and getDate() methods respectively of Date object. getMonth() method returns an integer between 0 and 11, where January is 0, February is 1, and so on. That’s why we are adding 1 to a month to get the correct digit for the month.
We are simply creating a template string with month, year, and date variables and displaying it inside h1 element.

let btnGet = document.querySelector('button');
let result = document.querySelector('h1');

//1/5/2020
let timestamp = 1578162600000;

btnGet.addEventListener('click', () => {
    let dateObj = new Date(timestamp);

    let month = dateObj.getMonth() + 1;
    let year = dateObj.getFullYear();
    let date = dateObj.getDate();

    result.innerText = `${month}/${date}/${year}`;
});

You May Also Like: