2015-06-19 12:29:22 +08:00
|
|
|
import React from 'react';
|
2015-10-20 16:47:55 +08:00
|
|
|
import Calendar from 'rc-calendar';
|
|
|
|
import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
|
2015-12-10 16:12:10 +08:00
|
|
|
import DatePicker from 'rc-calendar/lib/Picker';
|
2015-06-19 12:29:22 +08:00
|
|
|
import GregorianCalendar from 'gregorian-calendar';
|
2015-11-03 13:50:36 +08:00
|
|
|
import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
|
2015-12-11 11:11:24 +08:00
|
|
|
import AntRangePicker from './RangePicker';
|
2015-12-25 01:21:03 +08:00
|
|
|
import PickerMixin from './PickerMixin';
|
|
|
|
import TimePicker from 'rc-time-picker';
|
|
|
|
import classNames from 'classnames';
|
2015-10-23 11:52:05 +08:00
|
|
|
|
2015-11-30 14:41:01 +08:00
|
|
|
function createPicker(TheCalendar, defaultFormat) {
|
2015-08-25 17:27:38 +08:00
|
|
|
return React.createClass({
|
2015-10-23 11:52:05 +08:00
|
|
|
getDefaultProps() {
|
|
|
|
return {
|
2015-11-30 14:41:01 +08:00
|
|
|
format: defaultFormat || 'yyyy-MM-dd',
|
2015-10-23 11:52:05 +08:00
|
|
|
transitionName: 'slide-up',
|
2015-11-11 12:21:00 +08:00
|
|
|
popupStyle: {},
|
2016-02-18 19:15:23 +08:00
|
|
|
onChange() {
|
|
|
|
},
|
|
|
|
onOk() {
|
|
|
|
},
|
2015-10-28 19:48:32 +08:00
|
|
|
locale: {},
|
2015-10-31 15:15:55 +08:00
|
|
|
align: {
|
2015-11-24 17:43:58 +08:00
|
|
|
offset: [0, -9],
|
2015-11-13 11:42:54 +08:00
|
|
|
},
|
2016-02-19 17:07:26 +08:00
|
|
|
open: false,
|
2015-10-23 11:52:05 +08:00
|
|
|
};
|
|
|
|
},
|
2015-08-25 17:27:38 +08:00
|
|
|
getInitialState() {
|
|
|
|
return {
|
2015-11-03 13:50:36 +08:00
|
|
|
value: this.parseDateFromValue(this.props.value || this.props.defaultValue)
|
2015-08-25 17:27:38 +08:00
|
|
|
};
|
|
|
|
},
|
2016-01-05 14:42:06 +08:00
|
|
|
mixins: [PickerMixin],
|
2015-08-25 17:27:38 +08:00
|
|
|
componentWillReceiveProps(nextProps) {
|
2015-09-01 10:59:12 +08:00
|
|
|
if ('value' in nextProps) {
|
2015-08-25 17:27:38 +08:00
|
|
|
this.setState({
|
2015-10-23 11:52:05 +08:00
|
|
|
value: this.parseDateFromValue(nextProps.value)
|
2015-08-25 17:27:38 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
2015-10-23 15:55:48 +08:00
|
|
|
handleChange(value) {
|
2015-12-12 13:38:25 +08:00
|
|
|
if (!('value' in this.props)) {
|
2016-02-19 17:07:26 +08:00
|
|
|
this.setState({ value });
|
2015-12-12 13:38:25 +08:00
|
|
|
}
|
2015-11-03 13:50:36 +08:00
|
|
|
const timeValue = value ? new Date(value.getTime()) : null;
|
2015-10-12 17:53:01 +08:00
|
|
|
this.props.onChange(timeValue);
|
2015-08-25 17:27:38 +08:00
|
|
|
},
|
|
|
|
render() {
|
2015-11-21 16:48:35 +08:00
|
|
|
const locale = this.getLocale();
|
2015-10-23 17:57:02 +08:00
|
|
|
// 以下两行代码
|
|
|
|
// 给没有初始值的日期选择框提供本地化信息
|
|
|
|
// 否则会以周日开始排
|
2015-11-21 16:48:35 +08:00
|
|
|
let defaultCalendarValue = new GregorianCalendar(locale);
|
2015-10-23 17:57:02 +08:00
|
|
|
defaultCalendarValue.setTime(Date.now());
|
2015-11-19 17:20:00 +08:00
|
|
|
|
2015-11-19 19:28:36 +08:00
|
|
|
const placeholder = ('placeholder' in this.props)
|
2015-11-21 16:48:35 +08:00
|
|
|
? this.props.placeholder : locale.lang.placeholder;
|
2015-12-25 01:21:03 +08:00
|
|
|
|
2016-02-18 19:15:23 +08:00
|
|
|
const timePicker = this.props.showTime ? (<TimePicker
|
|
|
|
prefixCls="ant-time-picker"
|
2016-04-07 17:44:13 +08:00
|
|
|
placeholder={locale.timePickerLocale.placeholder}
|
|
|
|
locale={locale.timePickerLocale}
|
2016-02-22 10:52:30 +08:00
|
|
|
transitionName="slide-up" />)
|
2015-12-25 01:21:03 +08:00
|
|
|
: null;
|
|
|
|
|
2016-01-30 16:15:43 +08:00
|
|
|
const disabledTime = this.props.showTime ? this.props.disabledTime : null;
|
|
|
|
|
2015-12-25 01:21:03 +08:00
|
|
|
const calendarClassName = classNames({
|
|
|
|
['ant-calendar-time']: this.props.showTime,
|
2016-01-13 17:30:24 +08:00
|
|
|
['ant-calendar-month']: MonthCalendar === TheCalendar,
|
2015-12-25 01:21:03 +08:00
|
|
|
});
|
|
|
|
|
2016-02-18 19:15:23 +08:00
|
|
|
let pickerChangeHandler = {
|
|
|
|
onChange: this.handleChange,
|
|
|
|
};
|
|
|
|
|
|
|
|
let calendarHandler = {
|
|
|
|
onOk: this.handleChange,
|
|
|
|
};
|
|
|
|
|
|
|
|
if (this.props.showTime) {
|
2016-02-19 17:15:31 +08:00
|
|
|
pickerChangeHandler.onChange = (value) => {
|
|
|
|
// Click clear button
|
|
|
|
if (value === null) {
|
|
|
|
this.handleChange(value);
|
|
|
|
}
|
|
|
|
};
|
2016-02-18 19:15:23 +08:00
|
|
|
} else {
|
|
|
|
calendarHandler = {};
|
|
|
|
}
|
|
|
|
|
2015-10-23 10:51:56 +08:00
|
|
|
const calendar = (
|
2015-09-01 16:18:46 +08:00
|
|
|
<TheCalendar
|
2015-08-25 17:27:38 +08:00
|
|
|
disabledDate={this.props.disabledDate}
|
2016-01-30 16:15:43 +08:00
|
|
|
disabledTime={disabledTime}
|
2015-11-21 16:48:35 +08:00
|
|
|
locale={locale.lang}
|
2015-12-25 01:21:03 +08:00
|
|
|
timePicker={timePicker}
|
2015-10-23 11:52:05 +08:00
|
|
|
defaultValue={defaultCalendarValue}
|
2015-11-19 17:20:00 +08:00
|
|
|
dateInputPlaceholder={placeholder}
|
2015-08-25 17:27:38 +08:00
|
|
|
prefixCls="ant-calendar"
|
2015-12-25 01:21:03 +08:00
|
|
|
className={calendarClassName}
|
2016-02-19 17:07:26 +08:00
|
|
|
{...calendarHandler} />
|
2015-08-25 17:27:38 +08:00
|
|
|
);
|
2015-11-13 11:42:54 +08:00
|
|
|
|
2015-09-01 16:18:46 +08:00
|
|
|
let sizeClass = '';
|
2015-08-25 17:27:38 +08:00
|
|
|
if (this.props.size === 'large') {
|
|
|
|
sizeClass = ' ant-input-lg';
|
|
|
|
} else if (this.props.size === 'small') {
|
|
|
|
sizeClass = ' ant-input-sm';
|
2015-08-04 18:42:41 +08:00
|
|
|
}
|
2015-11-03 13:50:36 +08:00
|
|
|
|
2015-11-13 11:42:54 +08:00
|
|
|
let pickerClass = 'ant-calendar-picker';
|
|
|
|
if (this.state.open) {
|
|
|
|
pickerClass += ' ant-calendar-picker-open';
|
|
|
|
}
|
2016-03-23 15:58:46 +08:00
|
|
|
|
|
|
|
// default width for showTime
|
|
|
|
const pickerStyle = {};
|
|
|
|
if (this.props.showTime) {
|
|
|
|
pickerStyle.width = 180;
|
|
|
|
}
|
|
|
|
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
2016-03-23 15:58:46 +08:00
|
|
|
<span className={pickerClass} style={{ ...pickerStyle, ...this.props.style }}>
|
2016-02-18 19:15:23 +08:00
|
|
|
<DatePicker
|
|
|
|
transitionName={this.props.transitionName}
|
2016-01-07 17:46:46 +08:00
|
|
|
disabled={this.props.disabled}
|
|
|
|
calendar={calendar}
|
|
|
|
value={this.state.value}
|
|
|
|
prefixCls="ant-calendar-picker-container"
|
|
|
|
style={this.props.popupStyle}
|
|
|
|
align={this.props.align}
|
2016-02-03 14:29:26 +08:00
|
|
|
getCalendarContainer={this.props.getCalendarContainer}
|
2016-01-07 17:46:46 +08:00
|
|
|
onOpen={this.toggleOpen}
|
|
|
|
onClose={this.toggleOpen}
|
2016-02-18 19:15:23 +08:00
|
|
|
{...pickerChangeHandler}
|
|
|
|
>
|
2016-01-07 14:21:29 +08:00
|
|
|
{
|
|
|
|
({ value }) => {
|
|
|
|
return (
|
|
|
|
<span>
|
2016-02-18 19:15:23 +08:00
|
|
|
<input
|
|
|
|
disabled={this.props.disabled}
|
2016-01-07 17:46:46 +08:00
|
|
|
onChange={this.handleInputChange}
|
|
|
|
value={value && this.getFormatter().format(value)}
|
|
|
|
placeholder={placeholder}
|
2016-02-22 10:52:30 +08:00
|
|
|
className={`ant-calendar-picker-input ant-input${sizeClass}`} />
|
|
|
|
<span className="ant-calendar-picker-icon" />
|
2016-01-07 14:21:29 +08:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
2015-10-20 16:47:55 +08:00
|
|
|
}
|
2016-01-07 14:21:29 +08:00
|
|
|
</DatePicker>
|
|
|
|
</span>
|
|
|
|
);
|
2015-08-25 17:27:38 +08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const AntDatePicker = createPicker(Calendar);
|
2015-11-30 14:41:01 +08:00
|
|
|
const AntMonthPicker = createPicker(MonthCalendar, 'yyyy-MM');
|
2015-08-24 14:30:08 +08:00
|
|
|
|
|
|
|
const AntCalendar = React.createClass({
|
|
|
|
getDefaultProps() {
|
|
|
|
return {
|
|
|
|
locale: CalendarLocale,
|
|
|
|
prefixCls: 'ant-calendar',
|
|
|
|
};
|
|
|
|
},
|
|
|
|
render() {
|
2015-10-23 10:51:56 +08:00
|
|
|
return <Calendar {...this.props} />;
|
2015-08-24 14:30:08 +08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-08-25 17:27:38 +08:00
|
|
|
AntDatePicker.Calendar = AntCalendar;
|
2015-12-11 11:11:24 +08:00
|
|
|
AntDatePicker.RangePicker = AntRangePicker;
|
2015-08-25 17:27:38 +08:00
|
|
|
AntDatePicker.MonthPicker = AntMonthPicker;
|
2015-08-24 14:30:08 +08:00
|
|
|
|
2015-08-25 17:27:38 +08:00
|
|
|
export default AntDatePicker;
|