CODEWITHSUNDEEP
javascriptdatetimeformat
Seong Lee
Seong Lee

Reputation: 10580

Current time formatting with Javascript

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.

Upvotes: 148

Views: 612365

Answers (20)

gilly3
gilly3

Reputation: 91657

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:

const MMMM = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const MMM = MMMM.map(m => m.slice(0, 3));
const dddd = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const ddd = dddd.map(d => d.slice(0, 3));

function ii(i, len = 2) {
    return (i + "").padStart(len, "0");
}

function tzHHMM(tz) {
    const sign = tz > 0 ? "-" : "+"; // +08:00 == -480, signs are reversed
    const tzv = Math.abs(tz);
    const tzHrs = Math.floor(tzv / 60);
    const tzMin = tzv % 60;
    return sign + ii(tzHrs) + ":" + ii(tzMin);
}

function formatDate(date, format, utc) {
    const y = utc ? date.getUTCFullYear() : date.getFullYear();
    const M = utc ? date.getUTCMonth() : date.getMonth();
    const d = utc ? date.getUTCDate() : date.getDate();
    const H = utc ? date.getUTCHours() : date.getHours();
    const h = H > 12 ? H - 12 : H == 0 ? 12 : H;
    const m = utc ? date.getUTCMinutes() : date.getMinutes();
    const s = utc ? date.getUTCSeconds() : date.getSeconds();
    const f = utc ? date.getUTCMilliseconds() : date.getMilliseconds();
    const TT = H < 12 ? "AM" : "PM";
    const tt = TT.toLowerCase();
    const day = utc ? date.getUTCDay() : date.getDay();
    const replacements = {
        y,
        yy: y.toString().slice(-2),
        yyy: y,
        yyyy: y,
        M,
        MM: ii(M),
        MMM: MMM[M],
        MMMM: MMMM[M],
        d,
        dd: ii(d),
        ddd: ddd[day],
        dddd: dddd[day],
        H,
        HH: ii(H),
        h,
        hh: ii(h),
        m,
        mm: ii(m),
        s,
        ss: ii(s),
        f: Math.round(f / 100),
        ff: ii(Math.round(f / 10)),
        fff: ii(f, 3),
        ffff: ii(f * 10, 4),
        T: TT[0],
        TT,
        t: tt[0],
        tt,
        K: utc ? "Z" : tzHHMM(date.getTimezoneOffset()),
        "\\": "",
    };
    return format.replace(/(?:\\(?=.)|(?<!\\)(?:([yMdf])\1{0,3}|([HhmsTt])\2?|K))/g, $0 => replacements[$0]);
}

Upvotes: 217

Marian Lumabi
Marian Lumabi

Reputation: 11

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>

Upvotes: 0

KooiInc
KooiInc

Reputation: 122986

I have created a library called es-date-fiddler, containing (among other date-fiddling stuff) a date formatting function.

Maybe useful.

// $D is the Date 'constructor' from es-date-fiddler
const nowInNZ = $D({locale: `en-NZ`, timeZone: `Pacific/Auckland`});
// clean
console.log(nowInNZ.format(`WD h:mmi~dp d M yyyy`));
// with text
console.log(nowInNZ.format(`{Now in New Zealand:} WD h:mmi~dp d M yyyy`));
<script 
  src="https://cdn.jsdelivr.net/gh/KooiInc/es-date-fiddler@latest/Bundle/index.browser.min.js">
</script>

Upvotes: 0

s.crat
s.crat

Reputation: 76

Use this to your liking. This function returns a formatted string from a date.

Can be used to get date formatted only, or date and time:

const formatDate = (date, dateOnly = true) => {
    const localestr = 'en-US';
    const year = date.toLocaleString(localestr, {year: 'numeric'});
    const month = date.toLocaleString(localestr, {month: '2-digit'}).padStart(2, '0');
    const day = date.toLocaleString(localestr, {day: '2-digit'}).padStart(2, '0');

    if (dateOnly) {
        return `${year}-${month}-${day}`;
    }

    const hour = date.toLocaleString(localestr, {hour: '2-digit', hourCycle: 'h24'}).padStart(2, '0');
    const minute = date.toLocaleString(localestr, {minute: '2-digit'}).padStart(2, '0');
    const second = date.toLocaleString(localestr, {second: '2-digit'}).padStart(2, '0');

    return `${year}-${month}-${day}_${hour}.${minute}.${second}`;
}

var shipDate = new Date();
var shipDateFmt = formatDate(shipDate);
console.log(shipDateFmt);
// 2024-06-01

var shipDateTimeFmt = formatDate(shipDate, false);
console.log(shipDateTimeFmt);
// 2024-06-01_02.03.04

Upvotes: 0

eapo
eapo

Reputation: 1081

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

Upvotes: -1

soxiety
soxiety

Reputation: 11

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>

Upvotes: 1

Lee Meador
Lee Meador

Reputation: 12985

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

Upvotes: 10

Vadim
Vadim

Reputation: 553

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(':');
};

Upvotes: 7

Joshua Pinter
Joshua Pinter

Reputation: 47611

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

Upvotes: 6

Владимир Олейников
Владимир Олейников

Reputation: 9

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

Upvotes: -11

video-reviews.net
video-reviews.net

Reputation: 2926

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>

Upvotes: 3

Simon
Simon

Reputation: 1374

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"

Upvotes: 1

Joomler
Joomler

Reputation: 2808

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)

Upvotes: 84

Ye Lin Aung
Ye Lin Aung

Reputation: 11469

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

Upvotes: 275

Cris
Cris

Reputation: 2943

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

Upvotes: 4

slf
slf

Reputation: 22787

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.

Upvotes: 5

Umashankar Chaudhary
Umashankar Chaudhary

Reputation: 19

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

Upvotes: -3

thdoan
thdoan

Reputation: 19127

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

Upvotes: 17

Ronnie Smith
Ronnie Smith

Reputation: 18585

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"

Upvotes: 1

Ragnarokkr
Ragnarokkr

Reputation: 2328

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

Upvotes: 0

Related Questions