如何将字符串日期转换为更易读的版本

Question

I have a date in my database like this 2021/04/26

And I wanna convert this to string date to: Monday, April 04

I have tried In many different ways. I am very week in working with dates in JavaScript.

I tried to do like this new Date('2021/04/26').getDate() // Which return very strange date.

Can Anyone help me to convert that string to this Monday, April 04

Answer 1

Method 1: By using only the build in functions this is the closest you can get to your example:

new Date('2021/04/26').toDateString()

Method 2: Do it on your own like this:

  const months = {
  0: 'January',
  1: 'February',
  2: 'March',
  3: 'April',
  4: 'May',
  5: 'June',
  6: 'July',
  7: 'August',
  8: 'September',
  9: 'October',
  10: 'November',
  11: 'December'
}

const days = [
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday'
]

let yourDate = new Date('2021/04/26');
let yourDateString = days[yourDate.getDay()]+', '+months[yourDate.getMonth()]+' '+yourDate.getFullYear();

RESULT: "Monday, April 2021"

Method 3: Use a third party library.

Answer 2

If all you need is to output the date in that format, and not do any date based logic, you could convert the date when selecting from the database (you can of course still select the original date column at the same time). This depends on using the correct date type for the column.

For MySQL: https://dev.mysql.com/doc/refman/8.0/en/date-and-time-functions.html#function_date-format

SELECT date_format( DATE_COLUMN, '%W, %M %d' ) as NEW_DATE, ...

You could also convert it using a server side language like PHP if you are using one. If you let us know how you are fetching and outputting the data there might be a better way.

Answer 3

I will leave the parsing of the date into a Date object out of this answer. Just passing the string as-is might work, or it might break on some setups/locales. You are usually better off manually parsing it and explicitly setting year, month and date.

You can print the date in a more readable format using Date.toLocaleDateString ( mdn ). This does not allow you to get your date in any format you can possibly desire, but it does a reasonable job in getting your date in a readable format for the language you want to display it in.

You can get the options from the implementation of the localisation helper .

 const currentDate = new Date(); console.log(currentDate.toLocaleDateString('en-gb', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })); console.log(currentDate.toLocaleDateString('en-gb', { weekday: 'narrow', year: '2-digit', month: 'long', day: '2-digit' }));

If you want full control over what you output, you will need a library. Selecting that library is out-of-scope for Stackoverflow though, so I will not suggest one here.