How to convert a full date to a short date in javascript?

Question

I have a date like this Monday, January 9, 2010

I now want to convert it to

1/9/2010 mm/dd/yyyy

I tried to do this

    var startDate = "Monday, January 9, 2010";
    var convertedStartDate = new Date(startDate);
    var month = convertedStartDate.getMonth() + 1
    var day = convertedStartDate.getDay();
    var year = convertedStartDate.getFullYear();
    var shortStartDate = month + "/" + day + "/" + year;

However it must be thinking the date is in a different format since day returns 1 instead of 9.

Solution 1

The getDay() method returns a number to indicate the day in week (0=Sun, 1=Mon, ... 6=Sat). Use getDate() to return a number for the day in month:

var day = convertedStartDate.getDate();

If you like, you can try to add a custom format function to the prototype of the Date object:

Date.prototype.formatMMDDYYYY = function(){
    return (this.getMonth() + 1) + 
    "/" +  this.getDate() +
    "/" +  this.getFullYear();
}

After doing this, you can call formatMMDDYYY() on any instance of the Date object. Of course, this is just a very specific example, and if you really need it, you can write a generic formatting function that would do this based on a formatting string, kinda like java's SimpleDateeFormat (http://java.sun.com/j2se/1.4.2/docs/api/java/text/SimpleDateFormat.html)

(tangent: the Date object always confuses me... getYear() vs getFullYear(), getDate() vs getDay(), getDate() ranges from 1..31, but getMonth() from 0..11

It's a mess, and I always need to take a peek. http://www.w3schools.com/jsref/jsref_obj_date.asp)

Solution 2

Here you go:

(new Date()).toLocaleDateString('en-US');

That's it !!

you can use it on any date object

let's say.. you have an object called "currentDate"

var currentDate = new Date(); //use your date here
currentDate.toLocaleDateString('en-US'); // "en-US" gives date in US Format - mm/dd/yy

(or)

If you want it in local format then

currentDate.toLocaleDateString(); // gives date in local Format

Solution 3

Built-in toLocaleDateString() does the job, but it will remove the leading 0s for the day and month, so we will get something like "1/9/1970", which is not perfect in my opinion. To get a proper format MM/DD/YYYY we can use something like:

new Date(dateString).toLocaleDateString('en-US', {
  day: '2-digit',
  month: '2-digit',
  year: 'numeric',
})

Update: We can get similar behavior using Intl.DateTimeFormat which has decent browser support. Similar to toLocaleDateString(), we can pass an object with options:

const date = new Date('Dec 2, 2021') // Thu Dec 16 2021 15:49:39 GMT-0600
const options = {
  day: '2-digit',
  month: '2-digit',
  year: 'numeric',
}
new Intl.DateTimeFormat('en-US', options).format(date) // '12/02/2021'

Solution 4

var d = new Date("Wed Mar 25 2015 05:30:00 GMT+0530 (India Standard Time)"); 
document.getElementById("demo").innerHTML = d.toLocaleDateString();

Solution 5

date.toLocaleDateString('en-US') works great. Here's some more information on it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

View more solutions

Comments

[chobo2]

Cool that worked. But how can I set it to always do the mm/dd/yyyy since I always want this in that date format no matter what the client set. Like I know I am printing it in the format I want but I am not sure if how it would react to the conversion if it would try to put it in the client format.

[chobo2]

I am still not sure if I need to be concerned about other date formats. Maybe I have to post a new question.

[Roland Bouman]

Date is just a class for representing date/time values. It has a number of methods that return a string representation, but your desired format is simply not there. The format you created is not a Date object: it's a string, you just created it with data coming out of the Date object. You can try to add your own formatting method to the prototype of the Date object. I'll edit my answer to show how.

[Roland Bouman]

@Cory Mawhorter "Don't forget": I didn't. I wrote: "but getMonth() from 0..11". Maybe you shouldn't forget to read before you comment. "Don't link to w3schools!" < why not? They explain these points really well.

[snumpy]

Note that you'll want to do return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear(); if you want the month to be correct (since, as Roland mentioned, getMonth() returns 0..11)

[Josh]

This is not a standard. According to MDN: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

[Brian Ogden]

toLocaleString and toLocaleFormat are now obsolete and perhaps even deprecated

[JDuarteDJ]

This was Good for a quick and dirty fix, always loved one liners: For current date! (new Date()).toLocaleString().substring(0,(new Date()).toLocaleString().indexOf(' '))

[Charlie Ng]

please avoid using toLocaleDateString in IE 11.

[Nelewout]

While this code may answer the question, it lacks explanation. Please consider adding text to explain what it does, and why it answers the question posed.

[Demonic218]

Code does the trick, but as @N.Wouda states, it would be better with some sort of explanation.

[cs_pupil]

@CharlieNg how come? At a glance, it looks like it's working for me in IE 11.

[cs_pupil]

IE 11 issues: stackoverflow.com/questions/21413757/…

[Connor]

Ok, if I ever teleport into the past I will not use toLocaleDateString on IE 11

[Devner]

Works perfect! Thanks for sharing.

[Constantin]

Not sure why I'm getting downvotes since this is built-in functionality in JS. I don't understand why someone would prefer using external libraries instead of built in features.

[Devner]

I am with you on this.

[scottdavidwalker]

How can you use the local datetime string with those options? There isn't an overload for just options and also named parameters doesn't seem to work?

[Constantin]

The syntax is dateObj.toLocaleDateString([locales[, options]]). You can find all the options here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

[thdoan]

One thing to look out for is time conversion offsets, which can lead to unexpected results, e.g.: new Date('2021-09-09').toLocaleDateString('en-US'); // returns "9/8/2021"