Displaying Date and Time in Javascript

javascript
Published on February 14, 2019

In Javascript, date and time are handled with the built-in Date object.

Displaying the Current Date & Time

Creating a new Date object sets its date and time to the current date and time as given by the browser. The timezone is also set to the browser timezone.

var dt = new Date();

The Date object has several methods to get individual date & time :

  • Getting a string representation

    The toString() method will return a string representation of the date object.

    var dt = new Date();

// will output something like "Thu Feb 14 2019 11:04:42 GMT+0530 (India Standard Time)"
console.log(dt.toString());

  • Getting date

    The getDate() method will return the day of the month.

    Return values are between 1 to 31.

    // will output "14" if the day is 14th of the month
console.log(dt.getDate());

  • Getting month

    The getMonth() method will return the month.

    Return values are between 0 to 11. Note that January is represented by 0, and so on.

    // will output "1" if the month is February
console.log(dt.getMonth());

  • Getting year

    getFullYear() will return the year.

    Return values are 4 digit numbers representing years.

    // will output "2019" for the year of 2019
console.log(dt.getFullYear());

  • Getting hours

    getHours() will return the hour for the date.

    Return values are between 0 to 23.

    // will output "15" if the current time is 3 PM
console.log(dt.getHours());

  • Getting minutes

    getMinutes() will return the minutes for the date.

    Return values are between 0 to 59.

    // will output "4" for the fourth minute
console.log(dt.getMinutes());

  • Getting seconds

    The getSeconds() method will return the seconds for the date.

    Return values are between 0 to 59.

    // will output "42" for the 42th second
console.log(dt.getSeconds());

The above methods can be used to create a date-time string in your required format. For example, to create a string of the form YYYY-MM-DD hh:mm:ss, the codes would be :

var dt = new Date();

// ensure date comes as 01, 09 etc
var DD = ("0" + dt.getDate()).slice(-2);

// getMonth returns month from 0
var MM = ("0" + (dt.getMonth() + 1)).slice(-2);

var YYYY = dt.getFullYear();

var hh = ("0" + dt.getHours()).slice(-2);

var mm = ("0" + dt.getMinutes()).slice(-2);

var ss = ("0" + dt.getSeconds()).slice(-2);

var date_string = YYYY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;

// will output something like "2019-02-14 11:04:42"
console.log(date_string);

Displaying Date & Time from a Timestamp

Timestamps are generally specified in seconds, but in Javascript, timestamps are required in milliseconds. The Date object can accept a timestamp argument for its constructor.

// standard timestamp
var ts = 1550125606;

// convert seconds to milliseconds
var dt = new Date(ts*1000);

// "2019"
console.log(dt.getFullYear());

Once you create the new Date object from the timestamp, you can use the methods of the Date object described above — getDate(), getMonth() and so on.

Displaying Date & Time as per the Localization

The toLocaleString() method of the Date object return a date-time string as per the localization. It accepts 2 parameters which can be used to change the format of the date-time string :

  1. locales : This parameter accepts a language code of the form "en-US", "en-GB", "ja-JP" etc. For example if locale is set to "en-US", the date-string would be returned in a form as per the US English where dates are specified as month-day-year and 12 hour time as AM/PM. For example 2/14/2019, 11:56:46 AM
  2. options : This parameter helps to further customize the results. Some of the options included are :
    • timeZone : You can set this as the timezone to use for the date-time string. An IANA timezone can be set — for example Asia/Kolkata, America/New_York etc.
    • hour12 : To use a 12-hour time or a 24-hour time (true or false)
    • weekday : The format for the weekday, for example "Wednesday" or "Wed" or "W" (long, short or narrow)
    • year : The format of the year, a four-digit format or a 2-digit format (numeric or 2-digit)
    • month : The format of the month, for example, "February" or "Feb" or "01" or "1" or "F" (long, short, 2-digit, numeric or narrow)
    • day / hour / minute / second : Whether to use the numeric value or a 2-digit value (numeric or 2-digit)

Demonstrating through some simple examples :

var dt = new Date();

// "2/14/2019, 11:56:46 AM"
console.log(dt.toLocaleString('en-US'));

// "14/2/2019, 11:56:46 am"
console.log(dt.toLocaleString('en-IN'));

// "2019. 2. 14. 오전 11:56:46"
console.log(dt.toLocaleString('ko-KO'));

var dt = new Date();

var options = { timeZone: "America/New_York", 
				hour12: false,
				weekday: 'long',
				year: 'numeric',
				month: 'long',
				day: 'numeric',
				hour: 'numeric',
				minute: 'numeric'
			};

// something like "Thursday, February 14, 2019, 02:55"
console.log(dt.toLocaleString('en-US', options));

toLocaleString() has a lot more options. Check Date.toLocaleString on Mozilla for more information.

Also locales and options parameters in toLocaleString() are newly added to browsers. As of now, only Firefox and Chrome fully support it.

In this Tutorial