How to use Date-FNS in VueJS?

Question

I'm new to Date-FNS and I need to get this example to work in VueJS:

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), '[Today is a] dddd')
//=> "Today is a Wednesday"

formatDistance(subDays(new Date(), 3), new Date())
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."

How to get it to work?

Put code for what? You see, you don't tell what you wanted. As far as we can know, you don't need to put no code anywhere... — acdcjunior, Mar 29 '18 at 17:39

samayo · Accepted Answer · 2018-10-22T00:16:11.283

18

Just like moment js, all you need is to use the date library is to import and include it in your data:

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

export default {
  data () {
    return {
      format,
    }
  }
}

And now in your template, you can use format as:

<template>
 <p> Today's date is: {{ format(new Date(), 'dddd')  }} </p>
</template>

With Locale:

I haven't tried the locale but it seems very straight forward. According to the manual I think this should work.

import { format, formatDistance, formatRelative, subDays } from 'date-fns'
import es from 'date-fns/locale/es'
window.locale = 'es'

export default {
  data () {
    return {
      format,
    }
  },

  methods: {
    getFormat () {
      return this.format(new Date(), 'dddd', {locale: window.locale})
    } 
  }
}

And now in your template, you can use format as:

<template>
 <p> Today's date is: {{ getFormat() }} </p>
</template>

I think if you spend a couple of minutes with it, you can get a better working solution for you.

edited Oct 22 '18 at 00:16

answered Mar 29 '18 at 18:58

samayo

16,163
12
91
106

Thank you @samayo, can you please tell me how to add the _locale_ feature to it? https://date-fns.org/v1.29.0/docs/I18n I need to change it to _es_ – Tom Mar 29 '18 at 19:54
Well, I haven't tested it, but I gave it a shot. It should work now, see update – samayo Mar 29 '18 at 20:06
So will I need to import the locale everytime in every component ? – rochasdv Apr 11 '20 at 18:56
@rochasdv I don't know, I am sure there is a better way to do it. I don't know much about the library more than what I answered. – samayo Apr 11 '20 at 22:08

Ashton · Answer 2 · 2020-01-22T21:30:12.813

Update with lazy loading approach

This option is good if you need to support many locales and want to pay attention to bundle sizes.

let dateFnsLocale
if (lang === 'en') { dateFnsLocale = await import('date-fns/locale/en-US') }
if (lang === 'hu') { dateFnsLocale = await import('date-fns/locale/hu') }
if (lang === 'fr') { dateFnsLocale = await import('date-fns/locale/fr') }

The reason why I'm not dynamically concatenating the lang to the import string is because I've found that in that case Webpack will not be able to decide which locales you'll import, and it takes all.

Personally I've started to store the dateFnsLocale in Vuex, so once your import is done you can commit it to state if you want, making it accessible throughout your application similarly as the global namespace of window did.

Original answer

If you need to support multiple locales I think it's best to do this in your main.js.

import { default as en } from 'date-fns/locale/en'
import { default as hu } from 'date-fns/locale/hu'
import { default as fr } from 'date-fns/locale/fr'

window.dateFnsLocales = {
  hu,
  fr,
  en
}

Then anywhere in your script tags you can:

format(new Date(), 'dddd', {locale: window.dateFnsLocales[CURRENTLY SELECTED LOCALE]})

score 2 · Answer 3 · answered Jan 08 '19 at 21:29

In the version v1.30.1 of date-fns you have to import/require from date-fns/something.

In order to make it work with Vuejs:

import format from "date-fns/format"
import distanceInWords from "date-fns/distance_in_words"
import subDays from "date-fns/sub_days"

export default {
  name: "MyComponent",
  computed: {
    inWords () { return distanceInWords(subDays(new Date(), 3), new Date()) },
    today () { return format(new Date(), '[Today is a] dddd') },
  },
}

And the template tag:

<template>
  <div>
    <p>{{ inWords }}</p>
    <p>{{ today }}</p>
  </div>
</template>

score -2 · Answer 4 · answered Mar 29 '18 at 19:37

Just got it to work:

In your template:

{{ formatDate() }}

Import:

import format from 'date-fns/format'
export default {
...

In your Method:

    methods: {
      formatDate: function () {
        return format(new Date(), '[Today is a] dddd')
      },

How to use Date-FNS in VueJS?

4 Answers4

Update with lazy loading approach

Original answer