如何在 VueJS 中使用 Date-FNS？

Question

我是 Date-FNS 的新手，我需要让这个例子在 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."

如何让它工作？

Answer 1

就像moment js一样，你只需要使用日期库就可以将其导入并包含在你的数据中：

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

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

现在在您的模板中，您可以将 format 用作：

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

区域设置：

我还没有尝试过语言环境，但看起来很简单。根据 manual 我认为这应该可行。

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})
    } 
  }
}

现在在您的模板中，您可以将 format 用作：

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

我认为如果您花几分钟时间使用它，您可以获得更好的工作解决方案。

Answer 2

刚刚开始工作：

在您的模板中：

{{ formatDate() }}

导入：

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

在你的方法中：

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

Answer 3

使用延迟加载方法更新

如果您需要支持多种语言环境并希望注意包大小，则此选项非常有用。

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') }

我之所以没有将 lang 动态连接到导入字符串，是因为我发现在这种情况下，Webpack 将无法决定您要导入的语言环境，并且它通吃

就我个人而言，我已经开始将 dateFnsLocale 存储在 Vuex 中，因此一旦导入完成，您可以根据需要将其提交给 state，使其在整个应用程序中都可以访问，就像window 的全局命名空间。

原回答

如果您需要支持多个语言环境，我认为最好在您的 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
}

然后您可以在 script 标签中的任意位置：

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

Answer 4

在 date-fns 的 v1.30.1 版本中，您必须 import/require 从 date-fns/something。

为了使其与 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') },
  },
}

以及模板标签：

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

如何在 VueJS 中使用 Date-FNS？

How to use Date-FNS in VueJS?

javascript

vue.js

date-fns

使用延迟加载方法更新

原回答