137

I want to get current time in a specific format with javascript.

With the function below and calling it will give me Fri Feb 01 2013 13:56:40 GMT+1300 (New Zealand Daylight Time) but I want to format it like Friday 2:00pm 1 Feb 2013

var d = new Date();
var x = document.getElementById("time");
x.innerHTML = d;

Of course, code above doesn't have any formatting logic but I have not come across with any "working" formatters yet.

Mike
  • 23,542
  • 14
  • 76
  • 87
Seong Lee
  • 10,314
  • 25
  • 68
  • 106
  • For a similar question for Node.js see http://stackoverflow.com/questions/10645994/node-js-how-to-format-a-date-string-in-utc – Ohad Schneider Jul 10 '16 at 14:04
  • I don't know how much annoyed you guys are with this... But its 2023 and we still cannot print current time (of any given timezone) on a webpage without writing what feels like 800 lines of code... – Joeri Apr 16 '23 at 16:30

17 Answers17

259

You may want to try

var d = new Date();
d.toLocaleString();       // -> "2/1/2013 7:37:08 AM"
d.toLocaleDateString();   // -> "2/1/2013"
d.toLocaleTimeString();  // -> "7:38:05 AM"

Documentation

Ye Lin Aung
  • 11,234
  • 8
  • 45
  • 51
209

A JavaScript Date has several methods allowing you to extract its parts:

getFullYear() - Returns the 4-digit year
getMonth() - Returns a zero-based integer (0-11) representing the month of the year.
getDate() - Returns the day of the month (1-31).
getDay() - Returns the day of the week (0-6). 0 is Sunday, 6 is Saturday.
getHours() - Returns the hour of the day (0-23).
getMinutes() - Returns the minute (0-59).
getSeconds() - Returns the second (0-59).
getMilliseconds() - Returns the milliseconds (0-999).
getTimezoneOffset() - Returns the number of minutes between the machine local time and UTC.

There are no built-in methods allowing you to get localized strings like "Friday", "February", or "PM". You have to code that yourself. To get the string you want, you at least need to store string representations of days and months:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

Then, put it together using the methods above:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var d = new Date();
var day = days[d.getDay()];
var hr = d.getHours();
var min = d.getMinutes();
if (min < 10) {
    min = "0" + min;
}
var ampm = "am";
if( hr > 12 ) {
    hr -= 12;
    ampm = "pm";
}
var date = d.getDate();
var month = months[d.getMonth()];
var year = d.getFullYear();
var x = document.getElementById("time");
x.innerHTML = day + " " + hr + ":" + min + ampm + " " + date + " " + month + " " + year;
<span id="time"></span>

I have a date format function I like to include in my standard library. It takes a format string parameter that defines the desired output. The format strings are loosely based on .Net custom Date and Time format strings. For the format you specified the following format string would work: "dddd h:mmtt d MMM yyyy".

var d = new Date();
var x = document.getElementById("time");
x.innerHTML = formatDate(d, "dddd h:mmtt d MMM yyyy");

Demo: jsfiddle.net/BNkkB/1

Here is my full date formatting function:

