Introduction to JavaScript Date Formats
A date is a built-in object in JavaScript, and it stores date and time and is used to store, create and modify time, measure time, or display the current date with or without the ‘time’ component in various formats as desired. It also provides various functions or methods to play with.
JavaScript Date instance represents a moment in time in a platform-independent format. The Date object carries both, the date part and the time part. ISO 8601 (YYYY-MM-DD) is the international standard for the presentation of date and time, and preferred date format in JavaScript. Also, Date objects contain a number that represents date and time in milliseconds since 1 January 1970 UTC, depending upon the value given to the Date object.
Syntax
To define a new Date object, we need to call a new Date() with one of the following options:
new Date();new Date(value);new Date(dateString);new Date(year, month index [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);We need to use the new operator to instantiate a Date object. If we use the Date object directly, such as now = Date(), the returned value is a string rather than a Date object.
When no arguments are provided, the Date object displays the current date and time. By default, the Date object in JavaScript displays date/time in local time.
Examples of JavaScript Date Formats
Let us see with the help of some examples below:
Example #1 – Display Current Date and Time
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JS Dates</h2>
<p id="display"></p>
</body>
<script>
var current_date = new Date();
document.getElementById("display").innerHTML = current_date;
</script>
</html>Output:
Date Formats
The various ways in which we can format date in JavaScript are:
- ISO Date (International Standard) – “2019-11-06”
- Long Date – “Nov 12, 2019” or “12 Nov 2019”
- Short Date – “12/11/2019”
Example #2 – Display Dates in Various Formats
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JS Dates</h2>
</body>
<script>
const months = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
var current_date = new Date();
console.log("ISO Format: " ,current_date.getFullYear()+"-"+current_date.getMonth()+"-"+current_date.getDate())
console.log("Long Format: " ,current_date.getDate()+" "+months[current_date.getMonth()]+" "+current_date.getFullYear())
console.log("Short Format: " ,current_date.getDate()+"-"+current_date.getMonth()+"-"+current_date.getFullYear())
</script>
</html>Output:
From the above code, we can see that the Month part of the date starts from zero i.e. January is the zeroth month. The same goes for the daypart as well (getDay()), Sunday starts from zero.
When we specify the date in string format in Date object we tend to write as “12-11-2019” (12th November 2019), but in JavaScript specifying date in this format gets us a wrong date value.
Example#3 – Wrong Date Displayed
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JS Dates</h2>
<p id="display"></p>
</body>
<script>
var current_date = new Date('12-11-2019');
document.getElementById("display").innerHTML = current_date;
</script>
</html>Output:
Now, we will display date-time in milliseconds using Date.parse() function. This function gets the exact number of milliseconds that have passed since midnight, January 1, 1970, until the date that has been provided.
Example #4 – Date in Milliseconds
Code:
<!DOCTYPE html>
<html>
<script>
var msec_date = Date.parse('12-11-2019');
console.log("Date in Milli-Seconds:", msec_date)
</script>
</html>Output:
The good thing about JavaScript Date object is that, if we provide a value that does not fall in an acceptable range, then JavaScript recalculates the date automatically to produce an acceptable date value. Let’s consider an example:
Example #5 – Auto-Correction of Date Value
Code:
<!DOCTYPE html>
<html>
<script>
var autocorrect_date = new Date(2019,9,46);
console.log("Date Value:", autocorrect_date)
</script>
</html>Output:
The above code example recalculates the value provided and displays a correct, acceptable date value. Also, if we notice the code section of how the data value is provided, it seems that we can break up the date and time value part and present it as individual numbers separated by a comma. The value “9” represents the month of October, as discussed in the earlier section of this article, that the Month part of the date starts from 0 (January =0, February=1, and so on..)
Conclusion
In this article, we learned the JavaScript date object and understood various date-time formats that can be displayed in JavaScript using date-time built-in methods. One of the best practices is to create dates with the arguments method and avoid using the date string method.
