Formatting date in Javascript

Question

How would I take a string in this format :

2014-06-12T23:00:00

And format it in Javascript to look like this :

12/06/2014 23:00

Have you considered using a library, for example: http://momentjs.com/ — Oleg, Feb 04 '14 at 17:23
Numerous answers here on SO http://stackoverflow.com/questions/21516995/create-another-formated-date-string-from-an-iso8601-timestamp — Xotic750, Feb 04 '14 at 17:23

Mehran Hatami · Answer 1 · 2014-02-04T19:46:54.267

1

as @Xotic750 poited out it is all about parsing an ISO8601 timestamp:

formatMyDate = function(dt, dayFirst){
    var year = dt.getFullYear().toString();
    //month starts from zero
    var month = (dt.getMonth()+1).toString();
    var date  = dt.getDate().toString();
    var result = null;
    if(dayFirst)
        result = (date[1]?date:"0"+date[0]) + "/" + (month[1]?month:"0"+month[0]);
    else
        result = (month[1]?month:"0"+month[0]) + "/" + (date[1]?date:"0"+date[0]);
    result += "/" + year + " " + dt.toTimeString().split(" ")[0];
    return result;
}
parseUTCTimestamp = function(dtstr) {
    var dt = null;
    var dtArr = dtstr.split(/[\-T:]/);
    dt = new Date(Date.UTC(parseInt(dtArr[0]), dtArr[1]-1, parseInt(dtArr[2]), parseInt(dtArr[3]), parseInt(dtArr[4]), parseInt(dtArr[5])));

    return formatMyDate(dt);
};
parseTimestamp = function(dtstr) {
    var dt = null;
    var dtArr = dtstr.split(/[\-T:]/);
    dt = new Date(parseInt(dtArr[0]), dtArr[1]-1, parseInt(dtArr[2]), parseInt(dtArr[3]), parseInt(dtArr[4]), parseInt(dtArr[5]));

    return formatMyDate(dt, true);
};

parseUTCTimestamp("2014-06-12T23:00:00");//-->"06/13/2014 03:30:00"

parseTimestamp("2014-06-12T23:00:00");//-->"12/06/2014 23:00:00"

edited Feb 04 '14 at 19:46

answered Feb 04 '14 at 17:33

Mehran Hatami

12,723
6
28
35

Parsing an ISO8601 timestamp is only supported in newer browsers that support ECMA5, and even then it is hit and miss (as any datetime string parsing). Also the timestamp is given in UTC not local. – Xotic750 Feb 04 '14 at 18:02
See [`Date.UTC`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC) – Xotic750 Feb 04 '14 at 18:12
That looks much better, though I haven't tested it for any simple mistakes. – Xotic750 Feb 04 '14 at 19:14
Having been back over different specifications, ISO8601:2004 assumes local time and not UTC. Corrections were made to ECMA5 to bring it into line with ISO, but you will find some browsers assume the timestamp to be local and some assume UTC. The most recent version of browsers should assume local time. My appologies but I hope this update helps in future. – Xotic750 Feb 05 '14 at 13:54

Danny Bullis · Accepted Answer · 2014-02-04T18:21:12.970

0

Use Javascript's built-in Date methods:

function getDateString() {
    var d = new Date('2014-06-12T23:00:00');   // pass in your date string
    var y = d.getFullYear();  // the full year (4 digits)
    var m = d.getMonth() + 1; // 0-based month

    var dt = d.getDate() + 1;     // 0-based day of the month
    dt = dt < 10 ? '0' + dt : dt; // add a preceding 0 to numbers less than 10      

    var h = d.getHours();     // 0-based hours
    h = h < 10 ? '0' + h : h; // add a preceding 0 to numbers less than 10

    var mn = d.getMinutes();      // minutes
    mn = mn < 10 ? '0' + mn : mn; // add a preceding 0 to numbers less than 10

    return m + '/' + dt + '/' + y + ' ' + h + ':' + mn;
}

edited Feb 04 '14 at 18:21

answered Feb 04 '14 at 17:30

Danny Bullis

3,043
2
29
35

Oops, I just realized I didn't fully read your answer :]. With the first date string, pass that into a new Date object and then proceed like I've shown: var date = new Date("2014-06-12T23:00:00");. Note that it will give you GMT time, so for the pacific time zone, for example, it would show the time as GMT-0800, or 8 hours less than the time that new date object resolves to. You could figure out your GMT timezone offset and add or subtract that onto your Date object and THEN proceed after that. – Danny Bullis Feb 04 '14 at 17:33
Had to make a couple of minor changes to this (getDate() rather than getDate() + 1 was the main one) but it works great, thanks! – user517406 Feb 04 '14 at 17:56
Awesome, glad I could help. Best of luck friendo. – Danny Bullis Feb 04 '14 at 17:57
How does this function convert and format the string `2014-06-12T23:00:00` that the OP asked bout in the question? – Xotic750 Feb 04 '14 at 18:00
Please read my comment above. You can pass that date string into a javascript Date object and it will return a new Date object set to that date. Let me update my answer. – Danny Bullis Feb 04 '14 at 18:20
The underlying functionality of the Date object likely calls its own parse method when instantiating a date with a given argument. I've never seen the source code for this, but my guess is that common date formats are handled internally by the JS code, such as the timestamp provided by the OP (which is a timestamp commonly seen in SQL). http://www.w3schools.com/jsref/jsref_parse.asp – Danny Bullis Feb 04 '14 at 18:23
I'm not thinking of reproducing all the information again here, so you can read http://stackoverflow.com/a/21518181/592253 – Xotic750 Feb 04 '14 at 19:13
If it works, it works. The OP can test for browser compatability. I haven't - have you? Or are you only suggesting that this method *might* not be compatible? – Danny Bullis Feb 04 '14 at 19:47
Originally you didn't include the ISO string, so that was one question, and yes it is also a matter of compatability. – Xotic750 Feb 04 '14 at 19:48

score 0 · Answer 3 · answered Feb 04 '14 at 19:41

In this case it may be simpler to avoid the Date object altogether and as @Ismael suggested, use straight forward string manipulation.

Javascript

var dateStamp = '2014-06-12T23:00:00',
    dateTime = dateStamp.split('T'),
    date = dateTime[0].split('-'),
    time = dateTime[1].split(':'),
    formatted = date.reverse().join('/') + ' ' + time.slice(0, -1).join(':');

console.log(formatted);

Output

12/06/2014 23:00

On jsFiddle

Formatting date in Javascript

3 Answers3