From 45b57e8cc3236e520e12cdb9bcabfd8d116efa07 Mon Sep 17 00:00:00 2001 From: bushuai Date: Wed, 30 Dec 2020 17:35:53 +0800 Subject: [PATCH] feat(DatePicker): i18n --- source/components/Config/Consumer.tsx | 6 +- source/components/Config/Locale/Consumer.tsx | 7 +- source/components/Config/Locale/Context.tsx | 2 +- source/components/Config/demo.tsx | 2 +- .../DatePicker/DateRangeBasePicker.tsx | 39 +- ...DateRangePicker.js => DateRangePicker.tsx} | 24 +- source/components/DatePicker/TimePicker.tsx | 40 +- source/components/DatePicker/TimeSelect.tsx | 24 +- .../components/DatePicker/basic/DateTable.js | 67 +-- .../components/DatePicker/panel/DatePanel.js | 331 ++++++------ .../DatePicker/panel/DateRangePanel.js | 503 +++++++++--------- .../components/DatePicker/panel/TimePanel.js | 103 ++-- source/components/Locale/en_US.ts | 67 ++- source/components/Locale/index.ts | 4 +- source/components/Locale/zh_CN.ts | 65 +++ source/utils/date/index.js | 5 +- 16 files changed, 736 insertions(+), 553 deletions(-) rename source/components/DatePicker/{DateRangePicker.js => DateRangePicker.tsx} (86%) diff --git a/source/components/Config/Consumer.tsx b/source/components/Config/Consumer.tsx index 0888ee722..0e192b0a7 100644 --- a/source/components/Config/Consumer.tsx +++ b/source/components/Config/Consumer.tsx @@ -4,9 +4,7 @@ import LocaleConsumer from './Locale/Consumer'; export default function ConfigConsumer(props) { return { - (value) => { - return props.children(value); - } + (value, lang) => props.children(value, lang) } -} \ No newline at end of file +} diff --git a/source/components/Config/Locale/Consumer.tsx b/source/components/Config/Locale/Consumer.tsx index f335e5d01..83b17fe59 100644 --- a/source/components/Config/Locale/Consumer.tsx +++ b/source/components/Config/Locale/Consumer.tsx @@ -4,16 +4,15 @@ import LocaleList from '../../Locale/index'; export default function LocaleConsumer({ componentName, children }: { componentName: string, - children: (params: object) => React.ReactNode + children: (params: object, locale: string) => React.ReactNode }) { return { (value) => { const { Locale } = value; const ComponentLocal = LocaleList[Locale] && LocaleList[Locale][componentName] - // console.log(Locale, ComponentLocal); - return children(ComponentLocal || {}); + return children(ComponentLocal || {}, Locale); } } -} \ No newline at end of file +} diff --git a/source/components/Config/Locale/Context.tsx b/source/components/Config/Locale/Context.tsx index 93e4abf33..b72bde710 100644 --- a/source/components/Config/Locale/Context.tsx +++ b/source/components/Config/Locale/Context.tsx @@ -1,7 +1,7 @@ // context.js import React from 'react'; export const LocaleContext = React.createContext({ - Locale: 'zh_CN', + Locale: 'zh_CN' }); export const Provider = LocaleContext.Provider; export const Consumer = LocaleContext.Consumer; diff --git a/source/components/Config/demo.tsx b/source/components/Config/demo.tsx index 285bea0ea..4e5e0d1bf 100644 --- a/source/components/Config/demo.tsx +++ b/source/components/Config/demo.tsx @@ -41,4 +41,4 @@ class ConsumerDemo extends React.Component<{}> { export { WithLocaleDemo, ConsumerDemo -}; \ No newline at end of file +}; diff --git a/source/components/DatePicker/DateRangeBasePicker.tsx b/source/components/DatePicker/DateRangeBasePicker.tsx index 97a4f983f..6796966ec 100644 --- a/source/components/DatePicker/DateRangeBasePicker.tsx +++ b/source/components/DatePicker/DateRangeBasePicker.tsx @@ -12,6 +12,7 @@ import placements from './placements'; import isEqual from 'lodash/isEqual'; import { Placement } from './BasePicker'; import { TimeSelectProps } from './TimeSelect'; +import ConfigConsumer from '../Config/Consumer'; const haveTriggerType = type => { return HAVE_TRIGGER_TYPES.indexOf(type) !== -1; @@ -442,7 +443,7 @@ class DateRangeBasePicker extends React.Component< }; // 选择框 - const getInputPanel = () => { + const getInputPanel = (locales) => { return ( - {separator} + {locales.separator} (this.trigger = node)} - getPopupContainer={getPopupContainer} - onPopupVisibleChange={this.onVisibleChange} - popup={getPickerPanel()} - popupPlacement={placement} - popupVisible={pickerVisible} - prefixCls={`${prefixCls}-date-time-picker-popup`} - destroyPopupOnHide={true} - > - {getInputPanel()} - + + { + (Locales) => ( + (this.trigger = node)} + getPopupContainer={getPopupContainer} + onPopupVisibleChange={this.onVisibleChange} + popup={getPickerPanel()} + popupPlacement={placement} + popupVisible={pickerVisible} + prefixCls={`${prefixCls}-date-time-picker-popup`} + destroyPopupOnHide={true} + > + {getInputPanel(Locales)} + + ) + } + ); } } diff --git a/source/components/DatePicker/DateRangePicker.js b/source/components/DatePicker/DateRangePicker.tsx similarity index 86% rename from source/components/DatePicker/DateRangePicker.js rename to source/components/DatePicker/DateRangePicker.tsx index c285aac64..1bb323fbc 100644 --- a/source/components/DatePicker/DateRangePicker.js +++ b/source/components/DatePicker/DateRangePicker.tsx @@ -5,6 +5,8 @@ import DateRangePanel from './panel/DateRangePanel'; import TimeSelectPanel from './panel/TimeSelectPanel'; import TimePanel from './panel/TimePanel'; import { converSelectRange } from './TimePicker'; +import { LocaleProperties } from '../Locale'; +import ConfigConsumer from '../Config/Consumer'; export default class DateRangePicker extends DateRangeBasePicker { static get propTypes() { @@ -106,14 +108,20 @@ export default class DateRangePicker extends DateRangeBasePicker { state.value && this.isDateValid(state.value) ? state.value : null; return ( - // @ts-ignore to much unmatched props - + + { + (Locales: LocaleProperties["DatePicker"]) => ( + // @ts-ignore to much unmatched props + + ) + } + ); } } diff --git a/source/components/DatePicker/TimePicker.tsx b/source/components/DatePicker/TimePicker.tsx index 91f0ea425..6a19b7bfc 100644 --- a/source/components/DatePicker/TimePicker.tsx +++ b/source/components/DatePicker/TimePicker.tsx @@ -6,6 +6,8 @@ import { TYPE_VALUE_RESOLVER_MAP, DEFAULT_FORMATS } from './constants'; import debounce from 'lodash/debounce'; import TimeSelect from './TimeSelect'; import pick from 'lodash/pick'; +import ConfigConsumer from '../Config/Consumer'; +import { LocaleProperties } from '../Locale'; export const converSelectRange = props => { let selectableRange = []; @@ -64,31 +66,21 @@ export default class TimePicker extends BasePicker { pickerPanel(state) { const value = state.value && this.isDateValid(state.value) ? state.value : null; - - /** - prefixCls?: string - format?: string //basePicker - value?: Date //basePicker - onPicked?: (date: Date, isKeepPannelOpen: boolean, isConfirmValue: boolean) => void //basePicker - onCancelPicked?: () => void //basePicker - selectableRange?: Array<{ start: Date, end: Date }>[] - onSelectRangeChange?: (range) => void - isShowCurrent?: boolean - footer?: () => React.ReactNode - onValueChange? - */ - console.log('TimePicker props::: ', this.props) - console.log('picked TimePicker props::: ', pick(this.props, ['format', 'isShowCurrent', 'footer', 'onValueChange'])) - return ( - + + { + (Locales: LocaleProperties["DatePicker"]) => ( + + ) + } + ); } } diff --git a/source/components/DatePicker/TimeSelect.tsx b/source/components/DatePicker/TimeSelect.tsx index 7986a2d40..9c0fc9eb9 100644 --- a/source/components/DatePicker/TimeSelect.tsx +++ b/source/components/DatePicker/TimeSelect.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import BasePicker, { BasePickerProps } from './BasePicker'; import TimeSelectPanel from './panel/TimeSelectPanel'; +import ConfigConsumer from '../Config/Consumer'; +import { LocaleProperties } from '../Locale'; export type TimeSelectProps = { start?: string; @@ -48,14 +50,20 @@ export default class TimeSelect extends BasePicker { pickerPanel(state) { const value = state.value && this.isDateValid(state.value) ? this.dateToStr(state.value) : null; return ( - { - return str ? this.parseDate(str) : null; - }} - /> + + { + (Locales: LocaleProperties["DatePicker"]) => ( + { + return str ? this.parseDate(str) : null; + }} + /> + ) + } + ); } } diff --git a/source/components/DatePicker/basic/DateTable.js b/source/components/DatePicker/basic/DateTable.js index 2d78ad555..632e371f7 100644 --- a/source/components/DatePicker/basic/DateTable.js +++ b/source/components/DatePicker/basic/DateTable.js @@ -14,6 +14,7 @@ import { getOffsetToWeekOrigin } from '../../../utils/date'; import Locale from '../../../utils/date/locale'; +import ConfigConsumer from '../../Config/Consumer'; function isFunction(func) { return typeof func === 'function'; @@ -365,41 +366,47 @@ export default class DateTable extends React.Component { const {mode, showWeekNumber, prefixCls} = this.props; return ( - - - - - {showWeekNumber && } - { - this.WEEKS().map((e, idx)=> ) - } - - + { - this.getMarkedRangeRows().map((row, idx) => { - return ( - + (Locale) => ( +
周{$t(`datepicker.weeks.${e}`)}
+ + + + {showWeekNumber && } { - row.map((cell, idx) => ( - - )) + this.WEEKS().map((e, idx)=> ) } - ); - }) + + { + this.getMarkedRangeRows().map((row, idx) => { + return ( + + { + row.map((cell, idx) => ( + + )) + } + + ); + }) + } + +
{Locale.week} -
{cell.text}
- 		{Locale['weeks'][e]}
+
{cell.text}
+
+ ) } - - + ); } } diff --git a/source/components/DatePicker/panel/DatePanel.js b/source/components/DatePicker/panel/DatePanel.js index 6c54a860b..812adc03e 100644 --- a/source/components/DatePicker/panel/DatePanel.js +++ b/source/components/DatePicker/panel/DatePanel.js @@ -26,6 +26,8 @@ import { setTime } from '../../../utils/date'; import Locale from '../../../utils/date/locale'; +import ConfigConsumer from '../../Config/Consumer'; +import { LocaleProperties } from '../..//Locale'; const PICKER_VIEWS = { YEAR: 'year', @@ -263,10 +265,10 @@ class DatePanel extends React.Component { } // 切换月份 - handleChangeMonth = (month) => { - const { currentDate } = this.state; + handleChangeMonth = (month, locales) => {const { currentDate } = this.state; + // FIXME: 通过截取 month 的方式不好扩展功能 this.setState({ - currentDate: new Date((new Date(currentDate).setMonth(parseInt(month.slice(0,-1)) - 1))) + currentDate: new Date((new Date(currentDate).setMonth(parseInt(locales[month]) - 1))) }); } @@ -314,178 +316,191 @@ class DatePanel extends React.Component { timeSelectMode, timeSelectModeProps } = this.props; + const { currentView, currentDate, dateInputText, time } = this.state; const { month } = deconstructDate(currentDate); const t = Locale.t; return ( -
+ + { + (Locales, lang) => { + + const monthSelector = currentView === PICKER_VIEWS.DATE && ( + this.handleChangeMonth(month, Locales)} + > + {Locales[`month${month + 1}`]} + + ); + + const yearSelector = ( + + {`${currentDate.getFullYear()} ${Locales.year}`} + + ); + + const selectors = lang === 'zh_CN' ? [ yearSelector, monthSelector ] : [ monthSelector, yearSelector ] -
- { - Array.isArray(shortcuts) && ( -
+ return (
{ - return ( - - ); - }) + 'has-sidebar': shortcuts, + 'has-time': showTime + }) + } + > + +
+ { + Array.isArray(shortcuts) && ( +
+ { + shortcuts.map((e, idx) => { + return ( + + ); + }) + } +
+ ) } -
- ) - } -
- { - showTime && ( -
- - - - - { - timeSelectMode === 'TimePicker' ? - node.parentNode} - showTrigger={false} - allowClear={false} - disabled={this.timePickerDisable()} - value={time} - onChange={this.handleTimeInputChange} - isShowCurrent={showTimeCurrent} - selectableRange={timeSelectableRange} - /> - : - node.parentNode} - showTrigger={false} - allowClear={false} - disabled={this.timePickerDisable()} - value={time} - onChange={this.handleTimeInputChange} - start={timeSelectModeProps.start} - step={timeSelectModeProps.step} - end={timeSelectModeProps.end} - maxTime={timeSelectModeProps.maxTime} - minTime={timeSelectModeProps.minTime} - /> - } - -
- ) - } - - { - currentView !== 'time' && ( -
- +
{ - currentView === PICKER_VIEWS.DATE && ( - ) - } - - - {`${currentDate.getFullYear()} ${t('datepicker.year')}`} - - - { - currentView === PICKER_VIEWS.DATE && ( - - + + + + + { + timeSelectMode === 'TimePicker' ? + node.parentNode} + showTrigger={false} + allowClear={false} + disabled={this.timePickerDisable()} + value={time} + onChange={this.handleTimeInputChange} + isShowCurrent={showTimeCurrent} + selectableRange={timeSelectableRange} + /> + : + node.parentNode} + showTrigger={false} + allowClear={false} + disabled={this.timePickerDisable()} + value={time} + onChange={this.handleTimeInputChange} + start={timeSelectModeProps.start} + step={timeSelectModeProps.step} + end={timeSelectModeProps.end} + maxTime={timeSelectModeProps.maxTime} + minTime={timeSelectModeProps.minTime} + /> } - >{t(`datepicker.month${month + 1}`)} - + +
) } - + { - currentView === PICKER_VIEWS.DATE && ( - + currentView !== 'time' && ( +
+ + { + currentView === PICKER_VIEWS.DATE && ( + ) + } + + {selectors} + + + { + currentView === PICKER_VIEWS.DATE && ( + + ) + } +
) } +
+ {this._pickerContent()} +
- ) - } -
- {this._pickerContent()} -
-
-
- { - typeof footer == 'function' && footer() && ( -
- {footer()} -
- ) - } - { - showTime && currentView === PICKER_VIEWS.DATE && ( -
- - -
- ) +
+ { + typeof footer == 'function' && footer() && ( +
+ {footer()} +
+ ) + } + { + showTime && currentView === PICKER_VIEWS.DATE && ( +
+ + +
+ ) + } +
) + } } -
+ ); } } diff --git a/source/components/DatePicker/panel/DateRangePanel.js b/source/components/DatePicker/panel/DateRangePanel.js index 6002b38a5..db6866683 100644 --- a/source/components/DatePicker/panel/DateRangePanel.js +++ b/source/components/DatePicker/panel/DateRangePanel.js @@ -32,6 +32,7 @@ import { } from '../../../utils/date'; import Locale from '../../../utils/date/locale'; import {TYPE_VALUE_RESOLVER_MAP, DEFAULT_FORMATS} from '../constants'; +import ConfigConsumer from '../../Config/Consumer'; const TimeSelect = TimePicker.TimeSelect; @@ -490,7 +491,7 @@ class DateRangePanel extends React.Component { } // 切换月份 - handleChangeMonth(type, date, month){ + handleChangeMonth(type, date, month, locales){ this.setState({ [type]: new Date((new Date(date)).setMonth((parseInt(month.slice(0,-1)) - 1))) }, ()=>{ @@ -589,260 +590,268 @@ class DateRangePanel extends React.Component { const t = Locale.t; return ( -
-
- { - Array.isArray(shortcuts) && ( -
+ + { + (Locales, lang) => ( +
{ - return ( - - ); - }) - } -
- ) - } -
- { - showTime && ( -
- - - this.handleDateInputChange(value, 'min')} - onBlur={value => this.handleDateInputBlur(value, 'min')} - /> - - - { - startTimeSelectMode === 'TimePicker' ? - node.parentNode} - showTrigger={false} - allowClear={false} - disabled={this.timePickerDisable()} - value={minTime} - onChange={value => this.handleTimeInputChange(value, 'min')} - isShowCurrent={showTimeCurrent} - selectableRange={startTimeSelectableRange} - /> - : - node.parentNode} - showTrigger={false} - allowClear={false} - disabled={this.timePickerDisable()} - value={minTime} - onChange={value => this.handleTimeInputChange(value, 'min')} - start={startTimeSelectModeProps.start} - step={startTimeSelectModeProps.step} - end={startTimeSelectModeProps.end} - maxTime={startTimeSelectModeProps.maxTime} - minTime={startTimeSelectModeProps.minTime} - /> - } - - - - - this.handleDateInputChange(value, 'max')} - onBlur={value => this.handleDateInputBlur(value, 'max')} - /> - - + 'has-sidebar': shortcuts, + 'has-time': showTime + })} + > +
+ { + Array.isArray(shortcuts) && ( +
{ - endTimeSelectMode === 'TimePicker' ? - node.parentNode} - showTrigger={false} - allowClear={false} - disabled={this.timePickerDisable()} - value={maxTime} - onChange={value => this.handleTimeInputChange(value, 'max')} - isShowCurrent={showTimeCurrent} - selectableRange={endTimeSelectableRange} - /> - : - node.parentNode} - showTrigger={false} - allowClear={false} - disabled={this.timePickerDisable()} - value={maxTime} - onChange={value => this.handleTimeInputChange(value, 'max')} - start={endTimeSelectModeProps.start} - step={endTimeSelectModeProps.step} - end={endTimeSelectModeProps.end} - maxTime={endTimeSelectModeProps.maxTime} - minTime={endTimeSelectModeProps.minTime} - /> + shortcuts.map((e, idx) => { + return ( + + ); + }) } - - +
+ ) + } +
+ { + showTime && ( +
+ + + this.handleDateInputChange(value, 'min')} + onBlur={value => this.handleDateInputBlur(value, 'min')} + /> + + + { + startTimeSelectMode === 'TimePicker' ? + node.parentNode} + showTrigger={false} + allowClear={false} + disabled={this.timePickerDisable()} + value={minTime} + onChange={value => this.handleTimeInputChange(value, 'min')} + isShowCurrent={showTimeCurrent} + selectableRange={startTimeSelectableRange} + /> + : + node.parentNode} + showTrigger={false} + allowClear={false} + disabled={this.timePickerDisable()} + value={minTime} + onChange={value => this.handleTimeInputChange(value, 'min')} + start={startTimeSelectModeProps.start} + step={startTimeSelectModeProps.step} + end={startTimeSelectModeProps.end} + maxTime={startTimeSelectModeProps.maxTime} + minTime={startTimeSelectModeProps.minTime} + /> + } + + + + + this.handleDateInputChange(value, 'max')} + onBlur={value => this.handleDateInputBlur(value, 'max')} + /> + + + { + endTimeSelectMode === 'TimePicker' ? + node.parentNode} + showTrigger={false} + allowClear={false} + disabled={this.timePickerDisable()} + value={maxTime} + onChange={value => this.handleTimeInputChange(value, 'max')} + isShowCurrent={showTimeCurrent} + selectableRange={endTimeSelectableRange} + /> + : + node.parentNode} + showTrigger={false} + allowClear={false} + disabled={this.timePickerDisable()} + value={maxTime} + onChange={value => this.handleTimeInputChange(value, 'max')} + start={endTimeSelectModeProps.start} + step={endTimeSelectModeProps.step} + end={endTimeSelectModeProps.end} + maxTime={endTimeSelectModeProps.maxTime} + minTime={endTimeSelectModeProps.minTime} + /> + } + + +
+ ) + } +
+
+ {})} + className={`${prefixCls}-picker-panel__icon-btn ${prefixCls}-date-range-picker__prev-btn`} /> + {})} + className={`${prefixCls}-picker-panel__icon-btn ${prefixCls}-date-range-picker__prev-btn`} /> + + + {`${leftDate.getFullYear()} ${Locales.year}`} + + + this.handleChangeMonth.bind(this, 'leftDate', leftDate, Locales)} + > + + {Locales[`month${leftDate.getMonth() + 1}`]} + + + + +
+ +
+
+
+ + + + + {`${rightDate.getFullYear()} ${Locales.year}`} + + + this.handleChangeMonth.bind(this, 'rightDate', rightDate, Locales)} + > + + {Locales[`month${rightDate.getMonth() + 1}`]} + + + {})} + className={`${prefixCls}-picker-panel__icon-btn ${prefixCls}-date-range-picker__next-btn`} /> + {})} + className={`${prefixCls}-picker-panel__icon-btn ${prefixCls}-date-range-picker__next-btn`} /> +
+ +
- ) - } -
-
- {})} - className={`${prefixCls}-picker-panel__icon-btn ${prefixCls}-date-range-picker__prev-btn`} /> - {})} - className={`${prefixCls}-picker-panel__icon-btn ${prefixCls}-date-range-picker__prev-btn`} /> - - - {`${leftDate.getFullYear()} ${t('datepicker.year')}`} - - - - - {t(`datepicker.month${leftDate.getMonth() + 1}`)} - - - - -
- -
-
-
- - - - - {`${rightDate.getFullYear()} ${t('datepicker.year')}`} - - - - - {t(`datepicker.month${rightDate.getMonth() + 1}`)} - - - {})} - className={`${prefixCls}-picker-panel__icon-btn ${prefixCls}-date-range-picker__next-btn`} /> - {})} - className={`${prefixCls}-picker-panel__icon-btn ${prefixCls}-date-range-picker__next-btn`} />
- -
-
-
- { - typeof footer === 'function' && footer() && ( -
- {footer()} -
- ) - } - { - showTime && ( -
- - + { + typeof footer === 'function' && footer() && ( +
+ {footer()} +
+ ) + } + { + showTime && ( +
+ + +
+ ) + }
) } -
+ ); } } diff --git a/source/components/DatePicker/panel/TimePanel.js b/source/components/DatePicker/panel/TimePanel.js index 1703791da..e8380d7dc 100644 --- a/source/components/DatePicker/panel/TimePanel.js +++ b/source/components/DatePicker/panel/TimePanel.js @@ -6,6 +6,7 @@ import { limitRange, isLimitRange, parseDate } from '../../../utils/date'; import { DEFAULT_FORMATS } from '../constants'; import Locale from '../../../utils/date/locale'; import isEqual from 'lodash/isEqual'; +import ConfigConsumer from '../../Config/Consumer'; const mapPropsToState = (props) => { const { format, value, selectableRange } = props; @@ -126,60 +127,66 @@ class TimePanel extends React.Component { const $t = Locale.t; return ( -
-
- -
+ { - typeof footer == 'function' && footer() && ( + (Locales) => (
- {footer()} +
+ +
+ { + typeof footer == 'function' && footer() && ( +
+ {footer()} +
+ ) + } +
+
+ { + isShowCurrent ? + + : + null + } +
+
+ + +
+
) } -
-
- { - isShowCurrent ? - - : - null - } -
-
- - -
-
-
+ ); } } diff --git a/source/components/Locale/en_US.ts b/source/components/Locale/en_US.ts index 0c5c1d38a..9d79d7e69 100644 --- a/source/components/Locale/en_US.ts +++ b/source/components/Locale/en_US.ts @@ -4,7 +4,72 @@ const LocaleValue: LocaleProperties = { locale: 'en_US', Table: { filterTitle: 'filters', + }, + DatePicker: { + now: 'Now', + today: 'Today', + cancel: 'Cancel', + clear: 'Clear', + confirm: 'Confirm', + startPlaceholder: 'Start Date', + endPlaceholder: 'End Date', + separator: '~', + selectDate: 'Select Date', + selectTime: 'Select Time', + startDate: 'Start Date', + startTime: 'Start Time', + endDate: 'End Date', + endTime: 'End Time', + year: '', + month1: 'Jan', + month2: 'Feb', + month3: 'Mar', + month4: 'Apr', + month5: 'May', + month6: 'Jun', + month7: 'Jul', + month8: 'Aug', + month9: 'Sep', + month10: 'Oct', + month11: 'Nov', + month12: 'Dec', + Jan: '1', + Feb: '2', + Mar: '3', + Apr: '4', + May: '5', + Jun: '6', + Jul: '7', + Aug: '8', + Sep: '9', + Oct: '10', + Nov: '11', + Dec: '12', + week: 'Week', + weeks: { + sun: 'Sun', + mon: 'Mon', + tue: 'Tue', + wed: 'Wed', + thu: 'Thu', + fri: 'Fri', + sat: 'Sat' + }, + months: { + jan: 'Jan', + feb: 'Feb', + mar: 'Mar', + apr: 'Apr', + may: 'May', + jun: 'Jun', + jul: 'Jul', + aug: 'Aug', + sep: 'Sep', + oct: 'Oct', + nov: 'Nov', + dec: 'Dec' + } } } -export default LocaleValue; \ No newline at end of file +export default LocaleValue; diff --git a/source/components/Locale/index.ts b/source/components/Locale/index.ts index 2909bfa03..c74e6a968 100644 --- a/source/components/Locale/index.ts +++ b/source/components/Locale/index.ts @@ -6,12 +6,12 @@ type keyStringObj = { [propName: string]: string | object, } - export interface LocaleProperties { locale: string, global?: keyStringObj, Table?: keyStringObj, Modal?: keyStringObj, + DatePicker?: keyStringObj, Form?: keyStringObj & { defaultValidateMessages: keyStringObj, } @@ -22,4 +22,4 @@ const Locale = { en_US } -export default Locale \ No newline at end of file +export default Locale diff --git a/source/components/Locale/zh_CN.ts b/source/components/Locale/zh_CN.ts index fc90e2bba..1cfe17962 100644 --- a/source/components/Locale/zh_CN.ts +++ b/source/components/Locale/zh_CN.ts @@ -34,6 +34,71 @@ const localeValues: LocaleProperties = { whitespace: '${label}不能为空字符', }, }, + DatePicker: { + now: '现在', + today: '今天', + cancel: '取消', + clear: '清空', + confirm: '确定', + startPlaceholder: '开始日期', + endPlaceholder: '结束日期', + separator: '至', + selectDate: '下方选择日期', + selectTime: '请选择时间', + startDate: '开始日期', + startTime: '开始时间', + endDate: '结束日期', + endTime: '结束时间', + year: '年', + month1: '1 月', + month2: '2 月', + month3: '3 月', + month4: '4 月', + month5: '5 月', + month6: '6 月', + month7: '7 月', + month8: '8 月', + month9: '9 月', + month10: '10 月', + month11: '11 月', + month12: '12 月', + '1月': '1', + '2月': '2', + '3月': '3', + '4月': '4', + '5月': '5', + '6月': '6', + '7月': '7', + '8月': '8', + '9月': '9', + '10月': '10', + '11月': '11', + '12月': '12', + week: '周次', + weeks: { + sun: '日', + mon: '一', + tue: '二', + wed: '三', + thu: '四', + fri: '五', + sat: '六' + }, + months: { + jan: '一月', + feb: '二月', + mar: '三月', + apr: '四月', + may: '五月', + jun: '六月', + jul: '七月', + aug: '八月', + sep: '九月', + oct: '十月', + nov: '十一月', + dec: '十二月' + } + } }; export default localeValues; diff --git a/source/utils/date/index.js b/source/utils/date/index.js index 84930fd9c..614c35428 100644 --- a/source/utils/date/index.js +++ b/source/utils/date/index.js @@ -28,7 +28,10 @@ export const dateFormat = (format) => { }; // 月份数组 -export const MONTH_ARRRY = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; +export const MONTH_ARRRY = { + zh_CN: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + en_US: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] +}; // 年份数组 export const YEARS_ARRAY = (N=50) => {