Changing date format using Jquery

Question

I have date got from a API like this 2018-08-27T09:28:53, now I want to convert it to a format like August 27, 2018.

I have tried using this

var d = new Date(val.date);
d = d.toDateString();

the above code gives a date like Mon Jul 27 2018. How can I add the comma and separate the month day and year?

Is there a better way to format iso 8601 date to desired format, for me like August 27, 2018.

Why don't you use momentjs. It has many useful utilities for such kind of conversion. https://momentjs.com/docs/#/parsing/ — Mahesh, Aug 27 '18 at 08:47
@Mahesh because you can do this with pure javascript, check my answer for example. if OP only needs this operation then moment is overkill — sertsedat, Aug 27 '18 at 09:02
@Mahesh only for this functionality I don't want to include another library, we can do this with just 3 line of code as shown by jackjop — Salih K, Aug 27 '18 at 09:15
Your first issue is that not all current browsers will correctly parse "2018-08-27T09:28:53". Do not use the built–in parser. Use a real parser (there are plenty to choose from) and you'll get a formatter thrown in for free. — RobG, Aug 27 '18 at 11:48

score 1 · Accepted Answer · answered Aug 27 '18 at 08:45

1

The easiest would be that you use options with toLocaleDateString

var d = new Date(val.date);
var options = { year: 'numeric', month: 'long', day: 'numeric' };
d = d.toLocaleDateString("en-US", options)

var d = new Date();
var options = { year: 'numeric', month: 'long', day: 'numeric' };
console.log( d.toLocaleDateString('en-US', options) );

answered Aug 27 '18 at 08:45

sertsedat

3,490
1
25
45

Doesn't work on IE10 and below, [toLocaleDateString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Browser_compatibility) – Mehdi Dehghani Aug 27 '18 at 10:31
@MehdiDehghani, well yeah, I just tested on `IE10`. Doesn't work as you said. but `new Date().toLocaleDateString('en-US')` gives me `Monday, August 27, 2018`. in this case we can get the substring to get the expected result too. `var d = new Date().toLocaleDateString('en-US'); d = d.substr(d.indexOf(',') + 2)` – sertsedat Aug 27 '18 at 11:25
1

@jackjop—the value of *toLocaleString* is implementation dependent, so you can't guarantee that will work in all hosts. – RobG Aug 27 '18 at 11:50
@RobG :) you're right. For anyone, in case you have weird resulting strings, please reference this https://stackoverflow.com/a/51892913/3729695 and this https://stackoverflow.com/a/25317146/3729695 – sertsedat Aug 27 '18 at 12:07
@jackjop Sure, we can do that, another issue of toLocaleDateString already mentioned with RobG, so your solution needs to be use with caution and yeah its short and simple, but I think it's not really global solution – Mehdi Dehghani Aug 27 '18 at 13:50

score 0 · Answer 2 · answered Aug 27 '18 at 08:44

The easiest way for you is to use date.js:

var date = new Date('2018-08-27');
var newDate = date.toString('dd-MM-yy');

Or you can Nativity:

var dateAr = '2018-08-27'.split('-');
var newDate = dateAr[1] + '-' + dateAr[2] + '-' + dateAr[0].slice(-2);

console.log(newDate);

Илья Зеленько · Answer 3 · 2018-08-27T11:56:35.547

0

Pure js:

let objDate = new Date(),
    month = objDate.toLocaleString('en-us', { month: 'long' }),
    day = objDate.getDate(),
    year = objDate.getFullYear()
    
console.log(`${month} ${day}, ${year}`)

or

let objDate = new Date(),
    date = objDate.toLocaleString('en-us', { year: 'numeric', month: 'long', day: 'numeric' })

console.log(date)

More about toLocaleString.

edited Aug 27 '18 at 11:56

answered Aug 27 '18 at 08:45

Илья Зеленько

7,509
3
44
55

2

`new Date('2018-08-27')` will be parsed as UTC, so return the wrong local date for the host timezone offset around midnight. Some offsets are up to +14 hours, so will continue to show yesterdays date until 2pm. – RobG Aug 27 '18 at 11:51

score 0 · Answer 4 · answered Aug 27 '18 at 08:48

You can use some plugin for that, like momentjs, or use following code:

function formatDate(date) {
    var months = [
        "January", "February", "March", "April", "May", "June", "July",
        "August", "September", "October", "November", "December"
    ];

    var d = date.getDate(),
        m = date.getMonth(),
        y = date.getFullYear();

    return months[m] + ', ' + d + ' ' + y;
}

console.log(formatDate(new Date()));

Changing date format using Jquery

4 Answers4