javascript - 如何更改 react-intl 中日期的显示格式？

Question

我需要使用 react-intl 使用不同的分隔符显示日期。到目前为止我有这个

const date = new Date("2016-08-12T16:59:02.013+02:00");
...
return() {
   render(
      <FormattedDate
            value={date}
            year='numeric'
            month='numeric'
            day='numeric'
          />
   )
}

这会呈现日期8/12/2016，但我需要像这样显示8-12-2016。FormattedDate 如何做到这一点？还是我应该使用不同的方法？

Answer 1

首先，从 react-intl 包中导入hoc ：

import {injectIntl} from 'react-intl'

然后将其应用于您的组件：

injectIntl(YourReactComponent)

它将使您可以通过in访问该formatDate方法。该方法由 的实例在内部使用，它返回格式化日期的字符串表示形式：propsYourReactComponentFormattedDate

  const stringDate = this.props.intl.formatDate(date, // your date variable
            {
                year:'numeric',
                month:'numeric',
                day:'numeric'
            })

stringDate现在包含8/12/2016，您可以随意修改它：

const stringWithHyphens = stringDate.replace(/\//g, "-"); // replacing all '/'s with '-'s