2016-09-09 13:55:21 +08:00
|
|
|
import React from 'react';
|
|
|
|
import moment from 'moment';
|
2015-12-11 11:11:24 +08:00
|
|
|
import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
|
2016-03-31 20:42:35 +08:00
|
|
|
import RcDatePicker from 'rc-calendar/lib/Picker';
|
2015-12-11 11:11:24 +08:00
|
|
|
import classNames from 'classnames';
|
2016-12-11 13:59:06 +08:00
|
|
|
import assign from 'object-assign';
|
2016-07-07 16:28:00 +08:00
|
|
|
import Icon from '../icon';
|
2015-12-11 11:11:24 +08:00
|
|
|
|
2016-08-19 17:11:06 +08:00
|
|
|
export default class RangePicker extends React.Component<any, any> {
|
2016-03-31 20:42:35 +08:00
|
|
|
static defaultProps = {
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls: 'ant-calendar',
|
2016-10-28 10:10:02 +08:00
|
|
|
allowClear: true,
|
2016-11-15 17:16:20 +08:00
|
|
|
showToday: false,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-31 20:42:35 +08:00
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2016-12-02 15:07:33 +08:00
|
|
|
const value = props.value || props.defaultValue || [];
|
|
|
|
if (
|
2016-12-06 14:21:17 +08:00
|
|
|
value[0] && !moment.isMoment(value[0]) ||
|
|
|
|
value[1] && !moment.isMoment(value[1])
|
2016-12-02 15:07:33 +08:00
|
|
|
) {
|
|
|
|
throw new Error(
|
|
|
|
'The value/defaultValue of RangePicker must be a moment object array after `antd@2.0`, ' +
|
|
|
|
'see: http://u.ant.design/date-picker-value'
|
|
|
|
);
|
|
|
|
}
|
2016-03-31 20:42:35 +08:00
|
|
|
this.state = {
|
2016-12-02 15:07:33 +08:00
|
|
|
value,
|
2016-11-07 16:31:15 +08:00
|
|
|
open: props.open,
|
2015-12-11 11:11:24 +08:00
|
|
|
};
|
2016-03-31 20:42:35 +08:00
|
|
|
}
|
|
|
|
|
2015-12-11 11:11:24 +08:00
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
if ('value' in nextProps) {
|
|
|
|
this.setState({
|
2016-09-09 13:55:21 +08:00
|
|
|
value: nextProps.value || [],
|
2015-12-11 11:11:24 +08:00
|
|
|
});
|
|
|
|
}
|
2016-11-07 16:31:15 +08:00
|
|
|
if ('open' in nextProps) {
|
|
|
|
this.setState({
|
|
|
|
open: nextProps.open,
|
|
|
|
});
|
|
|
|
}
|
2016-03-31 20:42:35 +08:00
|
|
|
}
|
|
|
|
|
2016-07-07 16:28:00 +08:00
|
|
|
clearSelection = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
this.setState({ value: [] });
|
|
|
|
this.handleChange([]);
|
|
|
|
}
|
|
|
|
|
2016-03-31 20:42:35 +08:00
|
|
|
handleChange = (value) => {
|
2016-03-30 10:52:15 +08:00
|
|
|
const props = this.props;
|
|
|
|
if (!('value' in props)) {
|
2016-02-19 17:07:26 +08:00
|
|
|
this.setState({ value });
|
2015-12-25 01:21:03 +08:00
|
|
|
}
|
2016-09-09 13:55:21 +08:00
|
|
|
props.onChange(value, [
|
|
|
|
(value[0] && value[0].format(props.format)) || '',
|
|
|
|
(value[1] && value[1].format(props.format)) || '',
|
|
|
|
]);
|
2016-03-31 20:42:35 +08:00
|
|
|
}
|
|
|
|
|
2016-11-07 16:31:15 +08:00
|
|
|
handleOpenChange = (open) => {
|
|
|
|
this.setState({ open });
|
|
|
|
|
|
|
|
const onOpenChange = this.props.onOpenChange;
|
|
|
|
if (onOpenChange) {
|
|
|
|
onOpenChange(open);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setValue(value) {
|
2016-11-15 17:16:20 +08:00
|
|
|
this.handleChange(value);
|
2016-11-07 16:31:15 +08:00
|
|
|
if (!this.props.showTime) {
|
|
|
|
this.setState({ open: false });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
renderFooter = () => {
|
2016-11-21 11:41:33 +08:00
|
|
|
const { prefixCls, ranges } = this.props;
|
2016-11-07 16:31:15 +08:00
|
|
|
if (!ranges) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
const operations = Object.keys(ranges).map((range) => {
|
|
|
|
const value = ranges[range];
|
|
|
|
return <a key={range} onClick={() => this.setValue(value)}>{range}</a>;
|
|
|
|
});
|
|
|
|
return (
|
|
|
|
<div className={`${prefixCls}-range-quick-selector`}>
|
|
|
|
{operations}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-12-11 11:11:24 +08:00
|
|
|
render() {
|
2016-03-30 10:52:15 +08:00
|
|
|
const props = this.props;
|
2016-11-08 10:31:12 +08:00
|
|
|
const {
|
2016-11-15 17:16:20 +08:00
|
|
|
disabledDate, disabledTime, showTime, showToday,
|
2016-11-08 10:31:12 +08:00
|
|
|
ranges, prefixCls, popupStyle,
|
|
|
|
style, onOk, locale, format,
|
2016-11-14 11:56:05 +08:00
|
|
|
} = props;
|
2015-12-11 11:11:24 +08:00
|
|
|
const state = this.state;
|
|
|
|
|
2015-12-25 01:21:03 +08:00
|
|
|
const calendarClassName = classNames({
|
2016-09-14 16:18:33 +08:00
|
|
|
[`${prefixCls}-time`]: showTime,
|
2016-11-08 10:31:12 +08:00
|
|
|
[`${prefixCls}-range-with-ranges`]: ranges,
|
2015-12-25 01:21:03 +08:00
|
|
|
});
|
|
|
|
|
2016-07-15 16:20:23 +08:00
|
|
|
// 需要选择时间时,点击 ok 时才触发 onChange
|
2016-02-18 19:15:23 +08:00
|
|
|
let pickerChangeHandler = {
|
|
|
|
onChange: this.handleChange,
|
|
|
|
};
|
2016-08-19 17:11:06 +08:00
|
|
|
let calendarHandler: Object = {
|
2016-02-18 19:15:23 +08:00
|
|
|
onOk: this.handleChange,
|
|
|
|
};
|
2016-03-30 10:52:15 +08:00
|
|
|
if (props.timePicker) {
|
2016-09-27 13:42:30 +08:00
|
|
|
pickerChangeHandler.onChange = value => this.handleChange(value);
|
2016-02-18 19:15:23 +08:00
|
|
|
} else {
|
|
|
|
calendarHandler = {};
|
|
|
|
}
|
|
|
|
|
2016-11-23 20:35:34 +08:00
|
|
|
const startPlaceholder = ('placeholder' in props)
|
|
|
|
? props.placeholder[0] : locale.lang.rangePlaceholder[0];
|
|
|
|
const endPlaceholder = ('placeholder' in props)
|
|
|
|
? props.placeholder[1] : locale.lang.rangePlaceholder[1];
|
2016-04-01 13:53:37 +08:00
|
|
|
|
2016-01-07 14:21:29 +08:00
|
|
|
const calendar = (
|
2016-02-18 19:15:23 +08:00
|
|
|
<RangeCalendar
|
2016-09-09 13:55:21 +08:00
|
|
|
{...calendarHandler}
|
2016-11-14 11:56:05 +08:00
|
|
|
format={format}
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls={prefixCls}
|
2016-01-07 17:46:46 +08:00
|
|
|
className={calendarClassName}
|
2016-11-07 16:31:15 +08:00
|
|
|
renderFooter={this.renderFooter}
|
2016-03-30 10:52:15 +08:00
|
|
|
timePicker={props.timePicker}
|
2016-01-07 17:46:46 +08:00
|
|
|
disabledDate={disabledDate}
|
2016-10-25 17:39:17 +08:00
|
|
|
disabledTime={disabledTime}
|
2016-01-07 17:46:46 +08:00
|
|
|
dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
|
|
|
|
locale={locale.lang}
|
2016-02-02 17:49:44 +08:00
|
|
|
onOk={onOk}
|
2016-09-09 13:55:21 +08:00
|
|
|
defaultValue={props.defaultPickerValue || [moment(), moment()]}
|
2016-11-15 17:16:20 +08:00
|
|
|
showToday={showToday}
|
2016-02-18 19:15:23 +08:00
|
|
|
/>
|
2016-01-07 14:21:29 +08:00
|
|
|
);
|
2015-12-11 11:11:24 +08:00
|
|
|
|
2016-12-11 13:59:06 +08:00
|
|
|
// default width for showTime
|
|
|
|
const pickerStyle = {} as any;
|
|
|
|
if (props.showTime) {
|
|
|
|
pickerStyle.minWidth = 300;
|
|
|
|
}
|
|
|
|
|
2016-10-28 10:10:02 +08:00
|
|
|
const clearIcon = (!props.disabled && props.allowClear && state.value && (state.value[0] || state.value[1]))
|
2016-07-07 16:28:00 +08:00
|
|
|
? <Icon
|
|
|
|
type="cross-circle"
|
2016-09-14 16:18:33 +08:00
|
|
|
className={`${prefixCls}-picker-clear`}
|
2016-07-07 16:28:00 +08:00
|
|
|
onClick={this.clearSelection}
|
|
|
|
/> : null;
|
|
|
|
|
2016-11-25 12:03:39 +08:00
|
|
|
const input = ({ value }) => {
|
|
|
|
const start = value[0];
|
|
|
|
const end = value[1];
|
|
|
|
return (
|
|
|
|
<span className={props.pickerInputClass} disabled={props.disabled}>
|
|
|
|
<input
|
|
|
|
disabled={props.disabled}
|
|
|
|
readOnly
|
|
|
|
value={(start && start.format(props.format)) || ''}
|
|
|
|
placeholder={startPlaceholder}
|
|
|
|
className={`${prefixCls}-range-picker-input`}
|
|
|
|
/>
|
|
|
|
<span className={`${prefixCls}-range-picker-separator`}> ~ </span>
|
|
|
|
<input
|
|
|
|
disabled={props.disabled}
|
|
|
|
readOnly
|
|
|
|
value={(end && end.format(props.format)) || ''}
|
|
|
|
placeholder={endPlaceholder}
|
|
|
|
className={`${prefixCls}-range-picker-input`}
|
|
|
|
/>
|
|
|
|
{clearIcon}
|
|
|
|
<span className={`${prefixCls}-picker-icon`} />
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2016-12-11 13:59:06 +08:00
|
|
|
return (
|
|
|
|
<span className={props.pickerClass} style={assign({}, style, pickerStyle)}>
|
|
|
|
<RcDatePicker
|
|
|
|
{...props}
|
|
|
|
{...pickerChangeHandler}
|
|
|
|
calendar={calendar}
|
|
|
|
value={state.value}
|
|
|
|
open={state.open}
|
|
|
|
onOpenChange={this.handleOpenChange}
|
|
|
|
prefixCls={`${prefixCls}-picker-container`}
|
|
|
|
style={popupStyle}
|
|
|
|
>
|
|
|
|
{input}
|
|
|
|
</RcDatePicker>
|
|
|
|
</span>
|
|
|
|
);
|
2015-12-11 11:11:24 +08:00
|
|
|
}
|
2016-03-31 20:42:35 +08:00
|
|
|
}
|