Getting a formatted date

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Getting a formatted date

If I ask you what’s the date today, I don’t expect a full-blown reply that says Tue Jan 23 2019 17:21:13 GMT+0800 (Singapore Standard Time). I’ll expect something along the lines of 23 Jan, 2019.

How do you get 23 Jan, 2019 from the Date object?

Built-in formats

Date comes with seven methods that lets you convert a Date object into a string. Here’s what each of them do:

  1. toString returns: Wed Jan 23 2019 17:23:42 GMT+0800 (Singapore Standard Time)
  2. toDateString returns: Wed Jan 23 2019
  3. toLocaleString returns: 23/01/2019, 17:23:42
  4. toLocaleDateString returns: 23/01/2019
  5. toGMTString returns: Wed, 23 Jan 2019 09:23:42 GMT
  6. toUTCString returns: Wed, 23 Jan 2019 09:23:42 GMT
  7. toISOString returns:2019-01-23T09:23:42.079Z

Each method gives a specific date/time string. Unfortunately, none of them gives us the format (23 Jan, 2019) we wanted.

We need to create the format ourselves with some Date methods.

Date methods

Here’s a list of methods that helps you format a date.

  1. getFullYear: Gets 4-digit year according to local time.
  2. getMonth: Gets month of the year (0-11) according to local time. Month is zero-indexed (which means January === 0 and December === 11).
  3. getDate: Gets day of the month (1-31) according to local time.
  4. getDay: Gets day of the week (0-6) according to local time. Day of the week begins with Sunday (0) and ends with Saturday (6).

So, what should you write to get 23 January, 2019?

Let’s work it through.

Creating a custom format

First, we need to create a date object.

const today = new Date()

From this point onwards, we’re going to assume the today is 23 January 2019. Substitute the values for today with the actual date when you work through this lesson.

Getting the day of the month (23) is simple. We can use getDate.

const day = today.getDate()
console.log(day) // 23

Getting the full year (2019) is simple too. We can use getFullYear.

const year = today.getFullYear()
console.log(year) // 2019

Getting January is harder.

We only have access to getMonth, and getMonth returns a number from 0 to 11. This means we must convert the month number (0-11) into a month string (January-December) ourselves.

First, we need to create an object that tells us 0 is January, 1 is February, 2 is March… and 11 is December.

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

Notice this is a zero-indexed object? This object has the same structure as an Array. We can use an Array instead.

const monthsInAYear = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

To get January, we use getMonth to get monthNumber from the Date object. Then, we pass monthNumber into monthsInAYear to get January.

const monthIndex = today.getMonth()
const monthName = monthsInAYear[monthIndex]
console.log(monthName) // January

The condensed version:

const month = monthsInAYear[today.getMonth()]
console.log(month) // January

To get 23 January, 2019, we put the values we retrieved together in a template literal:

const dateString = `${day} ${month}, ${year}`
console.log(dateString) // 23 January, 2019

What if you want Jan instead of January?

If you want Jan (shortname) instead of January (longname), you have to modify monthsInAYear to include both shortnames and longnames.

const monthsInAYear = [
  { shortname: 'Jan', longname: 'January' },
  { shortname: 'Feb', longname: 'February' },
  { shortname: 'Mar', longname: 'March' },
  { shortname: 'Apr', longname: 'April' },
  { shortname: 'May', longname: 'May' },
  { shortname: 'Jun', longname: 'June' },
  { shortname: 'Jul', longname: 'July' },
  { shortname: 'Aug', longname: 'August' },
  { shortname: 'Sep', longname: 'September' },
  { shortname: 'Oct', longname: 'October' },
  { shortname: 'Nov', longname: 'November' },
  { shortname: 'Dec', longname: 'December' }
]

With the new monthsInAYear array, you get January with this:

const longMonth = monthsInAYear[today.getMonth()].longname
console.log(longMonth) // January

And Jan this way:

const shortMonth = monthsInAYear[today.getMonth()].shortname
console.log(shortMonth) // Jan

Getting day of the week

What if you wanted Wednesday, 23 January instead?

The Date object has a getDay method that tells us the day of the week. It returns a number from 0 to 6. The values goes like this:

  1. 0: Sunday
  2. 1: Monday
  3. 2: Tuesday
  4. 3: Wednesday
  5. 4: Thursday
  6. 5: Friday
  7. 6: Saturday

If we want to get Wednesday from Date we need to create a daysInAWeek array that converts numbers into strings.

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

To get Wednesday we use the following:

const dayString = daysInAWeek[today.getDay()]
console.log(dayString) // Wednesday

If you want Wed you know what to do:

const daysInAWeek = [
  { shortname: 'Sun', longname: 'Sunday' },
  { shortname: 'Mon', longname: 'Monday' },
  { shortname: 'Tue', longname: 'Tuesday' },
  { shortname: 'Wed', longname: 'Wednesday' },
  { shortname: 'Thu', longname: 'Thursday' },
  { shortname: 'Fri', longname: 'Friday' },
  { shortname: 'Sat', longname: 'Saturday' }
]

const dayShortString = daysInAWeek[today.getDay()].shortname // Wed
const dayLongString = daysInAWeek[today.getDay()].longname // Wednesday

Exercise

Assuming today is 23 January 2019, get the following date strings:

  1. 23/01/2019
  2. 01/23/2019
  3. 23 Jan, 2019
  4. 23 Jan, Wed
  5. Wednesday, 23 January, 2019
  6. 23rd January, 2019

Answers

Answer for 23/01/2019:

const today = new Date()
const dateString = `${today.getDate()}/${today.getMonth() + 1}/${today.getFullYear()}`

