Format JavaScript date as yyyy-mm-dd

Question

I have a date with the format Sun May 11,2014. How can I convert it to 2014-05-11 using JavaScript?

function taskDate(dateMilli) {
    var d = (new Date(dateMilli) + '').split(' ');
    d[2] = d[2] + ',';

    return [d[0], d[1], d[2], d[3]].join(' ');
}

var datemilli = Date.parse('Sun May 11,2014');
console.log(taskDate(datemilli));

The code above gives me the same date format, sun may 11,2014. How can I fix this?

Solution 1

You can do:

function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) 
        month = '0' + month;
    if (day.length < 2) 
        day = '0' + day;

    return [year, month, day].join('-');
}
 
console.log(formatDate('Sun May 11,2014'));

Usage example:

console.log(formatDate('Sun May 11,2014'));

Output:

2014-05-11

Demo on JSFiddle: http://jsfiddle.net/abdulrauf6182012/2Frm3/

Solution 2

Just leverage the built-in toISOString method that brings your date to the ISO 8601 format:

let yourDate = new Date()
yourDate.toISOString().split('T')[0]

Where yourDate is your date object.

Edit: @exbuddha wrote this to handle time zone in the comments:

const offset = yourDate.getTimezoneOffset()
yourDate = new Date(yourDate.getTime() - (offset*60*1000))
return yourDate.toISOString().split('T')[0]

Solution 3

I use this way to get the date in format yyyy-mm-dd :)

var todayDate = new Date().toISOString().slice(0, 10);
console.log(todayDate);

Solution 4

2020 ANSWER

You can use the native .toLocaleDateString() function which supports several useful params like locale (to select a format like MM/DD/YYYY or YYYY/MM/DD), timezone (to convert the date) and formats details options (eg: 1 vs 01 vs January).

Examples

const testCases = [
  new Date().toLocaleDateString(), // 8/19/2020
  new Date().toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday:"long", hour: '2-digit', hour12: false, minute:'2-digit', second:'2-digit'}),
  new Date().toLocaleDateString('en-US', {year: 'numeric', month: '2-digit', day: '2-digit'}), // 08/19/2020 (month and day with two digits)
  new Date().toLocaleDateString('en-ZA'), // 2020/08/19 (year/month/day) notice the different locale
  new Date().toLocaleDateString('en-CA'), // 2020-08-19 (year-month-day) notice the different locale
  new Date().toLocaleString("en-US", {timeZone: "America/New_York"}), // 8/19/2020, 9:29:51 AM. (date and time in a specific timezone)
  new Date().toLocaleString("en-US", {hour: '2-digit', hour12: false, timeZone: "America/New_York"}),  // 09 (just the hour)
]

for (const testData of testCases) {
  console.log(testData)
}

Notice that sometimes to output a date in your specific desire format, you have to find a compatible locale with that format. You can find the locale examples here: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_tolocalestring_date_all

Please notice that locale just change the format, if you want to transform a specific date to a specific country or city time equivalent then you need to use the timezone param.

Solution 5

The simplest way to convert your date to the yyyy-mm-dd format, is to do this:

var date = new Date("Sun May 11,2014");
var dateString = new Date(date.getTime() - (date.getTimezoneOffset() * 60000 ))
                    .toISOString()
                    .split("T")[0];

How it works:

• new Date("Sun May 11,2014") converts the string "Sun May 11,2014" to a date object that represents the time Sun May 11 2014 00:00:00 in a timezone based on current locale (host system settings)
• new Date(date.getTime() - (date.getTimezoneOffset() * 60000 )) converts your date to a date object that corresponds with the time Sun May 11 2014 00:00:00 in UTC (standard time) by subtracting the time zone offset
• .toISOString() converts the date object to an ISO 8601 string 2014-05-11T00:00:00.000Z
• .split("T") splits the string to array ["2014-05-11", "00:00:00.000Z"]
• [0] takes the first element of that array

---

Demo

var date = new Date("Sun May 11,2014");
var dateString = new Date(date.getTime() - (date.getTimezoneOffset() * 60000 ))
                    .toISOString()
                    .split("T")[0];

console.log(dateString);

View more solutions

Comments

[porcus]

I like the additional flexibility that this solution gives over the other answers to this question. I haven't thoroughly tested this, but for the format I desired (i.e. "yyyy-MM-dd hh:mm:ss"), it works just as expected.

[bhspencer]

Really multiple variable declarations in the same statement? stackoverflow.com/questions/694102/…

[bhspencer]

