Current time formatting with Javascript

Question

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

Using the function below and calling, she will give me Fri Feb 01 2013 13:56:40 GMT + 1300 (Daytime in New Zealand) but I want to format it as Friday 14:00 February 1, 2013

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

Of course, the code above does not have any formatting logic, but so far I have not seen any “working” formatters.

Answer 1

JavaScript date has several methods for extracting parts of it:

getFullYear() - Returns a 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). Sunday 0, Saturday 6
getHours() - Returns the hour of the day (0-23). A.
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 local time of the machine and UTC.

There are no built-in methods to get localized strings, such as Friday, February, or PM. You must encode it yourself. To get the string you need, at least you 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 compose it using the methods described above:

 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; 

I have a date format function that I would like to include in my standard library. It takes a format string parameter that determines the desired result. Format strings are free based on . Clean string strings of date and time . For the specified format, the following format string will 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; }; 

Answer 2

You can 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

Answer 3

2017 Update : Use toLocaleDateString and toLocaleTimeString to format the date and time. The first parameter passed to these methods is the locale value, for example, en-us . The second parameter, if present, indicates formatting options, such as a long form for the day of the week.

 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)); 

Closed: Wednesday, October 25, 2017 8:19 p.m.

Please refer to the link below for more details.

Date and Time Strings (JavaScript)

Answer 4

You can use my strftime port:

 /* 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 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 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(/%[az]/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; }); } 

Using an example:

 // 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

Answer 5

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

http://www.w3schools.com/jsref/jsref_obj_date.asp

For something like Friday 2:00pm 1 Feb 2013 , the code looks something like this:

 var dateString = date.getDay() + " " + date.getHours() + ":" + date.getMinutes() ... 

Answer 6

There are many great libraries for those interested.

• http://www.datejs.com/
• http://momentjs.com/
• https://github.com/samsonjs/strftime

These days, there really shouldn't be a need to come up with your own formatting specifiers.

Answer 7

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

Current time

 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" 

Answer 8

 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); 

Answer 9

To work with the Date base class, you can look at the MDN for your methods (instead of W3Schools because of this reason ). There you can find a good description of each method, useful for accessing each individual date and time component and information regarding whether the method is obsolete or not.

Otherwise, you can look at Moment.js , which is a good library for handling date and time. You can use it to control the date and time (e.g. parsing, formatting, i18n, etc.).

Answer 10

 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 and Result:

 var formattedTime=formatTime(new Date('2020 15:00')); // Output: "03:00 PM" 

Answer 11

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

• If you click
• Run Code Snippet button below
• This will show you a simple example of a real-time digital clock. A 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> 

Answer 12

 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(); 

}) ();

5:12:00