Answer for 01/23/2019:

const today = new Date()
const dateString = `${today.getMonth() + 1}/${today.getDate()}/${today.getFullYear()}`

Answer for 23 Jan, 2019:

const monthsInAYear = [
  { shortname: 'Jan', longname: 'January' },
  { shortname: 'Feb', longname: 'February' },
  { shortname: 'Mar', longname: 'March' },
  { shortname: 'Apr', longname: 'April' },
  { shortname: 'May', longname: 'May' },
  { shortname: 'Jun', longname: 'June' },
  { shortname: 'Jul', longname: 'July' },
  { shortname: 'Aug', longname: 'August' },
  { shortname: 'Sep', longname: 'September' },
  { shortname: 'Oct', longname: 'October' },
  { shortname: 'Nov', longname: 'November' },
  { shortname: 'Dec', longname: 'December' }
]

const today = new Date()
const day = today.getDate()
const month = monthsInAYear[today.getMonth()].shortname
const year = today.getFullYear()
const dateString = `${day} ${month}, ${year}`

Answer for 23 Jan, Wed:

const monthsInAYear = [
  { shortname: 'Jan', longname: 'January' },
  { shortname: 'Feb', longname: 'February' },
  { shortname: 'Mar', longname: 'March' },
  { shortname: 'Apr', longname: 'April' },
  { shortname: 'May', longname: 'May' },
  { shortname: 'Jun', longname: 'June' },
  { shortname: 'Jul', longname: 'July' },
  { shortname: 'Aug', longname: 'August' },
  { shortname: 'Sep', longname: 'September' },
  { shortname: 'Oct', longname: 'October' },
  { shortname: 'Nov', longname: 'November' },
  { shortname: 'Dec', longname: 'December' }
]

const daysInAWeek = [
  { shortname: 'Sun', longname: 'Sunday' },
  { shortname: 'Mon', longname: 'Monday' },
  { shortname: 'Tue', longname: 'Tuesday' },
  { shortname: 'Wed', longname: 'Wednesday' },
  { shortname: 'Thu', longname: 'Thursday' },
  { shortname: 'Fri', longname: 'Friday' },
  { shortname: 'Sat', longname: 'Saturday' }
]

const today = new Date()
const day = today.getDate()
const month = monthsInAYear[today.getMonth()].shortname
const dayString = daysInAWeek[today.getDay()].shortname
const dateString = `${day} ${month}, ${dayString}`

Answer for Wednesday, 23 January, 2019:

const monthsInAYear = [
  { shortname: 'Jan', longname: 'January' },
  { shortname: 'Feb', longname: 'February' },
  { shortname: 'Mar', longname: 'March' },
  { shortname: 'Apr', longname: 'April' },
  { shortname: 'May', longname: 'May' },
  { shortname: 'Jun', longname: 'June' },
  { shortname: 'Jul', longname: 'July' },
  { shortname: 'Aug', longname: 'August' },
  { shortname: 'Sep', longname: 'September' },
  { shortname: 'Oct', longname: 'October' },
  { shortname: 'Nov', longname: 'November' },
  { shortname: 'Dec', longname: 'December' }
]

const daysInAWeek = [
  { shortname: 'Sun', longname: 'Sunday' },
  { shortname: 'Mon', longname: 'Monday' },
  { shortname: 'Tue', longname: 'Tuesday' },
  { shortname: 'Wed', longname: 'Wednesday' },
  { shortname: 'Thu', longname: 'Thursday' },
  { shortname: 'Fri', longname: 'Friday' },
  { shortname: 'Sat', longname: 'Saturday' }
]

const today = new Date()
const day = today.getDate()
const month = monthsInAYear[today.getMonth()].longname
const dayString = daysInAWeek[today.getDay()].longname
const year = today.getFullYear()
const dateString = `${dayString}, ${day} ${month}, ${year}`

Answer for 23rd January, 2019:

This one is trickier. You need to create the day suffix for rd too. Here’s the code:

const monthsInAYear = [
  { shortname: 'Jan', longname: 'January' },
  { shortname: 'Feb', longname: 'February' },
  { shortname: 'Mar', longname: 'March' },
  { shortname: 'Apr', longname: 'April' },
  { shortname: 'May', longname: 'May' },
  { shortname: 'Jun', longname: 'June' },
  { shortname: 'Jul', longname: 'July' },
  { shortname: 'Aug', longname: 'August' },
  { shortname: 'Sep', longname: 'September' },
  { shortname: 'Oct', longname: 'October' },
  { shortname: 'Nov', longname: 'November' },
  { shortname: 'Dec', longname: 'December' }
]

const dateSuffix = {
  1: 'st',
  2: 'nd',
  3: 'rd',
  4: 'th',
  5: 'th',
  6: 'th',
  7: 'th',
  8: 'th',
  9: 'th',
  10: 'th',
  11: 'th',
  12: 'th',
  13: 'th',
  14: 'th',
  15: 'th',
  16: 'th',
  17: 'th',
  18: 'th',
  19: 'th',
  20: 'th',
  21: 'st',
  22: 'nd',
  23: 'rd',
  24: 'th',
  25: 'th',
  26: 'th',
  27: 'th',
  28: 'th',
  29: 'th',
  30: 'th',
  31: `st`
}

const today = new Date()
const day = today.getDate()
const daySuffix = dateSuffix[day]
const month = monthsInAYear[today.getMonth()].longname
const year = today.getFullYear()
const dateString = `${day}${daySuffix} ${month}, ${year}`

Why do we use an object for dateSuffix? Simple, well, you can use an array too. But can you keep track of the correct number of ths without the numeric key?

Use what makes sense! :)