@Fuser97381 Multiple variable declarations in the same statement is more than just an aesthetic style preference. It is a dangerous practice. If you inadvertently fail add a comma after each declaration you end up creating global variables. Not something that should be encouraged on what may become the canonical answer to a question.

[Luke Baulch]

BE CAREFUL with this method as it first converts to the date to UTC. If you are in a + timezone and your time portion is early in the day, then it could roll-back a day. Alternatively, if you're in a - timezone and your time portion is late in the day, then it could roll forward a day.

[Vix]

'use strict'; @bhspencer

[exbuddha]

Try this instead: new Date(yourDateStr).toISOString().split('T')[0]

[Malvineous]

How do you handle the date switching by a day as mentioned here by @Luke_Baulch?

[Mitch3091]

You can do this: var todayDate = new Date(); todayDate.setMinutes(todayDate.getMinutes() - todayDate.getTimezoneOffset()); todayDate.toISOString().slice(0,10); This should help avoid the UTC problem.

[Yatender Singh]

padding is not there for 2 letter format. it'll show single digit if date or month is less than 10 that's why can't use this directly.

[Pardeep Jain]

yess but that can be achived simply using javascript, its totaly upto your requirement i think so , isn't it ? @YatenderSingh

[Yatender Singh]

yeah correct but check the title of question "yyyy-mm-dd" format he wants :)

[whyAto8]

@FernandoAguilar One doubt though, how do we know we need to subtract the offset or add it?

[RobG]

Reformatting a date string should not depend on successful parsing of non-standard strings by the built-in parser. Given the OP format, it can be reformatted in less code without using a Date at all.

[Simon D]

Maybe worth noting that it will only give you 2017-08-23 if you're sufficiently behind UTC (e.g. in the US).

[mjwrazor]

const offset = yourDate.getTimezoneOffset(); yourDate = new Date(yourDate.getTime() + (offset*60*1000)); yourDate.toISOString().split('T')[0] this should solve the issue of timezone

[Salman A]

How come this has 123 votes? My timezone is +05:00 and var yourDate = new Date(2018, 3 - 1, 26); yourDate.toISOString().split('T')[0]; gives me "2018-03-25".

[Salman A]

var todayDate = new Date(2018, 3 - 1, 26); todayDate.toISOString().slice(0, 10); gives me "2018-03-25". On another system var todayDate = new Date(2018, 3 - 1, 26, 17, 0, 0); todayDate.toISOString().slice(0, 10); gives me "2018-03-27".

[Salman A]

You could eaaaaaaaasily avoid eval.

[m1m1k]

here's a version which avoids the eval and comments better jsfiddle.net/8904cmLd/2

[Gutimore]

now.toISOString().substring(0,10); This is a cleaner alternative, since it reminds you that YYYY-MM-DD are the first ten characters of the complete iso format

[JesusIsMyDriver.dll]

I benefited from this response. I did replace that line with the eval statement to return ((v.length > 1 ? "0" : "") + z[v.slice(-1)]).slice(-2);

[Steve Angello]

How to increment more 30 days in range 1~31?

[Razvan Zamfir]

What about doing the other way around: turn 2014-05-11 into May 5, 2014?

[maxence51]

Dangerous. In that case you ignore the timezone offset.

[mfcallahan]

I like the solution the best - easy to read, and does not rely on toISOString() and the potential timezone pitfalls with using that function.

[NickG]

Doesn't always work. It sometimes subtracts a day due to UTC conversion.

[Félix Adriyel Gagnon-Grenier]

@SalmanA As Luke mentions, the date is converted in UTC when shown in ISO string (an ISO string is in UTC). The +5 being converted makes the day fall before midnight, as by default Date will be constructed at hour 00h00.

[Félix Adriyel Gagnon-Grenier]

@SalmanA I... see. That was not my impression of that comment, following the wonder upon the votes. I hope you did not feel condescended upon.

[Kodie Grantham]

I really don't get the downvotes. This is definitely a way to accomplish what OP was asking.

[gap]

No one else is aghast that this is the simplest way??

[Peter Mortensen]

How is this related to the question (formatting a date)?

[Douglas Schmidt]

@RazvanZamfir check toLocaleDateString, it may be a cleaner way to output the format you seek: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

[Balmipour]

Nice clean & commented solution. Yet I'm skeptical about the first argument, which is silently replaced by a fresh new date if not recognized as a valid date. I'd rather put this "optionnal default value" as 2nd argument instead, and return some kind of exception (could be a simple "Invalid date format" returned string) in case the format isn't recognized, so that error appear clearly to the tester/user

