loading...

Formatting a date in JavaScript

debs_obrien profile image Debbie O'Brien Originally published at debbie.codes ・2 min read

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)
},
Enter fullscreen mode Exit fullscreen mode

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)
},
Enter fullscreen mode Exit fullscreen mode

Result: 25/12/2020

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

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)
},
Enter fullscreen mode Exit fullscreen mode

Result: viernes, 25 de diciembre de 2020

Example

Posted on by:

debs_obrien profile

Debbie O'Brien

@debs_obrien

Head of Learning and Developer Advocate at NuxtJS, speaker, writer, teacher, open source contributor, vue, nuxt, webpack

Discussion

pic
Editor guide