我正在处理react日期,并试图找出如何将月份和工作日名称国际化。我已经想好了如何对输入占位符文本执行此操作,但我找不到如何执行此操作。
我给出的当前用于反应日期DateRangePicker
的道具如下:
<DateRangePicker
startDate={this.state.startDate} // momentPropTypes.momentObj or null,
endDate={this.state.endDate} // momentPropTypes.momentObj or null,
onDatesChange={({ startDate, endDate }) => {
this.setState({ startDate, endDate });
this.props.onDateChange(this.props.name, startDate, endDate);
}
} // PropTypes.func.isRequired,
focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
numberOfMonths={1}
firstDayOfWeek={1}
minimumNights={0}
isOutsideRange={(x) => moment().add(1, 'days') < x }
displayFormat="DD-MM-YYYY"
showClearDates={true}
startDatePlaceholderText={this.props.intl.formatMessage({id: 'DATE_PICKER_START_DATE'})}
endDatePlaceholderText={this.props.intl.formatMessage({id: 'DATE_PICKER_END_DATE'})}
hideKeyboardShortcutsPanel= {true}
/>
我正在使用react-intl
进行国际化。
日历是这样的:日历的图像
基本上,我想更改的是月份名称November
和工作日名称Mo Tu We Th Fr Sa Su
期望的结果是将它们翻译成芬兰语->Marraskuu
和Ma Ti Ke To Pe La Su
我设法通过导入带有finnish的moment和一些用于日期选择器的附加道具来解决这个问题:
import React, { Component } from "react";
import {DateRangePicker} from 'react-dates';
import { injectIntl, intlShape } from "react-intl";
import moment from 'moment'
import 'moment/locale/fi';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
.
.
.
<DateRangePicker
.
.
.
renderMonthText={month => {
month.locale(this.props.intl.locale)
return(
moment(month).format('MMMM YYYY')
)
}}
renderDayContents={day => {
day.local(this.props.intl.local)
return(
moment(day).format('D')
)
}}
/>