How to format date in javascript as DD-MMM-YYYY?

Question

So the backend serves date to FE as: '2019-05-30T00:00:00.000Z'

I am trying render on FE as 30-May-2019

So...

let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );

I have been trying to use the MDN Javascript Date documentation

But how do you even start to modify a Date object and control to desired output?

you don't modify a date object, use the methods it has to output what you want (hint: `.getDate`, `.getMonth`, `.getFullyear`) — Jaromanda X, Sep 07 '20 at 14:01
@JaromandaX Ahh got you, so it's a case building the desired output using like you say .getDate, .getMonth, .getFullyear. Brilliant mate :) — js-learner, Sep 07 '20 at 14:05
or, if you're feeling adventurous, you can use [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) with an appropriate locale and options — Jaromanda X, Sep 07 '20 at 14:06
There are a huge number of questions on [how to format a date](https://stackoverflow.com/search?q=%5Bjavascript%5D+format+date), please try to write your own code then ask if you have issues. The use of *Date.parse* in `new Date(Date.parse(string))` is redundant, `new Date(string)` will produce an identical result. — RobG, Sep 07 '20 at 23:19

score 1 · Accepted Answer · answered Sep 07 '20 at 15:15

1

Thanks for all the contributions to this question.

I managed to create a working function for this:

formatDate(value) {
    let date = new Date(value);
    const day = date.toLocaleString('default', { day: '2-digit' });
    const month = date.toLocaleString('default', { month: 'short' });
    const year = date.toLocaleString('default', { year: 'numeric' });
    return day + '-' + month + '-' + year;
}

answered Sep 07 '20 at 15:15

js-learner

165
1
12

This is very similar to [this answer](https://stackoverflow.com/a/3552493/257182). – RobG Sep 08 '20 at 01:45

moraaaa · Answer 2 · 2020-09-07T15:30:11.240

0

function formatDate(dateString) {
let date = new Date(dateString),
    day = date.getDay(),
    month = date.getMonth(),
    year = date.getFullYear(),
    months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
      
return day + '-' + months[month] + '-' + year;
}

Predefined functions and an array.

edited Sep 07 '20 at 15:30

answered Sep 07 '20 at 14:22

moraaaa

64
2

Have you ever heard of `Array.prototype.indexOf()`? – Yevgen Gorbunkov Sep 07 '20 at 14:43

Chaz · Answer 3 · 2020-09-07T14:32:31.747

This uses the toLocaleString() method to get the month name, otherwise you would need an array of month names to match the output of date.getMonth() which would be just the number (0-indexed)(e.g. january would be 0)

const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

month = monthNames[date.getMonth()];

let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );

console.log(`${date.getDate()}-${date.toLocaleString('default', { month: 'long' })}-${date.getFullYear()}`);

Another approach would be to use the toLocaleString() for the rest of the formatting as well:

let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );

dateFormatted = date.toLocaleString('default',{day: 'numeric', month: 'long', year: 'numeric'});
console.log(dateFormatted);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat

How to format date in javascript as DD-MMM-YYYY?

3 Answers3