Categories
date date-formatting javascript

How do I format a date in JavaScript?

3146

How do I format a Date object to a string?

5

1661

For custom-delimited date formats, you have to pull out the date (or time)
components from a DateTimeFormat object (which is part of the
ECMAScript Internationalization API), and then manually create a string
with the delimiters you want.

To do this, you can use DateTimeFormat#formatToParts. You could
destructure the array, but that is not ideal, as the array output depends on the
locale:

{ // example 1
   let f = new Intl.DateTimeFormat('en');
   let a = f.formatToParts();
   console.log(a);
}
{ // example 2
   let f = new Intl.DateTimeFormat('hi');
   let a = f.formatToParts();
   console.log(a);
}

Better would be to map a format array to resultant strings:

function join(t, a, s) {
   function format(m) {
      let f = new Intl.DateTimeFormat('en', m);
      return f.format(t);
   }
   return a.map(format).join(s);
}

let a = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
let s = join(new Date, a, '-');
console.log(s);

You can also pull out the parts of a DateTimeFormat one-by-one using
DateTimeFormat#format, but note that when using this method, as of March
2020, there is a bug in the ECMAScript implementation when it comes to
leading zeros on minutes and seconds (this bug is circumvented by the approach
above).

let d = new Date(2010, 7, 5);
let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
let mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d);
let da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
console.log(`${da}-${mo}-${ye}`);

When working with dates and times, it is usually worth using a library (eg.
moment.js, luxon) because of the many hidden complexities of the
field.

Note that the ECMAScript Internationalization API, used in the solutions above
is not supported in IE10 (0.03% global browser market share in Feb
2020).

4

  • 2

    Or extend the Date object, like I did at stackoverflow.com/questions/3187790/…

    Aug 23, 2010 at 23:41

  • 46

    I get that ye is year, mo is month and da is day. What is o? What is a? What is m? Could you please use proper variable names?

    Jan 19, 2021 at 20:41


  • 6

    in 2021, momentjs docs say we would like to discourage Moment from being used in new projects going forward

    – shamaseen

    Jul 13, 2021 at 14:47

  • this is the best answer IMHO (last snippet) because allows flexibility in any format, i.e., you don’t need to seek the country code that satisfies your needs

    Mar 17 at 16:31

1661

For custom-delimited date formats, you have to pull out the date (or time)
components from a DateTimeFormat object (which is part of the
ECMAScript Internationalization API), and then manually create a string
with the delimiters you want.

To do this, you can use DateTimeFormat#formatToParts. You could
destructure the array, but that is not ideal, as the array output depends on the
locale:

{ // example 1
   let f = new Intl.DateTimeFormat('en');
   let a = f.formatToParts();
   console.log(a);
}
{ // example 2
   let f = new Intl.DateTimeFormat('hi');
   let a = f.formatToParts();
   console.log(a);
}

Better would be to map a format array to resultant strings:

function join(t, a, s) {
   function format(m) {
      let f = new Intl.DateTimeFormat('en', m);
      return f.format(t);
   }
   return a.map(format).join(s);
}

let a = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
let s = join(new Date, a, '-');
console.log(s);

You can also pull out the parts of a DateTimeFormat one-by-one using
DateTimeFormat#format, but note that when using this method, as of March
2020, there is a bug in the ECMAScript implementation when it comes to
leading zeros on minutes and seconds (this bug is circumvented by the approach
above).

let d = new Date(2010, 7, 5);
let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
let mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d);
let da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
console.log(`${da}-${mo}-${ye}`);

When working with dates and times, it is usually worth using a library (eg.
moment.js, luxon) because of the many hidden complexities of the
field.

Note that the ECMAScript Internationalization API, used in the solutions above
is not supported in IE10 (0.03% global browser market share in Feb
2020).

4

  • 2

    Or extend the Date object, like I did at stackoverflow.com/questions/3187790/…

    Aug 23, 2010 at 23:41

  • 46

    I get that ye is year, mo is month and da is day. What is o? What is a? What is m? Could you please use proper variable names?

    Jan 19, 2021 at 20:41


  • 6

    in 2021, momentjs docs say we would like to discourage Moment from being used in new projects going forward

    – shamaseen

    Jul 13, 2021 at 14:47

  • this is the best answer IMHO (last snippet) because allows flexibility in any format, i.e., you don’t need to seek the country code that satisfies your needs

    Mar 17 at 16:31

706

If you need to quickly format your date using plain JavaScript, use getDate, getMonth + 1, getFullYear, getHours and getMinutes:

var d = new Date();

var datestring = d.getDate()  + "-" + (d.getMonth()+1) + "-" + d.getFullYear() + " " +
d.getHours() + ":" + d.getMinutes();

// 16-5-2015 9:50

Or, if you need it to be padded with zeros:

var datestring = ("0" + d.getDate()).slice(-2) + "-" + ("0"+(d.getMonth()+1)).slice(-2) + "-" +
    d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);

// 16-05-2015 09:50

2

  • 42

    you can also pad zeros with .toString().padStart(2, '0')

    Jan 15, 2019 at 10:30

  • 6

    @BennyJobigan It should be mentioned that String.padStart() is only available from ECMAScript 2017.

    – JHH

    May 17, 2019 at 11:33