[Joe's Ideas]

.toISOString() doesn't work correctly with daylight savings though.

[John Slegers]

@JoeDevmon : I don't see how that's relevant here. The - (date.getTimezoneOffset() * 60000 ) bit should eliminate any timezone differences, including the impact of daylight savings time.

[Joe's Ideas]

@JohnSlegers that's what I was thinking, but then I was still getting the day before in some cases. I refactored and your example works now. I must have had a weird date string or something. Thanks for sticking with it and pointing that out. +1 👍

[Sitti Munirah Abdul Razak]

var old_date = new Date(date); var new_date = old_date.getFullYear() + '-' + (old_date.getMonth() + 1) + '-' + old_date.getDate()

[jymbob]

Any idea why this works? Is ISO format just the default, or do these locales genuinely use that format? If it's the former I'd be concerned that it could change unexpectedly in the future.

[KenBuckley]

If you use toISOString, it is easier if you encode your date using UTC in the first place: utcDate1 = new Date(Date.UTC(2020, 0, 1)) -> Wed Jan 01 2020 01:00:00 GMT+0100 (Central European Standard Time) utcDate1.toISOString()-> "2020-01-01T00:00:00.000Z" .Any date/datetime you encode using .UTC will map exactly back as you expect when using .toISOString() .

[babaliaris]

this works like a charm but I don't understand why javascript does not have a native solution for this... I mean, we are in 2020 and date is an important aspect to web apps.

[rococo]

Note: using the helpful solution commented by @mjwrazor, I had to subtract instead of add the offset to get the correct date (change the + (offset to a - (offset)

[mjwrazor]

@rococo you either add or subtract depending on your orientation from UTC 0. Which is England.

[Daniel Viglione]

THis is not working with NodeJS outside of browser.

[HartleySan]

I've searched high and low across SO and other sites to find the best way to deal with timezone issues with dates in JS, and hands down, this is by far the easiest and the best. Thank you!

[ckapilla]

this is the first one that doesn't make my brain hurt.

[Ciprian Tomoiagă]

@jymbob I think these locales genuinely use those formats. I've came to the same answer by looking at this Wikipedia page: en.wikipedia.org/wiki/Date_format_by_country

[Ever]

The second option might display the wrong date because it will display the data in UTC timezone.

[Юрий Яхница]

It sad but it is simpliest way to format js date to string you need. I'm new in js, but in java it is 100 times easier to format date to any format. That is why was thinking there are easier way, but after I tried different solutions I choose this one. Thank you for your answer.

[Adam]

Cool solution, but its a 300kb package

[Kunal]

This doesn't work when the client is ahead of the UTC and the date in the UTC time is one day behind the current client date.

[mickmackusa]

There are several simpler ways to butcher the toISOString string which were already posted before this one. For people who are willing to tolerate the potential inaccuracy of using toISOString, the sheer overhead and code bloat makes this a solution that no one should consider (the first snippet anyway).

[Hashbrown]

Look, man, unless you're trying to reparse dates literally hundreds of thousands of times in a matter of seconds you're not going to see any difference at all, so I don't know where you get off calling it bloat. Like with any other novel answer added to an old, already-answered question; this provides the reader with choice, and maybe, knowledge ("gee, I didnt know regex could do that!"). The reader should know whether or not an answer is appropriate for their usecase, and you insult them.

[mickmackusa]

I never mentioned performance so you can leave the argument about 100,000 iterations. My point is that earlier answers provided simpler techniques.

[Hashbrown]

Yes, but not readable, or easily extensible. You called it bloat, which is literally code...that is perceived as unnecessarily long, slow, or otherwise wasteful of resources. SO is primarily for knowledge, so yes, even though the literal question has been answered, sometimes there are other angles that others (and at least already literally 3▲) find might useful! Imagine that. I don't play the "Fastest Gun In The West" game, so when you see me post a late answer, it is because I have something valuable to offer and I hope that you will acknowledge the care that I take. -some hypocrite

[mickmackusa]

Nothing hypocritical going on here. I am very clear about how the first snippet is far less attractive than simply calling .slice(0,10). slice() is much more concise, direct, readable. I love regex but not for this question. See how I am not attacking you as a person? I am judging your answer to this question.

[Даниил Пронин]

slicing strings is to bad practice

[CyberKing]

Applied in react project: npm install moment --save import moment from 'moment'; const showEventDate = moment(your-date-here).format('YYYY-MM-DD; HH:mm A'); A pure solution for presenting date/time in any format. It gives local date-time with AM/PM and whatever you need just changing the format. Moment.js also provides easy date/time counting solution.

[Tim Hobbs]

@KenBuckley The question is how to get the date in YYYY-MM-DD format. Your comment assumes that value is already available, so it doesn't apply here.

[Tim Hobbs]

This still suffers from problems with timezones as it is based off UTC, so you still have to jump all the hoops of determining the offset and altering the date.

[Tim Hobbs]

@theTradeCoder as Adam mentioned above the size of moment is pretty large (I think it is more like 67kb, but still) so you should consider that when evaluating the ease of use and utility of any dependency. There are smaller alternatives (day.js = 2kb).

[Juanma Menendez]

@TimHobbs you can set the timezone you want eg: ("timeZone: "America/New_York") and the date will be converted to that timezone.

[Qarun Qadir Bissoondial]

For my case where I didn't need the time zones, new Date().toLocaleDateString('en-CA') was perfect

[KenF]

UTC!!!! in australia we are +10 timezone. Because I tend to fix things in afternoon it has taken me a week to find this.

[DavidDunham]

"H" should be capitalized, not "h" (small)

[Rafik Farhad]

Just an update about the moment.js library that - moment.js is already discontinued.

[laconbass]

Dirty, but it works ;) - @TimHobbs The new Date() construct allows generating the Date object

[matvs]

What I find interesting ist that, that this solution has two times better performance, than the one with toISOString

[Chris F Carroll]

After 3 days, and trawling through too many SO javascript date questions, and trying to ask a new question (30 mins before closed as duplicate) here at last is an answer that is actually correct. I could weep.

[Chris F Carroll]

We don't need a screenshot for this if you are not in the 00+00 timezone: > d=new Date() ; d.setHours(0,30,0,0) ; d --> Sat Oct 09 2021 00:30:00 GMT+0100 (BST) ; d.toJSON() --> "2021-10-08T23:30:00.000Z"

[Chris F Carroll]

I feel like the more important point is that all answers using toISOString or toJSON are just wrong for between 1 & 12 hours every day, for most of the world?

[Chris F Carroll]

Where by dangerous you mean, returns the wrong date for several hours every day?

[Hashbrown]

I assume a lot of people are adjusting the Date by their utcOffset first. I could include that in the answer

[James Poulose]

Can you format to yyyy/mm/dd in toLocaleDateString() ?

[Juanma Menendez]

@JamesPoulose yes, you can do new Date().toLocaleDateString('en-ZA');

[Ansh Varun]

Thanks for these code, this is really a better shortcut to obtain format in js render.

[Gardelin]

Problem with this is that every locale will return different result. For example en-GB will return 20/12/2012 and ko-KR will return2012. 12. 20.. But format should be yyyy-mm-dd

[a.anev]

Probably been said already but converting to ISO string and splitting it returns the wrong day for certain dates. Had something to do with timezones and day light savings time

[jmpp]

The documentation for .getTimezoneOffset() says that it gives a positive value when the current locale is late from UTC, and a negative one when it's early. So shouldn't it be new Date(date.getTime() + (date.getTimezoneOffset() * 60000 )) instead to get the correct UTC DateTime?

[John Slegers]

@jmpp : date.getTime() provides a date in a timezone based on your current locale. date.getTimezoneOffset() * 60000 gives you the offset, in seconds of that same time zone, compared with the UTC time zone. By substracting the latter from the former, you effectively remove the offset from your date and thus get the correct date for the UTC time zone.

[jmpp]

@JohnSlegers I missed that date.getTime() was also localized, so it makes sense now. Thank you!

[Liam]

You can do this without the cludgy split by using modern APIs, see this answer

[mikeypie]

This fails in Chrome if the date string is already in the expected output format and the local timezone is west of UTC: d = new Date('2022-05-18') results in '2022-05-17'. That means that if the user's locale format is not '5/18/2022' this might also break.

[mikeypie]

This fails in Chrome if the date string is already in the expected output format and the local timezone is west of UTC: var date = new Date('2022-05-18') results in '2022-05-17'. That means that if the user's locale format is not '5/18/2022' this might also break. This is because of the implementation of Date.parse: new Date('2022-05-18') is not equal to new Date('5/18/2022')

[Justin Grant]

Note that the NPM package proposal-temporal is deprecated and should not be used. Developers looking for Temporal polyfills should check github.com/tc39/proposal-temporal#polyfills to see the recommended list of polyfills, which as of today are @js-temporal/polyfill and temporal-polyfill

[OG Sean]

note "date" should be a var date = new Date() before this line. Or, just new Date() .toISOString().substring(0,10);

[Ryan H.]

Exactly what I needed to get a particular format in local time. Thank you!

[bilalmohib]

That's the correct one