2017-07-03 16:57:11 +08:00
|
|
|
/* tslint:disable jsx-no-multiline-js */
|
2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import * as moment from 'moment';
|
2018-07-19 11:26:47 +08:00
|
|
|
import { polyfill } from 'react-lifecycles-compat';
|
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';
|
2018-07-25 15:42:48 +08:00
|
|
|
import shallowequal from 'shallowequal';
|
2016-07-07 16:28:00 +08:00
|
|
|
import Icon from '../icon';
|
2018-07-11 20:09:58 +08:00
|
|
|
import Tag from '../tag';
|
2017-02-28 14:44:12 +08:00
|
|
|
import warning from '../_util/warning';
|
2018-03-09 15:04:21 +08:00
|
|
|
import interopDefault from '../_util/interopDefault';
|
2018-02-01 16:05:57 +08:00
|
|
|
import { RangePickerValue, RangePickerPresetRange } from './interface';
|
2017-12-21 17:06:59 +08:00
|
|
|
|
|
|
|
export interface RangePickerState {
|
|
|
|
value?: RangePickerValue;
|
|
|
|
showDate?: RangePickerValue;
|
|
|
|
open?: boolean;
|
|
|
|
hoverValue?: RangePickerValue;
|
|
|
|
}
|
|
|
|
|
2018-01-19 19:06:19 +08:00
|
|
|
function getShowDateFromValue(value: RangePickerValue) {
|
2018-12-04 20:18:16 +08:00
|
|
|
const [ start, end ] = value;
|
2017-04-26 14:44:07 +08:00
|
|
|
// value could be an empty array, then we should not reset showDate
|
|
|
|
if (!start && !end) {
|
|
|
|
return;
|
|
|
|
}
|
2017-04-07 17:15:21 +08:00
|
|
|
const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
|
2018-01-19 19:06:19 +08:00
|
|
|
return [start, newEnd] as RangePickerValue;
|
2017-04-07 17:15:21 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function formatValue(value: moment.Moment | undefined, format: string): string {
|
|
|
|
return (value && value.format(format)) || '';
|
|
|
|
}
|
|
|
|
|
2018-01-19 19:06:19 +08:00
|
|
|
function pickerValueAdapter(value?: moment.Moment | RangePickerValue): RangePickerValue | undefined {
|
2017-08-02 13:02:01 +08:00
|
|
|
if (!value) {
|
|
|
|
return;
|
|
|
|
}
|
2017-04-07 17:15:21 +08:00
|
|
|
if (Array.isArray(value)) {
|
|
|
|
return value;
|
|
|
|
}
|
|
|
|
return [value, value.clone().add(1, 'month')];
|
|
|
|
}
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
function isEmptyArray(arr: any) {
|
2017-07-12 15:15:21 +08:00
|
|
|
if (Array.isArray(arr)) {
|
|
|
|
return arr.length === 0 || arr.every(i => !i);
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2018-01-25 18:00:07 +08:00
|
|
|
function fixLocale(value: RangePickerValue | undefined, localeCode: string) {
|
|
|
|
if (!localeCode) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (!value || value.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
2018-12-04 20:18:16 +08:00
|
|
|
const [ start, end ] = value;
|
|
|
|
if (start) {
|
|
|
|
start!.locale(localeCode);
|
2018-01-25 18:00:07 +08:00
|
|
|
}
|
2018-12-04 20:18:16 +08:00
|
|
|
if (end) {
|
|
|
|
end!.locale(localeCode);
|
2018-01-25 18:00:07 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-07-19 11:26:47 +08:00
|
|
|
class RangePicker extends React.Component<any, RangePickerState> {
|
2016-03-31 20:42:35 +08:00
|
|
|
static defaultProps = {
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls: 'ant-calendar',
|
2018-07-31 15:16:28 +08:00
|
|
|
tagPrefixCls: 'ant-tag',
|
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
|
|
|
|
2018-07-19 11:26:47 +08:00
|
|
|
static getDerivedStateFromProps(nextProps: any, prevState: any) {
|
|
|
|
let state = null;
|
|
|
|
if ('value' in nextProps) {
|
|
|
|
const value = nextProps.value || [];
|
|
|
|
state = {
|
|
|
|
value,
|
|
|
|
};
|
2018-07-25 15:42:48 +08:00
|
|
|
if (!shallowequal(nextProps.value, prevState.value)) {
|
|
|
|
state = {
|
|
|
|
...state,
|
|
|
|
showDate: getShowDateFromValue(value) || prevState.showDate,
|
|
|
|
};
|
|
|
|
}
|
2018-07-19 11:26:47 +08:00
|
|
|
}
|
|
|
|
if (('open' in nextProps) && prevState.open !== nextProps.open) {
|
|
|
|
state = {
|
|
|
|
...state,
|
|
|
|
open: nextProps.open,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return state;
|
|
|
|
}
|
|
|
|
|
2017-11-30 09:54:31 +08:00
|
|
|
private picker: HTMLSpanElement;
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
constructor(props: any) {
|
2016-03-31 20:42:35 +08:00
|
|
|
super(props);
|
2016-12-02 15:07:33 +08:00
|
|
|
const value = props.value || props.defaultValue || [];
|
2018-12-04 20:18:16 +08:00
|
|
|
const [ start, end ] = value;
|
2016-12-02 15:07:33 +08:00
|
|
|
if (
|
2018-12-04 20:18:16 +08:00
|
|
|
start && !interopDefault(moment).isMoment(start) ||
|
|
|
|
end && !interopDefault(moment).isMoment(end)
|
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`, ' +
|
2017-07-19 13:59:53 +08:00
|
|
|
'see: https://u.ant.design/date-picker-value',
|
2016-12-02 15:07:33 +08:00
|
|
|
);
|
|
|
|
}
|
2017-07-12 15:15:21 +08:00
|
|
|
const pickerValue = !value || isEmptyArray(value) ? props.defaultPickerValue : value;
|
2016-03-31 20:42:35 +08:00
|
|
|
this.state = {
|
2016-12-02 15:07:33 +08:00
|
|
|
value,
|
2018-03-09 15:04:21 +08:00
|
|
|
showDate: pickerValueAdapter(pickerValue || interopDefault(moment)()),
|
2016-11-07 16:31:15 +08:00
|
|
|
open: props.open,
|
2017-05-22 09:42:04 +08:00
|
|
|
hoverValue: [],
|
2015-12-11 11:11:24 +08:00
|
|
|
};
|
2016-03-31 20:42:35 +08:00
|
|
|
}
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
clearSelection = (e: React.MouseEvent<HTMLElement>) => {
|
2016-07-07 16:28:00 +08:00
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
this.setState({ value: [] });
|
|
|
|
this.handleChange([]);
|
|
|
|
}
|
|
|
|
|
2017-05-22 09:42:04 +08:00
|
|
|
clearHoverValue = () => this.setState({ hoverValue: [] });
|
|
|
|
|
2018-01-19 19:06:19 +08:00
|
|
|
handleChange = (value: RangePickerValue) => {
|
2016-03-30 10:52:15 +08:00
|
|
|
const props = this.props;
|
|
|
|
if (!('value' in props)) {
|
2017-12-21 17:06:59 +08:00
|
|
|
this.setState(({ showDate }) => ({
|
2017-08-04 16:48:52 +08:00
|
|
|
value,
|
|
|
|
showDate: getShowDateFromValue(value) || showDate,
|
|
|
|
}));
|
2015-12-25 01:21:03 +08:00
|
|
|
}
|
2018-12-04 20:18:16 +08:00
|
|
|
const [ start, end ] = value;
|
2016-09-09 13:55:21 +08:00
|
|
|
props.onChange(value, [
|
2018-12-04 20:18:16 +08:00
|
|
|
formatValue(start, props.format),
|
|
|
|
formatValue(end, props.format),
|
2016-09-09 13:55:21 +08:00
|
|
|
]);
|
2018-10-09 17:44:22 +08:00
|
|
|
this.focus();
|
2016-03-31 20:42:35 +08:00
|
|
|
}
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
handleOpenChange = (open: boolean) => {
|
2017-10-17 21:29:26 +08:00
|
|
|
if (!('open' in this.props)) {
|
|
|
|
this.setState({ open });
|
|
|
|
}
|
2016-11-07 16:31:15 +08:00
|
|
|
|
2018-01-21 01:03:51 +08:00
|
|
|
if (open === false) {
|
|
|
|
this.clearHoverValue();
|
|
|
|
}
|
|
|
|
|
2017-01-19 13:55:04 +08:00
|
|
|
const { onOpenChange } = this.props;
|
2016-11-07 16:31:15 +08:00
|
|
|
if (onOpenChange) {
|
|
|
|
onOpenChange(open);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-21 17:06:59 +08:00
|
|
|
handleShowDateChange = (showDate: RangePickerValue) => this.setState({ showDate });
|
2017-01-19 13:55:04 +08:00
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
handleHoverChange = (hoverValue: any) => this.setState({ hoverValue });
|
2017-05-22 09:42:04 +08:00
|
|
|
|
2018-02-02 12:19:44 +08:00
|
|
|
handleRangeMouseLeave = () => {
|
|
|
|
if (this.state.open) {
|
|
|
|
this.clearHoverValue();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-01-31 12:01:27 +08:00
|
|
|
handleCalendarInputSelect = (value: RangePickerValue) => {
|
2018-12-04 20:18:16 +08:00
|
|
|
const [ start ] = value;
|
|
|
|
if (!start) {
|
2018-02-07 14:22:35 +08:00
|
|
|
return;
|
|
|
|
}
|
2018-01-31 12:01:27 +08:00
|
|
|
this.setState(({ showDate }) => ({
|
|
|
|
value,
|
|
|
|
showDate: getShowDateFromValue(value) || showDate,
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2018-02-01 16:05:57 +08:00
|
|
|
handleRangeClick = (value: RangePickerPresetRange) => {
|
|
|
|
if (typeof value === 'function') {
|
|
|
|
value = value();
|
|
|
|
}
|
2018-02-04 16:41:02 +08:00
|
|
|
|
2018-02-01 16:05:57 +08:00
|
|
|
this.setValue(value, true);
|
2018-02-04 16:41:02 +08:00
|
|
|
|
2018-09-10 00:26:26 +08:00
|
|
|
const { onOk, onOpenChange } = this.props;
|
2018-02-04 16:41:02 +08:00
|
|
|
if (onOk) {
|
|
|
|
onOk(value);
|
|
|
|
}
|
2018-09-10 00:26:26 +08:00
|
|
|
|
|
|
|
if (onOpenChange) {
|
|
|
|
onOpenChange(false);
|
|
|
|
}
|
2018-02-01 16:05:57 +08:00
|
|
|
}
|
|
|
|
|
2018-01-19 19:06:19 +08:00
|
|
|
setValue(value: RangePickerValue, hidePanel?: boolean) {
|
2016-11-15 17:16:20 +08:00
|
|
|
this.handleChange(value);
|
2017-10-17 21:29:26 +08:00
|
|
|
if ((hidePanel || !this.props.showTime) && !('open' in this.props)) {
|
2016-11-07 16:31:15 +08:00
|
|
|
this.setState({ open: false });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-11-30 09:54:31 +08:00
|
|
|
focus() {
|
|
|
|
this.picker.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
blur() {
|
|
|
|
this.picker.blur();
|
|
|
|
}
|
|
|
|
|
|
|
|
savePicker = (node: HTMLSpanElement) => {
|
|
|
|
this.picker = node;
|
|
|
|
}
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
renderFooter = (...args: any[]) => {
|
2018-07-31 15:16:28 +08:00
|
|
|
const { prefixCls, ranges, renderExtraFooter, tagPrefixCls } = this.props;
|
2017-06-05 17:11:58 +08:00
|
|
|
if (!ranges && !renderExtraFooter) {
|
2016-11-07 16:31:15 +08:00
|
|
|
return null;
|
|
|
|
}
|
2017-06-05 17:11:58 +08:00
|
|
|
const customFooter = renderExtraFooter ? (
|
|
|
|
<div className={`${prefixCls}-footer-extra`} key="extra">
|
|
|
|
{renderExtraFooter(...args)}
|
|
|
|
</div>
|
|
|
|
) : null;
|
|
|
|
const operations = Object.keys(ranges || {}).map((range) => {
|
2016-11-07 16:31:15 +08:00
|
|
|
const value = ranges[range];
|
2017-05-22 09:42:04 +08:00
|
|
|
return (
|
2018-07-11 20:09:58 +08:00
|
|
|
<Tag
|
2017-05-22 09:42:04 +08:00
|
|
|
key={range}
|
2018-07-31 15:16:28 +08:00
|
|
|
prefixCls={tagPrefixCls}
|
2018-07-11 20:09:58 +08:00
|
|
|
color="blue"
|
2018-02-01 16:05:57 +08:00
|
|
|
onClick={() => this.handleRangeClick(value)}
|
2017-05-22 09:42:04 +08:00
|
|
|
onMouseEnter={() => this.setState({ hoverValue: value })}
|
2018-02-02 12:19:44 +08:00
|
|
|
onMouseLeave={this.handleRangeMouseLeave}
|
2017-05-22 09:42:04 +08:00
|
|
|
>
|
|
|
|
{range}
|
2018-07-11 20:09:58 +08:00
|
|
|
</Tag>
|
2017-05-22 09:42:04 +08:00
|
|
|
);
|
2016-11-07 16:31:15 +08:00
|
|
|
});
|
2018-09-02 21:45:27 +08:00
|
|
|
const rangeNode = (operations && operations.length > 0) ? (
|
2017-06-05 17:11:58 +08:00
|
|
|
<div className={`${prefixCls}-footer-extra ${prefixCls}-range-quick-selector`} key="range">
|
2016-11-07 16:31:15 +08:00
|
|
|
{operations}
|
|
|
|
</div>
|
2018-09-02 21:45:27 +08:00
|
|
|
) : null;
|
2017-06-05 17:11:58 +08:00
|
|
|
return [rangeNode, customFooter];
|
2016-11-07 16:31:15 +08:00
|
|
|
}
|
|
|
|
|
2015-12-11 11:11:24 +08:00
|
|
|
render() {
|
2017-10-20 14:54:38 +08:00
|
|
|
const { state, props } = this;
|
2017-05-22 09:42:04 +08:00
|
|
|
const { value, showDate, hoverValue, open } = state;
|
2017-10-20 14:54:38 +08:00
|
|
|
const {
|
|
|
|
prefixCls, popupStyle, style,
|
|
|
|
disabledDate, disabledTime,
|
|
|
|
showTime, showToday,
|
|
|
|
ranges, onOk, locale, localeCode, format,
|
2018-09-16 19:39:43 +08:00
|
|
|
dateRender, onCalendarChange, suffixIcon,
|
2017-10-20 14:54:38 +08:00
|
|
|
} = props;
|
2018-01-25 18:00:07 +08:00
|
|
|
|
|
|
|
fixLocale(value, localeCode);
|
|
|
|
fixLocale(showDate, localeCode);
|
2017-01-09 16:25:58 +08:00
|
|
|
|
2017-02-28 14:44:12 +08:00
|
|
|
warning(!('onOK' in props), 'It should be `RangePicker[onOk]`, instead of `onOK`!');
|
2015-12-11 11:11:24 +08:00
|
|
|
|
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
|
2018-11-10 21:40:21 +08:00
|
|
|
const pickerChangeHandler = {
|
2016-02-18 19:15:23 +08:00
|
|
|
onChange: this.handleChange,
|
|
|
|
};
|
2017-08-21 21:15:44 +08:00
|
|
|
let calendarProps: any = {
|
2016-02-18 19:15:23 +08:00
|
|
|
onOk: this.handleChange,
|
|
|
|
};
|
2016-03-30 10:52:15 +08:00
|
|
|
if (props.timePicker) {
|
2017-01-09 16:25:58 +08:00
|
|
|
pickerChangeHandler.onChange = changedValue => this.handleChange(changedValue);
|
2016-02-18 19:15:23 +08:00
|
|
|
} else {
|
2017-08-21 21:15:44 +08:00
|
|
|
calendarProps = {};
|
|
|
|
}
|
|
|
|
if ('mode' in props) {
|
|
|
|
calendarProps.mode = props.mode;
|
2016-02-18 19:15:23 +08:00
|
|
|
}
|
|
|
|
|
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
|
2017-08-21 21:15:44 +08:00
|
|
|
{...calendarProps}
|
2017-12-01 10:50:25 +08:00
|
|
|
onChange={onCalendarChange}
|
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}
|
2017-09-25 22:10:26 +08:00
|
|
|
dateRender={dateRender}
|
2017-07-12 15:15:21 +08:00
|
|
|
value={showDate}
|
2017-01-19 13:55:04 +08:00
|
|
|
onValueChange={this.handleShowDateChange}
|
2017-05-22 09:42:04 +08:00
|
|
|
hoverValue={hoverValue}
|
|
|
|
onHoverChange={this.handleHoverChange}
|
2017-08-21 21:15:44 +08:00
|
|
|
onPanelChange={props.onPanelChange}
|
2016-11-15 17:16:20 +08:00
|
|
|
showToday={showToday}
|
2018-01-31 12:01:27 +08:00
|
|
|
onInputSelect={this.handleCalendarInputSelect}
|
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) {
|
2017-10-11 12:01:27 +08:00
|
|
|
pickerStyle.width = (style && style.width) || 350;
|
2016-12-11 13:59:06 +08:00
|
|
|
}
|
2018-12-04 20:18:16 +08:00
|
|
|
const [ startValue, endValue ] = value as RangePickerValue;
|
|
|
|
const clearIcon = (!props.disabled && props.allowClear && value && (startValue || endValue)) ? (
|
2017-03-23 21:15:49 +08:00
|
|
|
<Icon
|
2018-08-24 18:36:08 +08:00
|
|
|
type="close-circle"
|
2016-09-14 16:18:33 +08:00
|
|
|
className={`${prefixCls}-picker-clear`}
|
2016-07-07 16:28:00 +08:00
|
|
|
onClick={this.clearSelection}
|
2018-09-02 18:46:53 +08:00
|
|
|
theme="filled"
|
2017-03-23 21:15:49 +08:00
|
|
|
/>
|
|
|
|
) : null;
|
2016-07-07 16:28:00 +08:00
|
|
|
|
2018-09-16 19:39:43 +08:00
|
|
|
const inputIcon = suffixIcon && (
|
|
|
|
React.isValidElement<{ className?: string }>(suffixIcon)
|
2018-09-14 22:50:35 +08:00
|
|
|
? React.cloneElement(
|
2018-09-16 19:39:43 +08:00
|
|
|
suffixIcon,
|
2018-09-14 22:50:35 +08:00
|
|
|
{
|
|
|
|
className: classNames({
|
2018-09-16 19:39:43 +08:00
|
|
|
[suffixIcon.props.className!]: suffixIcon.props.className,
|
2018-09-14 22:50:35 +08:00
|
|
|
[`${prefixCls}-picker-icon`]: true,
|
|
|
|
}),
|
|
|
|
},
|
2018-09-16 19:39:43 +08:00
|
|
|
) : <span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>) || (
|
2018-09-14 22:50:35 +08:00
|
|
|
<Icon type="calendar" className={`${prefixCls}-picker-icon`} />
|
|
|
|
);
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
const input = ({ value: inputValue }: { value: any }) => {
|
2018-12-04 20:18:16 +08:00
|
|
|
const [ start, end ] = inputValue;
|
2016-11-25 12:03:39 +08:00
|
|
|
return (
|
2017-07-12 14:23:47 +08:00
|
|
|
<span className={props.pickerInputClass}>
|
2016-11-25 12:03:39 +08:00
|
|
|
<input
|
|
|
|
disabled={props.disabled}
|
2017-05-31 15:48:11 +08:00
|
|
|
readOnly
|
2016-11-25 12:03:39 +08:00
|
|
|
value={(start && start.format(props.format)) || ''}
|
|
|
|
placeholder={startPlaceholder}
|
2017-02-22 16:50:24 +08:00
|
|
|
className={`${prefixCls}-range-picker-input`}
|
2017-11-30 09:54:31 +08:00
|
|
|
tabIndex={-1}
|
2016-11-25 12:03:39 +08:00
|
|
|
/>
|
|
|
|
<span className={`${prefixCls}-range-picker-separator`}> ~ </span>
|
|
|
|
<input
|
|
|
|
disabled={props.disabled}
|
2017-05-31 15:48:11 +08:00
|
|
|
readOnly
|
2016-11-25 12:03:39 +08:00
|
|
|
value={(end && end.format(props.format)) || ''}
|
|
|
|
placeholder={endPlaceholder}
|
2017-02-22 16:50:24 +08:00
|
|
|
className={`${prefixCls}-range-picker-input`}
|
2017-11-30 09:54:31 +08:00
|
|
|
tabIndex={-1}
|
2016-11-25 12:03:39 +08:00
|
|
|
/>
|
|
|
|
{clearIcon}
|
2018-09-14 22:50:35 +08:00
|
|
|
{inputIcon}
|
2016-11-25 12:03:39 +08:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2016-12-11 13:59:06 +08:00
|
|
|
return (
|
2017-07-03 16:57:11 +08:00
|
|
|
<span
|
2017-11-30 09:54:31 +08:00
|
|
|
ref={this.savePicker}
|
2018-01-24 10:45:46 +08:00
|
|
|
id={props.id}
|
2017-07-03 16:57:11 +08:00
|
|
|
className={classNames(props.className, props.pickerClass)}
|
2017-11-30 09:54:31 +08:00
|
|
|
style={{ ...style, ...pickerStyle }}
|
|
|
|
tabIndex={props.disabled ? -1 : 0}
|
|
|
|
onFocus={props.onFocus}
|
|
|
|
onBlur={props.onBlur}
|
2018-07-28 21:52:12 +08:00
|
|
|
onMouseEnter={props.onMouseEnter}
|
|
|
|
onMouseLeave={props.onMouseLeave}
|
2017-07-03 16:57:11 +08:00
|
|
|
>
|
2016-12-11 13:59:06 +08:00
|
|
|
<RcDatePicker
|
|
|
|
{...props}
|
|
|
|
{...pickerChangeHandler}
|
|
|
|
calendar={calendar}
|
2017-01-09 16:25:58 +08:00
|
|
|
value={value}
|
|
|
|
open={open}
|
2016-12-11 13:59:06 +08:00
|
|
|
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
|
|
|
}
|
2018-07-19 11:26:47 +08:00
|
|
|
|
|
|
|
polyfill(RangePicker);
|
|
|
|
|
|
|
|
export default RangePicker;
|