function formatDate(date, format, utc) {
    var MMMM = ["\x00", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var MMM = ["\x01", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var dddd = ["\x02", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var ddd = ["\x03", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    function ii(i, len) {
        var s = i + "";
        len = len || 2;
        while (s.length < len) s = "0" + s;
        return s;
    }

    var y = utc ? date.getUTCFullYear() : date.getFullYear();
    format = format.replace(/(^|[^\\])yyyy+/g, "$1" + y);
    format = format.replace(/(^|[^\\])yy/g, "$1" + y.toString().substr(2, 2));
    format = format.replace(/(^|[^\\])y/g, "$1" + y);

    var M = (utc ? date.getUTCMonth() : date.getMonth()) + 1;
    format = format.replace(/(^|[^\\])MMMM+/g, "$1" + MMMM[0]);
    format = format.replace(/(^|[^\\])MMM/g, "$1" + MMM[0]);
    format = format.replace(/(^|[^\\])MM/g, "$1" + ii(M));
    format = format.replace(/(^|[^\\])M/g, "$1" + M);

    var d = utc ? date.getUTCDate() : date.getDate();
    format = format.replace(/(^|[^\\])dddd+/g, "$1" + dddd[0]);
    format = format.replace(/(^|[^\\])ddd/g, "$1" + ddd[0]);
    format = format.replace(/(^|[^\\])dd/g, "$1" + ii(d));
    format = format.replace(/(^|[^\\])d/g, "$1" + d);

    var H = utc ? date.getUTCHours() : date.getHours();
    format = format.replace(/(^|[^\\])HH+/g, "$1" + ii(H));
    format = format.replace(/(^|[^\\])H/g, "$1" + H);

    var h = H > 12 ? H - 12 : H == 0 ? 12 : H;
    format = format.replace(/(^|[^\\])hh+/g, "$1" + ii(h));
    format = format.replace(/(^|[^\\])h/g, "$1" + h);

    var m = utc ? date.getUTCMinutes() : date.getMinutes();
    format = format.replace(/(^|[^\\])mm+/g, "$1" + ii(m));
    format = format.replace(/(^|[^\\])m/g, "$1" + m);

    var s = utc ? date.getUTCSeconds() : date.getSeconds();
    format = format.replace(/(^|[^\\])ss+/g, "$1" + ii(s));
    format = format.replace(/(^|[^\\])s/g, "$1" + s);

    var f = utc ? date.getUTCMilliseconds() : date.getMilliseconds();
    format = format.replace(/(^|[^\\])fff+/g, "$1" + ii(f, 3));
    f = Math.round(f / 10);
    format = format.replace(/(^|[^\\])ff/g, "$1" + ii(f));
    f = Math.round(f / 10);
    format = format.replace(/(^|[^\\])f/g, "$1" + f);

    var T = H < 12 ? "AM" : "PM";
    format = format.replace(/(^|[^\\])TT+/g, "$1" + T);
    format = format.replace(/(^|[^\\])T/g, "$1" + T.charAt(0));

    var t = T.toLowerCase();
    format = format.replace(/(^|[^\\])tt+/g, "$1" + t);
    format = format.replace(/(^|[^\\])t/g, "$1" + t.charAt(0));

    var tz = -date.getTimezoneOffset();
    var K = utc || !tz ? "Z" : tz > 0 ? "+" : "-";
    if (!utc) {
        tz = Math.abs(tz);
        var tzHrs = Math.floor(tz / 60);
        var tzMin = tz % 60;
        K += ii(tzHrs) + ":" + ii(tzMin);
    }
    format = format.replace(/(^|[^\\])K/g, "$1" + K);

    var day = (utc ? date.getUTCDay() : date.getDay()) + 1;
    format = format.replace(new RegExp(dddd[0], "g"), dddd[day]);
    format = format.replace(new RegExp(ddd[0], "g"), ddd[day]);

    format = format.replace(new RegExp(MMMM[0], "g"), MMMM[M]);
    format = format.replace(new RegExp(MMM[0], "g"), MMM[M]);

    format = format.replace(/\\(.)/g, "$1");

    return format;
};
gilly3
  • 87,962
  • 25
  • 144
  • 176
  • Thanks a lot. Although my final code needed a bit of tweak, your insights helped. – Seong Lee May 07 '13 at 21:22
  • How do i format date = "2016/03/01 11:00" to date ="Sat Mar 01 2016 11:00:00 GMT+0530 (IST)" – Vishal Singh Feb 25 '16 at 07:27
  • 1
    How does `MMMM[0]` return the correct month name instead of the non-printable character at index 0? Shouldn't it be `MMMM[M]`? Am I just dumb? (Nevermind. It sets it to the non-printable character, which it replaces later in order to avoid conflicts) – Danegraphics Apr 20 '20 at 16:35
73

2017 update: use toLocaleDateString and toLocaleTimeString to format dates and times. The first parameter passed to these methods is a locale value, such as en-us. The second parameter, where present, specifies formatting options, such as the long form for the weekday.

let date = new Date();  
let options = {  
    weekday: "long", year: "numeric", month: "short",  
    day: "numeric", hour: "2-digit", minute: "2-digit"  
};  

console.log(date.toLocaleTimeString("en-us", options)); 

Output : Wednesday, Oct 25, 2017, 8:19 PM

Please refer below link for more details.

Date and Time Strings (JavaScript)

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
Joomler
  • 2,610
  • 3
  • 30
  • 37
  • 2
    At this time - over four years after first answers to this question - this is now the most convenient and flexible solution, and answer to this question. It should be promoted higher as an example of current (AD 2018) practice :-) – Jochem Schulenklopper Apr 25 '18 at 08:29
  • Torn. @thdoan's port of strftime looks more flexible. For example, `toLocalTimeString` offers 4 date styles, `full` `long` `medium` `short`, and perhaps what those terms mean is defined somewhere. Meanwhile, strftime could (probably) match any of those and many more. On the other hand, `toLocalTimeString` supports time zones. I'm hoping that includes time zones that use daylight savings time... – captain puget Dec 28 '19 at 03:51
  • 1
    Perfect answer, which solves the whole problem.I think there is missing link to toLocaleString() where are described directly parameters and options – mr_ET Oct 14 '20 at 09:39
17

You can use my port of strftime:

/* Port of strftime(). Compatibility notes:
 *
 * %c - formatted string is slightly different
 * %D - not implemented (use "%m/%d/%y" or "%d/%m/%y")
 * %e - space is not added
 * %E - not implemented
 * %h - not implemented (use "%b")
 * %k - space is not added
 * %n - not implemented (use "\n")
 * %O - not implemented
 * %r - not implemented (use "%I:%M:%S %p")
 * %R - not implemented (use "%H:%M")
 * %t - not implemented (use "\t")
 * %T - not implemented (use "%H:%M:%S")
 * %U - not implemented
 * %W - not implemented
 * %+ - not implemented
 * %% - not implemented (use "%")
 *
 * strftime() reference:
 * http://man7.org/linux/man-pages/man3/strftime.3.html
 *
 * Day of year (%j) code based on Joe Orost's answer:
 * http://stackoverflow.com/questions/8619879/javascript-calculate-the-day-of-the-year-1-366
 *
 * Week number (%V) code based on Taco van den Broek's prototype:
 * http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html
 */
function strftime(sFormat, date) {
  if (!(date instanceof Date)) date = new Date();
  var nDay = date.getDay(),
    nDate = date.getDate(),
    nMonth = date.getMonth(),
    nYear = date.getFullYear(),
    nHour = date.getHours(),
    aDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    aMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    aDayCount = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
    isLeapYear = function() {
      if ((nYear&3)!==0) return false;
      return nYear%100!==0 || nYear%400===0;
    },
    getThursday = function() {
      var target = new Date(date);
      target.setDate(nDate - ((nDay+6)%7) + 3);
      return target;
    },
    zeroPad = function(nNum, nPad) {
      return ('' + (Math.pow(10, nPad) + nNum)).slice(1);
    };
  return sFormat.replace(/%[a-z]/gi, function(sMatch) {
    return {
      '%a': aDays[nDay].slice(0,3),
      '%A': aDays[nDay],
      '%b': aMonths[nMonth].slice(0,3),
      '%B': aMonths[nMonth],
      '%c': date.toUTCString(),
      '%C': Math.floor(nYear/100),
      '%d': zeroPad(nDate, 2),
      '%e': nDate,
      '%F': date.toISOString().slice(0,10),
      '%G': getThursday().getFullYear(),
      '%g': ('' + getThursday().getFullYear()).slice(2),
      '%H': zeroPad(nHour, 2),
      '%I': zeroPad((nHour+11)%12 + 1, 2),
      '%j': zeroPad(aDayCount[nMonth] + nDate + ((nMonth>1 && isLeapYear()) ? 1 : 0), 3),
      '%k': '' + nHour,
      '%l': (nHour+11)%12 + 1,
      '%m': zeroPad(nMonth + 1, 2),
      '%M': zeroPad(date.getMinutes(), 2),
      '%p': (nHour<12) ? 'AM' : 'PM',
      '%P': (nHour<12) ? 'am' : 'pm',
      '%s': Math.round(date.getTime()/1000),
      '%S': zeroPad(date.getSeconds(), 2),
      '%u': nDay || 7,
      '%V': (function() {
              var target = getThursday(),
                n1stThu = target.valueOf();
              target.setMonth(0, 1);
              var nJan1 = target.getDay();
              if (nJan1!==4) target.setMonth(0, 1 + ((4-nJan1)+7)%7);
              return zeroPad(1 + Math.ceil((n1stThu-target)/604800000), 2);
            })(),
      '%w': '' + nDay,
      '%x': date.toLocaleDateString(),
      '%X': date.toLocaleTimeString(),
      '%y': ('' + nYear).slice(2),
      '%Y': nYear,
      '%z': date.toTimeString().replace(/.+GMT([+-]\d+).+/, '$1'),
      '%Z': date.toTimeString().replace(/.+\((.+?)\)$/, '$1')
    }[sMatch] || sMatch;
  });
}

Sample usage:

// Returns "Thursday 4:45pm 15 Sep 2016"
strftime('%A %l:%M%P %e %b %Y');

// You can optionally pass it a Date object
// Returns "Friday 2:00pm 1 Feb 2013"
strftime('%A %l:%M%P %e %b %Y', new Date('Feb 1, 2013 2:00 PM'));

The latest code is available here: https://github.com/thdoan/strftime

thdoan
  • 18,421
  • 1
  • 62
  • 57
8

Look at the internals of the Date class and you will see that you can extract all the bits (date, month, year, hour, etc).

For something like Fri 23:00 1 Feb 2013 the code is like:

date = new Date();

weekdayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var dateString = weekdayNames[date.getDay()] + " " 
    + date.getHours() + ":" + ("00" + date.getMinutes()).slice(-2) + " " 
    + date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear();

console.log(dateString);
General Grievance
  • 4,555
  • 31
  • 31
  • 45
Lee Meador
  • 12,829
  • 2
  • 36
  • 42
  • Date#getDay returns an integer, not a name of weekday. Also, imho MDN does worse at getting the point across quickly regarding the Date object, so I don't understand why disparagement needs to take place. – Ninjaxor Nov 13 '16 at 21:30
  • The problem with `date.getMinutes()` is that it returns a single digit when the minutes are less than 10, resulting in times like "10:4 am" instead of the more common "10:04 am". – Jochem Schulenklopper Apr 25 '18 at 08:21
  • @JochemSchulenklopper Added the non-date code to display a leading zero on minutes – Lee Meador May 29 '19 at 17:59
  • @Ninjaxor Added non-date related code to convert a number into a string. This should work if you want English names. – Lee Meador May 29 '19 at 18:00
5

There are many great libraries out there, for those interested

There really shouldn't be a need these days to invent your own formatting specifiers.

slf
  • 22,595
  • 11
  • 77
  • 101
  • Just wanted to mention, as of Oct 2017, `moment` is the current standard for time-related things in Javascript. – shawon191 Oct 01 '17 at 11:21
  • thanks @shawon191 for the update :) ya, `moment` rocks. `d3` has also added some time stuff too, so if you are already using that, you might be able to save a library import https://github.com/d3/d3/blob/master/API.md#time-formats-d3-time-format – slf Oct 02 '17 at 16:12
5

Using Moment.

I can't recommend the use of Moment enough. If you are able to use third-party libraries, I highly recommend doing so. Beyond just formatting, it deals with timezones, parsing, durations and time travel extremely well and will pay dividends in simplicity and time (at the small expense of size, abstraction and performance).

Usage

You wanted something that looked like this:

Friday 2:00pm 1 Feb 2013

Well, with Moment all you need you to do is this:

import Moment from "moment";

Moment().format( "dddd h:mma D MMM YYYY" ); //=> "Wednesday 9:20am 9 Dec 2020"

And if you wanted to match that exact date and time, all you would need to do is this:

import Moment from "moment";

Moment( "2013-2-1 14:00:00" ).format( "dddd h:mma D MMM YYYY" ) ); //=> "Friday 2:00pm 1 Feb 2013"

There's a myriad of other formatting options that can be found here.

Install

Go to their home page to see more detailed instructions, but if you're using npm or yarn it's as simple as:

npm install moment --save

or

yarn add moment
Joshua Pinter
  • 45,245
  • 23
  • 243
  • 245
  • Just a quick note that Moment has officially been deprecated. We still use it extensively and will continue to do so for the foreseeable but just a heads up. – Joshua Pinter Feb 21 '22 at 15:42
5

Only time

const getTime = ()=>{
    const d = new Date();
    const dd = [d.getHours(), d.getMinutes(), d.getSeconds()].map((a)=>(a < 10 ? '0' + a : a));
    return dd.join(':');
};
Vadim
  • 306
  • 1
  • 5
  • 13
4

d = Date.now();
d = new Date(d);
d = (d.getMonth()+1)+'/'+d.getDate()+'/'+d.getFullYear()+' '+(d.getHours() > 12 ? d.getHours() - 12 : d.getHours())+':'+d.getMinutes()+' '+(d.getHours() >= 12 ? "PM" : "AM");

console.log(d);
Cris
  • 2,824
  • 24
  • 23
3

For this true mysql style use this function below: 2019/02/28 15:33:12

  • If you click the
  • 'Run code snippet' button below
  • It will show your an simple realtime digital clock example The demo will appear below the code snippet.

function getDateTime() {
        var now     = new Date(); 
        var year    = now.getFullYear();
        var month   = now.getMonth()+1; 
        var day     = now.getDate();
        var hour    = now.getHours();
        var minute  = now.getMinutes();
        var second  = now.getSeconds(); 
        if(month.toString().length == 1) {
             month = '0'+month;
        }
        if(day.toString().length == 1) {
             day = '0'+day;
        }   
        if(hour.toString().length == 1) {
             hour = '0'+hour;
        }
        if(minute.toString().length == 1) {
             minute = '0'+minute;
        }
        if(second.toString().length == 1) {
             second = '0'+second;
        }   
        var dateTime = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;   
         return dateTime;
    }

    // example usage: realtime clock
    setInterval(function(){
        currentTime = getDateTime();
        document.getElementById("digital-clock").innerHTML = currentTime;
    }, 1000);
<div id="digital-clock"></div>
centralhubb.com
  • 2,705
  • 19
  • 17
1

2.39KB minified. One file. https://github.com/rhroyston/clock-js

Current Time is

var str = clock.month;
var m = str.charAt(0).toUpperCase() + str.slice(1,3); //gets you abbreviated month
clock.weekday + ' ' + clock.time + ' ' + clock.day + ' ' + m + ' ' + clock.year; //"tuesday 5:50 PM 3 May 2016"
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91
1
function formatTime(date){

  d = new Date(date);
  var h=d.getHours(),m=d.getMinutes(),l="AM";
  if(h > 12){
    h = h - 12;
  }
  if(h < 10){
    h = '0'+h;
  }
  if(m < 10){
    m = '0'+m;
  }
  if(d.getHours() >= 12){
    l="PM"
  }else{
    l="AM"
  }

  return h+':'+m+' '+l;

}

Usage & result:

var formattedTime=formatTime(new Date('2020 15:00'));
// Output: "03:00 PM"
Simon
  • 1,314
  • 4
  • 14
  • 26
1

This is not exactly what you asked but maybe something here can help.

const dateToday = new Date();
const weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 

let day = weekDay[dateToday.getDay()];
let hr = [dateToday.getHours()% 12 || 12];
let min = [dateToday.getMinutes()];
let sec = [dateToday.getSeconds()];

document.getElementById("date").innerHTML = "Today is: " + day;

var amPm;
if (hr > 12){
  amPm = "AM"
} else {
  amPm = "PM"
}


document.getElementById("time").innerHTML = "Current time is: " + hr + ":" + min + ":" + sec + " " + amPm;
<div>
  <p id="date"></p>
  <p id="time"></p>
</div>
0xLogN
  • 3,289
  • 1
  • 14
  • 35
soxiety
  • 11
  • 1
0

To work with the base Date class you can look at MDN for its methods (instead of W3Schools due to this reason). There you can find a good description about every method useful to access each single date/time component and informations relative to whether a method is deprecated or not.

Otherwise you can look at Moment.js that is a good library to use for date and time processing. You can use it to manipulate date and time (such as parsing, formatting, i18n, etc.).

Ragnarokkr
  • 2,328
  • 2
  • 21
  • 31
0

I prefer to get current time in the shortest form in my code, so I use an Object with defineProperty() what can be accessed simply using Date.now.

// Define a getter for the 'now' property of the Date object
Object.defineProperty(Date, 'now', {
  // Define the getter function that will be called when 'Date.now' is accessed
  get() {
    // Create a new Date object with the current date and time
    // and format it as a string in the 'en-NZ' locale with the Pacific/Auckland time zone
    return new Date().toLocaleString('en-NZ', {
      timeZone: 'Pacific/Auckland',
      weekday: "long",
      hour: '2-digit',
      minute: '2-digit',
      day: '2-digit',
      month: 'short',
      year: 'numeric'
    });
  }
});

// Log the current date and time using the 'Date.now' property
console.log(Date.now);

Using this method to generate short and easy-to-read timestamped logs, I am using the codes below, without coloring and with coloring using SGR parameters:

Object.defineProperty(Date, 'now', {
  get() {
    return new Date().toLocaleString('en-GB', {timeZone: 'Pacific/Auckland', day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit'}).replace(/[ .]/g, '').replace(',', 'T');
  }
});

console.log(Date.now);

Object.defineProperty(Date, 'nc', {
  get() {
    return `\x1b[33m${new Date().toLocaleString('en-GB', {timeZone: 'Pacific/Auckland', day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit'}).replace(/[ .]/g, '').replace(',', 'T')}\x1b[0m`;
  }
});

console.log(Date.nc);
eapo
  • 1,053
  • 1
  • 19
  • 40
-3
function startTime() {
    var today = new Date(),
        h = checkTime(((today.getHours() + 11) % 12 + 1)),
        m = checkTime(today.getMinutes()),
        s = checkTime(today.getSeconds());
    document.getElementById('demo').innerHTML = h + ":" + m + ":" + s;
    t = setTimeout(function () {
        startTime()
    }, 500);
}
startTime();

})();

05:12:00

-11

let date = new Date();
let time = date.format("hh:ss")