ant-design/components/datepicker/index.jsx

89 lines
2.5 KiB
React
Raw Normal View History

2015-06-19 12:29:22 +08:00
import React from 'react';
import Calendar from 'rc-calendar';
const Datepicker = Calendar.Picker;
import GregorianCalendar from 'gregorian-calendar';
import zhCn from 'gregorian-calendar/lib/locale/zh-cn';
import CalendarLocale from 'rc-calendar/lib/locale/zh-cn';
import DateTimeFormat from 'gregorian-calendar-format';
2015-06-15 16:42:27 +08:00
// 和顶部文案保持一致
2015-06-19 12:29:22 +08:00
import Locale from 'gregorian-calendar-format/lib/locale/zh-cn';
Locale.shortMonths = ['1月', '2月', '3月', '4月', '5月', '6月',
2015-08-04 18:42:41 +08:00
'7月', '8月', '9月', '10月', '11月', '12月'];
2015-06-19 12:29:22 +08:00
2015-06-17 19:57:05 +08:00
// 以下两行代码
// 给没有初始值的日期选择框提供本地化信息
2015-06-19 12:29:22 +08:00
let defaultCalendarValue = new GregorianCalendar(zhCn);
2015-06-03 20:12:49 +08:00
defaultCalendarValue.setTime(Date.now());
2015-05-21 20:36:13 +08:00
2015-06-19 12:29:22 +08:00
export default React.createClass({
2015-07-01 10:26:48 +08:00
getInitialState() {
2015-07-01 18:45:59 +08:00
var value;
2015-06-30 19:28:56 +08:00
if (this.props.value) {
2015-07-01 18:45:59 +08:00
value = new GregorianCalendar(zhCn);
2015-06-30 19:28:56 +08:00
value.setTime(new Date(this.props.value).valueOf());
}
2015-05-21 20:36:13 +08:00
return {
2015-06-30 19:28:56 +08:00
value: value
2015-05-21 20:36:13 +08:00
};
},
2015-07-01 10:26:48 +08:00
componentWillReceiveProps(nextProps) {
2015-07-02 20:04:35 +08:00
if (nextProps.value) {
2015-06-30 19:28:56 +08:00
var value = new GregorianCalendar(zhCn);
value.setTime(new Date(nextProps.value).valueOf());
this.setState({
value: value
});
}
},
2015-07-01 10:26:48 +08:00
getDefaultProps() {
2015-05-25 17:20:49 +08:00
return {
2015-06-01 17:58:02 +08:00
format: 'yyyy-MM-dd',
2015-06-30 19:28:56 +08:00
placeholder: '请选择日期',
2015-07-01 20:50:12 +08:00
transitionName: 'slide-up',
2015-08-04 18:44:07 +08:00
onSelect() {
2015-08-04 18:42:41 +08:00
}
2015-05-25 17:20:49 +08:00
};
},
2015-07-01 10:26:48 +08:00
handleChange(v) {
2015-06-30 19:28:56 +08:00
this.setState({
value: v
});
this.props.onSelect(new Date(v.getTime()));
2015-05-26 13:58:35 +08:00
},
2015-07-01 10:26:48 +08:00
render() {
2015-06-30 19:28:56 +08:00
var calendar = (
2015-05-21 20:36:13 +08:00
<Calendar
2015-07-08 14:55:05 +08:00
disabledDate={this.props.disabledDate}
2015-06-30 19:28:56 +08:00
locale={CalendarLocale}
orient={['top', 'left']}
defaultValue={defaultCalendarValue}
showTime={this.props.showTime}
prefixCls="ant-calendar"
showOk={this.props.showTime}
showClear={false}/>
2015-05-29 15:29:18 +08:00
);
return (
2015-06-09 14:50:55 +08:00
<Datepicker
2015-07-01 15:54:39 +08:00
transitionName={this.props.transitionName}
2015-07-20 17:49:05 +08:00
disabled={this.props.disabled}
2015-06-10 19:46:41 +08:00
trigger={<span className="ant-calendar-picker-icon" />}
2015-05-29 15:29:18 +08:00
calendar={calendar}
2015-08-04 18:42:41 +08:00
adjustOrientOnCalendarOverflow={{
x: true,
y: false
}}
2015-05-29 15:29:18 +08:00
formatter={new DateTimeFormat(this.props.format)}
value={this.state.value}
2015-08-06 12:23:49 +08:00
defaultValue={this.props.defaultValue}
2015-06-10 19:46:41 +08:00
prefixCls="ant-calendar-picker"
2015-06-30 19:28:56 +08:00
onChange={this.handleChange}>
2015-08-03 17:39:29 +08:00
<input
placeholder={this.props.placeholder}
className={'ant-calendar-picker-input ant-input ant-input-' + this.props.size}/>
2015-06-09 14:50:55 +08:00
</Datepicker>
2015-05-29 15:29:18 +08:00
);
2015-05-21 20:36:13 +08:00
}
});