Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
f8122309
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f8122309
编写于
10月 23, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add locale support for datepicker, #424
上级
b7a32da9
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
121 addition
and
16 deletion
+121
-16
components/datepicker/demo/locale.md
components/datepicker/demo/locale.md
+34
-0
components/datepicker/index.jsx
components/datepicker/index.jsx
+37
-16
components/datepicker/locale.js
components/datepicker/locale.js
+49
-0
style/components/datepicker/Picker.less
style/components/datepicker/Picker.less
+1
-0
未找到文件。
components/datepicker/demo/locale.md
0 → 100644
浏览文件 @
f8122309
# 国际化
-
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
'
));
````
components/datepicker/index.jsx
浏览文件 @
f8122309
...
...
@@ -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"
...
...
components/datepicker/locale.js
0 → 100644
浏览文件 @
f8122309
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}
'
}
};
style/components/datepicker/Picker.less
浏览文件 @
f8122309
...
...
@@ -12,6 +12,7 @@
.@{calendar-prefix-cls}-picker {
position: relative;
display: inline-block;
outline: none;
> input {
outline: none;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录