Introduction to Timestamp to Date in JavaScript
Timestamp to date in JavaScript is one of the most commonly used scenarios by the programmers. In JavaScript, programmers can retrieve the individual elements of the full-fledged date using the various methods provided by the Date() object. Once all the elements are extracted, the user can print or use them in the code according to its own preferences. One thing to note while working on the JavaScript date object is that it takes the timestamp in milliseconds to convert the Unix timestamp into a JavaScript timestamp. Therefore, different programmers use different approaches in order to extract the date and time in their specified format and the timezones.
Syntax
Below given is the basic syntax of the conversion of the timestamp to extract the date and time in JavaScript using the various methods provided by the Date() object:
<script>
// converting timestamp into milliseconds
var t_stamp = xyz;
var t_stamp_ms = t_stamp *1000;
//creating the date object
var obj = date(t_stamp_ms);
var hours = getHours(obj);
var min = getMinutes(obj);
…
…
…
…
//printing values on the console
</script>Where xyz is a numerical UNIX timestamp value.
How to Convert Timestamp to Date in JavaScript?
In JavaScript, unix timestamp can be converted to the date and time using the Date() object. In order to retrieve the Date and time values from the timestamp provided by the programmer, it is important for the programmer to understand the various methods which are provided by the Date() object in JavaScript to extract the individual elements of the whole timestamp.
- getDate(): This method provides the date for the timestamp which the user gives. Its value lies between the range (1 – 31).
- getHours(): This method returns the actual hours for the timestamp provided by the user. Its value lies between 0-11.
- getMinutes(): This method returns the actual minutes for the timestamp provided by the user. Its range lies between 0- 59.
- getSeconds(): This method returns the seconds for the timestamp provided by the user. Its value lies between 0 – 59.
- getMonth(): This method provides the 2 digit month to the user for the timestamp provided, which lies between 0 – 11. The result needs to be incremented by 1 in order to match the actual calendar month.
- getFullYear(): As the name indicates, this method provides the full year in 4 digits for the timestamp provided to the user.
Below given are some of the steps which need to be performed in order to convert the timestamp to date and time in JavaScript:
- One most important point to remember is that the timestamp accepted by the date() function is in milliseconds instead of seconds in JavaScript. So in order to convert the Unix timestamp to JavaScript timestamp, the first and foremost task of the programmer is to convert the given timestamp into milliseconds by multiplying with 1000.
- The value of the timestamp returned after multiplying with 1000 is passed to the Date() in order to create the date object.
- Once the date object is created, almost everything is sorted. Now the individual values are extracted from the Date object, like the Minute value is extracted using getMinutes() method, seconds value using getSeconds(), month value is extracted using getMonths(), etc.
- In order to Extract the last 2 digits off Months, Date, Hours and seconds, the slice() function is used, and padding with the extra ‘0’ is done.
- The final date is printed on the console by concatenating all the individual date, time, seconds values according to the requirement of the programmer using the required separators (/, :, – ).
Example of Timestamp to Date in JavaScript
Given below is the example of Timestamp to Date in JavaScript:
Code:
<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Date Function </h3>
<p id="demo"></p>
<p id ="demo1"> </p>
<p id = "demo2"> </p>
<script>
// unix timestamp
var timestamp = 890099870;
// convert unix timestamp to milliseconds
var timestamp_ms = timestamp * 1000;
// initializing the Date object
var d_obj = new Date(timestamp_ms);
// extracting date from the date object as 2 digit
var date = ("0" + d_obj.getDate()).slice(-2);
// extracting hours from the date object as 2 digit
var hrs = ("0" + d_obj.getHours()).slice(-2);
// extracting minutes from the date object as 2 digit
var mins = ("0" + d_obj.getMinutes()).slice(-2);
// extracting the seconds from the date object as 2 digit
var sec = ("0" + d_obj.getSeconds()).slice(-2);
// extracting year from the date object as 4 digit
var yr = d_obj.getFullYear();
// extracting month from the date object as 2 digit
var mth = ("0" + (d_obj.getMonth() + 1)).slice(-2);
//printing the values of the date and time in different formats on the console
document.getElementById("demo").innerHTML = "Extended date is: " + yr + "/" + mth + "/" + date;
document.getElementById("demo1").innerHTML = "Date in YYYY/MM/DD hh:mm:ss Format: " + yr + "/" + mth + "/" + date + " " + hrs + ":" + mins + ":" + sec;
document.getElementById("demo2").innerHTML = "Time in hours and minutes: " + hrs + ":" + mins;
</script>
</body>
</html>Output:
Explanation:
- In the above code, 3 paragraph ids are created with the name ‘p1’, ‘p2’ and ‘p3’, respectively. Then, the Unix timestamp is initialised with the variable ‘timestamp’. Next, it is converted to JavaScript timestamp by converting it into milliseconds (multiplying by 1000). Finally, date object ‘d_obj’ is created using the Date() function passing the timestamp values.
- Individual values are extracted using the Date() functions like getHours(), getMinutes(), getFullYear(), etc and padding is done with the “0”. The slice function is used to slice or extract the last 2 digits of the respective functions. Finally, in order to print the entire date in the respective format, concatenation is done using the ‘+’ operator and separators like ‘/’ and ‘: ‘ are used.
Conclusion
The above description clearly explains how the Date() function works in JavaScript and how converting a timestamp to date in JavaScript works. The programmers widely use the date in the code to perform the various date and time-related tasks. Though JavaScript uses the browser’s timezone in order to display the time and date, we can change to different time zones using the functions provided in the JavaScript library.