Formatting a date in JavaScript

When it comes to dates we often add big libraries like Moment.js or Luxon just to format a simple date. But it is actually much simpler than that by using the toLocalDateString() method. We don't have to install any packages. It just works

In the example below we are using Vue so therefore we create a method called formatDate() and pass in the date that we want to format. We then set our options of how we want the date to be shown. This is an object where we can choose if we want the month to be numeric or long for example. We then return the new date passing in our date we want formatted. We then chain our toLocalDateString() method passing in the language we want to use followed by the options.

<script>
export default {
  methods: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return new Date(date).toLocaleDateString('en', options)
    },
  }
};
</script>

Different Options

We can then use our method like we would use any Vue method in our template passing in the date want formatted

<template>
  <p>
    {{ formatDate('2020-12-25') }}
  </p>
</template>

Result: December 25, 2020

We can also use different options. Perhaps we want to show the day of the week. We can do this by adding in the weekday.

formatDateDay(date) {
  const options = {  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(date).toLocaleDateString('en-us', options)
},

Result: Friday, October 9, 2020

Different Locales

And we can also pass in different locales so we get the date in the right order which is especially useful for when working with UK v US date formatting.

formatDateEN(date) {
  const options = { year: 'numeric', month: 'numeric', day: 'numeric' }
  return new Date(date).toLocaleDateString('en-GB', options)
},

Result: 25/12/2020

formatDateUS(date) {
  const options = { year: 'numeric', month: 'numeric', day: 'numeric' }
  return new Date(date).toLocaleDateString('en-US', options)
},

Result: 12/25/2020

And of course we can also change the format to show the day and month in a different language.

formatDateDayEs(date) {
  const options = {  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(date).toLocaleDateString('es', options)
},

Result: viernes, 25 de diciembre de 2020

Example

• See my CodePen to play around with the dates.
• See the Mozilla Docs for more info.

Comments

[afflexux]

This is great, thanks.

I've extracted it out to a function in plugins/filters.js, I find it easier to put really useful stuff in there and just drop that full file into new nuxt projects.

Vue.filter('formatDate', function (date) {
const options = {
weekday: 'short',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: false,
}
return new Date(date).toLocaleDateString('en', options)
})

Added options to also format and show the time.

Result >>

Thu, October 22, 2020, 23:09