moment 与 date-fns 区域设置日期格式

Question

我正在我们的应用程序的上下文中评估 DateFns 和 Moment，并发现 DateFns 中似乎有一个重要的遗漏。

在 Moment 中，区域设置支持允许您格式化日期或时间的区域设置正确表示。例如，日期格式“LL”和“L”将为英语区域设置生成以下内容：

November 27, 2017
11/27/2017

以下为西班牙语语言环境：

27 de noviembre de 2017
27/11/2017

特别注意，在第二个示例中，英语中月份位于日期之前，而西班牙语中日期位于月份之前。这正是您希望区域设置代码为您处理的事情。这就是语言环境在几乎所有日期时间库（C++、C#、Java、Python 等）中的工作方式

在 DateFns 中，似乎没有用于区域设置正确的长日期、短日期、时间等的 格式选项。 。 他们给出的使用区域设置的示例要求您向其传递区域设置特定的格式字符串：

// Represent 2 July 2014 in Esperanto:
var eoLocale = require('date-fns/locale/eo')
var result = format(
  new Date(2014, 6, 2),
  'Do [de] MMMM YYYY',
  {locale: eoLocale}
)

换句话说，我需要知道我支持的每个语言环境的日期/时间格式，这违背了语言环境支持的初衷。]

我可以使用 Javascript 的 toLocaleString，但我的应用程序以两种不同的方式管理语言环境。

是否有某种方法可以打印特定区域设置的“短日期”，而无需我告诉 DateFns 该区域设置的格式是什么？

Answer 1

我使用 date-fns 的 esm 版本，您可以使用 moment 使用的相同类型的格式：

import { format } from 'date-fns/esm'
import { enUS, fr } from 'date-fns/esm/locale'

我将把语言环境存储在一个对象中：

this.dateLocales = { fr: fr, en: enUS }

并使用这些格式：

LT: 'h:mm aa',
LTS: 'h:mm:ss aa',
L: 'MM/DD/YYYY',
LL: 'MMMM D YYYY',
LLL: 'MMMM D YYYY h:mm aa',
LLLL: 'dddd, MMMM D YYYY h:mm aa'

所以你可以这样做：

format(
  new Date(2014, 6, 2),
  'LL',
  {locale: this.dateLocales.fr}
)

这些格式已本地化

Answer 2

截至2021年，使用当前最新版本的date-fns（v2.23.0），您可以通过使用'P'格式来实现您想要的。

参见：https://date-fns.org/v2.23.0/docs/format

例如，假设今天是 2021-08-27（ISO 日期）：

import { format } from 'date-fns';
import ptBrLocale from 'date-fns/locale/pt-BR';
import enUsLocale from 'date-fns/locale/en-US';

console.log(format(new Date(), 'P', { locale: ptBrLocale }));
console.log(format(new Date(), 'P', { locale: enUsLocale }));

输出将是：

27/08/2021
08/27/2021

Answer 3

使用 date-fns v3.6、区域设置和 Typescript，可能类似于：

import {
  format,
  Locale
} from "date-fns";
import { enUS, frCA } from "date-fns/locale";

const languages = {
  en: "en",
  fr: "fr"
};

export type LanguageKey = keyof typeof languages;

const locales: { [key: string]: Locale } = {
  en: enUS,
  fr: frCA
};

export const formatDate = (date: Date, lng: LanguageKey) => {
  return format(date, "EEEE, MMMM dd", { locale: locales[lng] });
};