mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 05:29:37 +08:00
Add locale support for datepicker, #424
This commit is contained in:
afc163
parent
b7a32da9ec
commit
f8122309fa
34
components/datepicker/demo/locale.md
Normal file
34
components/datepicker/demo/locale.md
Normal file
@ -0,0 +1,34 @@
|
||||
# 国际化
|
||||
|
||||
- order: 9
|
||||
|
||||
通过 `locale` 配置时区、语言等。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Datepicker = antd.Datepicker;
|
||||
|
||||
var App = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
locale: {
|
||||
timezoneOffset: 0 * 60,
|
||||
firstDayOfWeek: 0,
|
||||
minimalDaysInFirstWeek: 1,
|
||||
lang: {
|
||||
today: 'Today',
|
||||
now: 'Now',
|
||||
ok: 'Ok'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return <Datepicker showTime={true} locale={this.state.locale} />;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('components-datepicker-demo-locale'));
|
||||
````
|
||||
|
||||
@ -3,20 +3,30 @@ import Calendar from 'rc-calendar';
|
||||
import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
|
||||
import Datepicker from 'rc-calendar/lib/Picker';
|
||||
import GregorianCalendar from 'gregorian-calendar';
|
||||
import zhCn from 'gregorian-calendar/lib/locale/zh-cn';
|
||||
import defaultLocale from './locale';
|
||||
import CalendarLocale from 'rc-calendar/lib/locale/zh-cn';
|
||||
import DateTimeFormat from 'gregorian-calendar-format';
|
||||
import objectAssign from 'object-assign';
|
||||
|
||||
// 和顶部文案保持一致
|
||||
import Locale from 'gregorian-calendar-format/lib/locale/zh-cn';
|
||||
Locale.shortMonths = ['1月', '2月', '3月', '4月', '5月', '6月',
|
||||
'7月', '8月', '9月', '10月', '11月', '12月'];
|
||||
|
||||
// 以下两行代码
|
||||
// 给没有初始值的日期选择框提供本地化信息
|
||||
// 否则会以周日开始排
|
||||
let defaultCalendarValue = new GregorianCalendar(zhCn);
|
||||
defaultCalendarValue.setTime(Date.now());
|
||||
// 转换 locale 为 rc-calender 接收的格式
|
||||
function getCalendarLocale(locale) {
|
||||
locale.format = locale.format || {};
|
||||
[
|
||||
'eras',
|
||||
'months',
|
||||
'shortMonths',
|
||||
'weekdays',
|
||||
'shortWeekdays',
|
||||
'veryShortWeekdays',
|
||||
'ampms',
|
||||
'datePatterns',
|
||||
'timePatterns',
|
||||
'dateTimePattern'
|
||||
].forEach(function(key) {
|
||||
locale.format[key] = locale[key];
|
||||
});
|
||||
return locale;
|
||||
}
|
||||
|
||||
function createPicker(TheCalendar) {
|
||||
return React.createClass({
|
||||
@ -25,10 +35,10 @@ function createPicker(TheCalendar) {
|
||||
format: 'yyyy-MM-dd',
|
||||
placeholder: '请选择日期',
|
||||
transitionName: 'slide-up',
|
||||
onSelect: null, //向前兼容
|
||||
calendarStyle: {},
|
||||
onSelect: null, // 向前兼容
|
||||
onChange() {}, // onChange 可用于 Validator
|
||||
onOk() {}
|
||||
locale: {}
|
||||
};
|
||||
},
|
||||
getInitialState() {
|
||||
@ -43,6 +53,12 @@ function createPicker(TheCalendar) {
|
||||
});
|
||||
}
|
||||
},
|
||||
getLocale() {
|
||||
// 统一合并为完整的 Locale
|
||||
let locale = objectAssign({}, defaultLocale, this.props.locale);
|
||||
locale.lang = objectAssign({}, defaultLocale.lang, this.props.locale.lang);
|
||||
return locale;
|
||||
},
|
||||
getFormatter() {
|
||||
const formats = this.formats = this.formats || {};
|
||||
const format = this.props.format;
|
||||
@ -55,9 +71,9 @@ function createPicker(TheCalendar) {
|
||||
parseDateFromValue(value) {
|
||||
if (value) {
|
||||
if (typeof value === 'string') {
|
||||
return new DateTimeFormat(this.props.format).parse(value, zhCn);
|
||||
return new DateTimeFormat(this.props.format).parse(value, this.getLocale());
|
||||
} else if (value instanceof Date) {
|
||||
let date = new GregorianCalendar(zhCn);
|
||||
let date = new GregorianCalendar(this.getLocale());
|
||||
date.setTime(value);
|
||||
return date;
|
||||
}
|
||||
@ -76,11 +92,16 @@ function createPicker(TheCalendar) {
|
||||
this.props.onChange(timeValue);
|
||||
},
|
||||
render() {
|
||||
// 以下两行代码
|
||||
// 给没有初始值的日期选择框提供本地化信息
|
||||
// 否则会以周日开始排
|
||||
let defaultCalendarValue = new GregorianCalendar(this.getLocale());
|
||||
defaultCalendarValue.setTime(Date.now());
|
||||
const calendar = (
|
||||
<TheCalendar
|
||||
style={this.props.calendarStyle}
|
||||
disabledDate={this.props.disabledDate}
|
||||
locale={CalendarLocale}
|
||||
locale={getCalendarLocale(this.getLocale().lang)}
|
||||
defaultValue={defaultCalendarValue}
|
||||
showTime={this.props.showTime}
|
||||
prefixCls="ant-calendar"
|
||||
|
||||
49
components/datepicker/locale.js
Normal file
49
components/datepicker/locale.js
Normal file
@ -0,0 +1,49 @@
|
||||
export default {
|
||||
// https://github.com/yiminghe/gregorian-calendar/blob/90898382392b7d575a19aa18696a35fee81a756f/src/locale/zh-cn.js
|
||||
timezoneOffset: 8 * 60,
|
||||
firstDayOfWeek: 1,
|
||||
minimalDaysInFirstWeek: 1,
|
||||
lang: {
|
||||
// https://github.com/react-component/calendar/blob/c92cc946f7dddf93d6edb5afdaecb4d72c5b75d6/src/locale/zh-cn.js
|
||||
today: '今天',
|
||||
now: '此刻',
|
||||
ok: '确定',
|
||||
clear: '清除',
|
||||
previousMonth: '上个月 (翻页上键)',
|
||||
nextMonth: '下个月 (翻页下键)',
|
||||
monthSelect: '选择月份',
|
||||
yearSelect: '选择年份',
|
||||
decadeSelect: '选择年代',
|
||||
hourInput: '上一小时(上方向键), 下一小时(下方向键)',
|
||||
minuteInput: '上一分钟(上方向键), 下一分钟(下方向键)',
|
||||
secondInput: '上一秒(上方向键), 下一小时(下方向键)',
|
||||
hourPanelTitle: '选择小时',
|
||||
minutePanelTitle: '选择分钟',
|
||||
secondPanelTitle: '选择秒',
|
||||
yearFormat: 'yyyy\'年\'',
|
||||
monthFormat: 'M\'月\'',
|
||||
dateFormat: 'yyyy\'年\'M\'月\'d\'日\'',
|
||||
previousYear: '上一年 (Control键加左方向键)',
|
||||
nextYear: '下一年 (Control键加右方向键)',
|
||||
previousDecade: '上一年代',
|
||||
nextDecade: '下一年代',
|
||||
previousCentury: '上一世纪',
|
||||
nextCentury: '下一世纪',
|
||||
|
||||
// https://github.com/yiminghe/gregorian-calendar-format/blob/d2f2b1281bfc728dd550194a29ce53fca4266327/lib/locale/zh-cn.js
|
||||
eras: ['公元前', '公元'],
|
||||
months: ['一月', '二月', '三月', '四月', '五月', '六月',
|
||||
'七月', '八月', '九月', '十月', '十一月', '十二月'],
|
||||
shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月',
|
||||
'七月', '八月', '九月', '十月', '十一月', '十二月'],
|
||||
weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四',
|
||||
'星期五', '星期六'],
|
||||
shortWeekdays: ['周日', '周一', '周二', '周三', '周四', '周五',
|
||||
'周六'],
|
||||
veryShortWeekdays: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
ampms: ['上午', '下午'],
|
||||
datePatterns: ['yyyy\'年\'M\'月\'d\'日\' EEEE', 'yyyy\'年\'M\'月\'d\'日\'', 'yyyy-M-d', 'yy-M-d'],
|
||||
timePatterns: ['ahh\'时\'mm\'分\'ss\'秒\' \'GMT\'Z', 'ahh\'时\'mm\'分\'ss\'秒\'', 'H:mm:ss', 'ah:mm'],
|
||||
dateTimePattern: '{date} {time}'
|
||||
}
|
||||
};
|
||||
@ -12,6 +12,7 @@
|
||||
.@{calendar-prefix-cls}-picker {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
|
||||
> input {
|
||||
outline: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user