-2

I have a date as a string like so: "2021-08-12". But, I want to display it nicely on the frontend like this : 11th August, 2021

Any recommendations on how to approach this?

ZygD
  • 22,092
  • 39
  • 79
  • 102
Clancinio
  • 734
  • 6
  • 21
  • 40

3 Answers3

2

Use a library like Moment.js

moment().format("Do MMMM, YYYY");
  • Do Day of Month 1st 2nd ... 30th 31st
  • MMMM Month January February ... November December
  • YYYY Year

See also How to format a JavaScript date?

If 12th vs 11th was not a typo and you actually want to subtract a day from the date, moment().subtract(1, 'day') before you display it as above.

Codebling
  • 10,764
  • 2
  • 38
  • 66
2
Note: don't use the following solution in production code. Use the "moment" library as @Codebling mentioned above.

You can do this with vanilla JavaScript as following. See the documentation for Date.toLocaleString().

const dateString = "2012-01-01";

function formatDate(dateString) {
  const suffix = ["st", "nd", "rd", "th"];
  const date = new Date(dateString + " 0:0:0");
  dateString = date.toLocaleString("en-US", {
    month: "long",
    year: "numeric",
  });

  const day = date.getDate();
  return `${day}${suffix[day < 4 ? day - 1 : 3]} ${dateString}`;
}

console.log(formatDate(dateString));

One little advice, build the habit of quickly looking up documentation instead of asking help on SO. I'm giving you this answer from the MDN docs. You can also try using devdocs.io with their offline web app to quickly lookup docs.

h-sifat
  • 1,455
  • 3
  • 19
  • Yes I know that, just format as you like. I just gave a hint. – h-sifat Aug 11 '21 at 14:55
  • I'm not referring to the format, I'm referring to the incorrect date...it shows august 11 instead of august 12 – vanowm Aug 11 '21 at 14:56
  • yes, that is correct, this is because you are not supplying time when creating date object ;) – vanowm Aug 11 '21 at 14:59
  • I don't think that part is relevant, it's the format they are after. – vanowm Aug 11 '21 at 15:05
  • @vanowm, Dude you made me update that solution. Now it works – h-sifat Aug 11 '21 at 15:35
  • `getDay()` is a day of the week not day of the month ;) – vanowm Aug 11 '21 at 15:37
  • Really? why is that? I quit :( – h-sifat Aug 11 '21 at 15:39
  • 1
    And still, for the reason I've mention before ****cough****time-not-supplied****cough**** I'm getting very weird result when changing date to `2012-01-01`: `32th December 2011` – vanowm Aug 11 '21 at 15:42
  • Dang, now I get it! You could have just told me that! Thanks a lot :). – h-sifat Aug 11 '21 at 15:42
  • I've fixed the `2012-01-01`, but you should not pass `32th December 2011` as you clearly see I'm not doing any validation here! – h-sifat Aug 11 '21 at 15:49
  • Oh, never mind, that was my mistake. I replaced `getDay` with `getDate` in your original code, forgot about the `day+1` later. Now your code works perfectly ;) – vanowm Aug 11 '21 at 15:54
  • 1
    Recommend against vanilla Javascript for date manipulation. It will work correctly in 99% of cases and be horribly broken in the other 1%, not to mention being more code. When trying to do date math ad-hoc, one quickly runs into issues with leap years, leap seconds, not to mention the nightmare of time zones (things like daylight savings have historically been applied on different dates). In my experience I've found it worth it to invest in the library – Codebling Aug 11 '21 at 15:59
  • 1
    Thanks for the information. At first I thought It would be easy to do. But after editing my code I also realized that it's a bad idea to mess with time and date manually :( – h-sifat Aug 11 '21 at 16:01
1

Convert it to Date object and from there create whatever format you want:

const myDate = "2021-08-21";

const date = new Date(myDate + " 0:0:0");

console.log(date.getDate() + "th " + date.toLocaleDateString("en-us", {month: "long"}) + ", " + date.getFullYear());
vanowm
  • 9,466
  • 2
  • 21
  • 37