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

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
– Jaromanda X, Commented Sep 7, 2020 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
– js-learner, Commented Sep 7, 2020 at 14:05
or, if you're feeling adventurous, you can use Intl.DateTimeFormat with an appropriate locale and options — Jaromanda X
– Jaromanda X, Commented Sep 7, 2020 at 14:06
There are a huge number of questions on how to format a 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
– RobG, Commented Sep 7, 2020 at 23:19

Tobi Obeck · Accepted Answer · 2024-02-04 11:52:07Z

13

I managed to create a working function for this:

function 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;
}

formatDate('2019-05-30T00:00:00.000Z') // 30-May-2019

edited Feb 4, 2024 at 11:52

Tobi Obeck

2,3752 gold badges24 silver badges36 bronze badges

answered Sep 7, 2020 at 15:15

js-learner

5172 gold badges11 silver badges28 bronze badges

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

1 Comment

RobG Over a year ago

This is very similar to this answer.

Chaz · Accepted Answer · 2020-09-07 14:32:31Z

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

moraaaa · Accepted Answer · 2020-09-07 15:30:11Z

1

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 7, 2020 at 15:30

answered Sep 7, 2020 at 14:22

moraaaa

942 bronze badges

2 Comments

Yevhen Horbunkov Over a year ago

Have you ever heard of Array.prototype.indexOf()?

eric Over a year ago

Should be date.getDate() instead of date.getDay()

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Related