如何在 VueJS 中使用 Date-FNS？

Posted 2023-02-14

【中文标题】如何在 VueJS 中使用 Date-FNS？

【英文标题】：How to use Date-FNS in VueJS?

【发布时间】：2018-09-08 18:24:52

【问题描述】：

我是 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."

如何让它工作？

【问题讨论】：

不工作怎么办？

我是 JS 和 VueJS 的新手，我需要把代码放在哪里？

放什么代码？你看，你不说你想要什么。据我们所知，你不需要在任何地方放任何代码......

【参考方案1】：

使用延迟加载方法更新

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

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 中，因此一旦导入完成，您可以根据需要将其提交到状态，使其在整个应用程序中都可以访问，类似于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])

【参考方案2】：

在 date-fns 的 v1.30.1 版本中，您必须从 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>

【参考方案3】：

就像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>

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

【讨论】：

谢谢@samayo，你能告诉我如何添加 locale 功能吗？ date-fns.org/v1.29.0/docs/I18n我要改成es

好吧，我还没有测试过，但我试了一下。它现在应该可以工作了，请参阅更新

那么我需要每次在每个组件中导入语言环境吗？

@rochasdv 我不知道，我相信有更好的方法可以做到这一点。我对图书馆的了解并不多于我回答的内容。

【参考方案4】：

刚刚开始工作：

在您的模板中：

 formatDate() 

进口：

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

在你的方法中：

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