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. momentjs.com/docs/#/parsing — Mahesh
– Mahesh, Commented Aug 27, 2018 at 8: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
– sertsedat, Commented Aug 27, 2018 at 9: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
– Salih K, Commented Aug 27, 2018 at 9: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
– RobG, Commented Aug 27, 2018 at 11:48

sertsedat · Accepted Answer · 2018-08-27 08:45:13Z

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, 2018 at 8:45

sertsedat

3,6101 gold badge28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mehdi Dehghani Over a year ago

Doesn't work on IE10 and below, toLocaleDateString

sertsedat Over a year ago

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

RobG Over a year ago

@jackjop—the value of toLocaleString is implementation dependent, so you can't guarantee that will work in all hosts.

sertsedat Over a year ago

@RobG :) you're right. For anyone, in case you have weird resulting strings, please reference this stackoverflow.com/a/51892913/3729695 and this stackoverflow.com/a/25317146/3729695

Mehdi Dehghani Over a year ago

@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

Barr J · Accepted Answer · 2018-08-27 08:44:26Z

0

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

answered Aug 27, 2018 at 8:44

Barr J

11k2 gold badges31 silver badges49 bronze badges

Comments

Mehdi Dehghani · Accepted Answer · 2018-08-27 08:48:53Z

0

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

answered Aug 27, 2018 at 8:48

Mehdi Dehghani

11.7k6 gold badges64 silver badges68 bronze badges

Comments

Илья Зелень · Accepted Answer · 2018-08-27 11:56:35Z

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, 2018 at 11:56

answered Aug 27, 2018 at 8:45

Илья Зелень

8,2683 gold badges48 silver badges59 bronze badges

1 Comment

RobG Over a year ago

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.

Collectives™ on Stack Overflow

Changing date format using Jquery

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related