amis-ui 6.13.0-beta.8 → 6.13.0

package/esm/components/DateRangePicker.js

@@ -0,0 +1,1386 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __assign, __spreadArray, __read, __rest } from 'tslib';
+import React__default from 'react';
+import { findDOMNode } from 'react-dom';
+import moment from 'moment';
+import omit from 'lodash/omit';
+import kebabCase from 'lodash/kebabCase';
+import { filterDate, str2function, noop, isExpression, FormulaExec, getComputedStyle, ucFirst, Overlay, PopOver, themeable, localeable } from 'amis-core';
+import { Icon } from './icons.js';
+import Calendar from './calendar/Calendar.js';
+import PopUp from './PopUp.js';
+import CalendarMobile from './CalendarMobile.js';
+import Input from './Input.js';
+import Button from './Button.js';
+
+/**
+ * @file DateRangePicker
+ * @description 自定义日期范围时间选择器组件
+ * @author fex
+ */
+var availableShortcuts = {
+    'today': {
+        label: 'Date.today',
+        startDate: function (now) {
+            return now.startOf('day');
+        },
+        endDate: function (now) {
+            return now;
+        }
+    },
+    'yesterday': {
+        label: 'Date.yesterday',
+        startDate: function (now) {
+            return now.add(-1, 'days').startOf('day');
+        },
+        endDate: function (now) {
+            return now.add(-1, 'days').endOf('day');
+        }
+    },
+    'tomorrow': {
+        label: 'Date.tomorrow',
+        startDate: function (now) {
+            return now.add(1, 'days').startOf('day');
+        },
+        endDate: function (now) {
+            return now.add(1, 'days').endOf('day');
+        }
+    },
+    // 兼容一下错误的用法
+    '1daysago': {
+        label: 'DateRange.1daysago',
+        startDate: function (now) {
+            return now.add(-1, 'days');
+        },
+        endDate: function (now) {
+            return now;
+        }
+    },
+    '1dayago': {
+        label: 'DateRange.1daysago',
+        startDate: function (now) {
+            return now.add(-1, 'days');
+        },
+        endDate: function (now) {
+            return now;
+        }
+    },
+    '7daysago': {
+        label: 'DateRange.7daysago',
+        startDate: function (now) {
+            return now.add(-7, 'days').startOf('day');
+        },
+        endDate: function (now) {
+            return now.add(-1, 'days').endOf('day');
+        }
+    },
+    '30daysago': {
+        label: 'DateRange.30daysago',
+        startDate: function (now) {
+            return now.add(-30, 'days').startOf('day');
+        },
+        endDate: function (now) {
+            return now.add(-1, 'days').endOf('day');
+        }
+    },
+    '90daysago': {
+        label: 'DateRange.90daysago',
+        startDate: function (now) {
+            return now.add(-90, 'days').startOf('day');
+        },
+        endDate: function (now) {
+            return now.add(-1, 'days').endOf('day');
+        }
+    },
+    'prevweek': {
+        label: 'DateRange.lastWeek',
+        startDate: function (now) {
+            return now.startOf('week').add(-1, 'weeks');
+        },
+        endDate: function (now) {
+            return now.startOf('week').add(-1, 'days').endOf('day');
+        }
+    },
+    'thisweek': {
+        label: 'DateRange.thisWeek',
+        startDate: function (now) {
+            return now.startOf('week');
+        },
+        endDate: function (now) {
+            return now.endOf('week');
+        }
+    },
+    'thismonth': {
+        label: 'DateRange.thisMonth',
+        startDate: function (now) {
+            return now.startOf('month');
+        },
+        endDate: function (now) {
+            return now.endOf('month');
+        }
+    },
+    'thisquarter': {
+        label: 'DateRange.thisQuarter',
+        startDate: function (now) {
+            return now.startOf('quarter');
+        },
+        endDate: function (now) {
+            return now.endOf('quarter');
+        }
+    },
+    'prevmonth': {
+        label: 'DateRange.lastMonth',
+        startDate: function (now) {
+            return now.startOf('month').add(-1, 'month');
+        },
+        endDate: function (now) {
+            return now.startOf('month').add(-1, 'day').endOf('day');
+        }
+    },
+    'prevquarter': {
+        label: 'DateRange.lastQuarter',
+        startDate: function (now) {
+            return now.startOf('quarter').add(-1, 'quarter');
+        },
+        endDate: function (now) {
+            return now.startOf('quarter').add(-1, 'day').endOf('day');
+        }
+    },
+    'thisyear': {
+        label: 'DateRange.thisYear',
+        startDate: function (now) {
+            return now.startOf('year');
+        },
+        endDate: function (now) {
+            return now.endOf('year');
+        }
+    },
+    // 兼容一下之前的用法 'lastYear'
+    'prevyear': {
+        label: 'DateRange.lastYear',
+        startDate: function (now) {
+            return now.startOf('year').add(-1, 'year');
+        },
+        endDate: function (now) {
+            return now.endOf('year').add(-1, 'year').endOf('day');
+        }
+    },
+    'lastYear': {
+        label: 'DateRange.lastYear',
+        startDate: function (now) {
+            return now.startOf('year').add(-1, 'year');
+        },
+        endDate: function (now) {
+            return now.endOf('year').add(-1, 'year').endOf('day');
+        }
+    }
+};
+var advancedRanges = [
+    {
+        regexp: /^(\d+)hoursago$/,
+        resolve: function (__, _, hours) {
+            return {
+                label: __('DateRange.hoursago', { hours: hours }),
+                startDate: function (now) {
+                    return now.add(-hours, 'hours').startOf('hour');
+                },
+                endDate: function (now) {
+                    return now.add(-1, 'hours').endOf('hours');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)hourslater$/,
+        resolve: function (__, _, hours) {
+            return {
+                label: __('DateRange.hourslater', { hours: hours }),
+                startDate: function (now) {
+                    return now.startOf('hour');
+                },
+                endDate: function (now) {
+                    return now.add(hours, 'hours').endOf('hour');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)daysago$/,
+        resolve: function (__, _, days) {
+            return {
+                label: __('DateRange.daysago', { days: days }),
+                startDate: function (now) {
+                    return now.add(-days, 'days').startOf('day');
+                },
+                endDate: function (now) {
+                    return now.add(-1, 'days').endOf('day');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)dayslater$/,
+        resolve: function (__, _, days) {
+            return {
+                label: __('DateRange.dayslater', { days: days }),
+                startDate: function (now) {
+                    return now.startOf('day');
+                },
+                endDate: function (now) {
+                    return now.add(days, 'days').endOf('day');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)weeksago$/,
+        resolve: function (__, _, weeks) {
+            return {
+                label: __('DateRange.weeksago', { weeks: weeks }),
+                startDate: function (now) {
+                    return now.startOf('week').add(-weeks, 'weeks');
+                },
+                endDate: function (now) {
+                    return now.startOf('week').add(-1, 'days').endOf('day');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)weekslater$/,
+        resolve: function (__, _, weeks) {
+            return {
+                label: __('DateRange.weekslater', { weeks: weeks }),
+                startDate: function (now) {
+                    return now.startOf('week');
+                },
+                endDate: function (now) {
+                    return now.startOf('week').add(weeks, 'weeks').endOf('day');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)monthsago$/,
+        resolve: function (__, _, months) {
+            return {
+                label: __('DateRange.monthsago', { months: months }),
+                startDate: function (now) {
+                    return now.startOf('months').add(-months, 'months');
+                },
+                endDate: function (now) {
+                    return now.startOf('month').add(-1, 'days').endOf('day');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)monthslater$/,
+        resolve: function (__, _, months) {
+            return {
+                label: __('DateRange.monthslater', { months: months }),
+                startDate: function (now) {
+                    return now.startOf('month');
+                },
+                endDate: function (now) {
+                    return now.startOf('month').add(months, 'months').endOf('day');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)quartersago$/,
+        resolve: function (__, _, quarters) {
+            return {
+                label: __('DateRange.quartersago', { quarters: quarters }),
+                startDate: function (now) {
+                    return now.startOf('quarters').add(-quarters, 'quarters');
+                },
+                endDate: function (now) {
+                    return now.startOf('quarter').add(-1, 'days').endOf('day');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)quarterslater$/,
+        resolve: function (__, _, quarters) {
+            return {
+                label: __('DateRange.quarterslater', { quarters: quarters }),
+                startDate: function (now) {
+                    return now.startOf('quarter');
+                },
+                endDate: function (now) {
+                    return now.startOf('quarter').add(quarters, 'quarters').endOf('day');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)yearsago$/,
+        resolve: function (__, _, years) {
+            return {
+                label: __('DateRange.yearsago', { years: years }),
+                startDate: function (now) {
+                    return now.startOf('years').add(-years, 'years');
+                },
+                endDate: function (now) {
+                    return now.startOf('year').add(-1, 'days').endOf('day');
+                }
+            };
+        }
+    },
+    {
+        regexp: /^(\d+)yearslater$/,
+        resolve: function (__, _, years) {
+            return {
+                label: __('DateRange.yearslater', { years: years }),
+                startDate: function (now) {
+                    return now.startOf('year');
+                },
+                endDate: function (now) {
+                    return now.startOf('year').add(years, 'years').endOf('day');
+                }
+            };
+        }
+    }
+];
+var dateFormats = {
+    Y: { format: 'YYYY' },
+    Q: { format: 'YYYY [Q]Q' },
+    M: { format: 'YYYY-MM' },
+    D: { format: 'YYYY-MM-DD' }
+};
+var timeFormats = {
+    h: { format: 'HH' },
+    H: { format: 'HH' },
+    m: { format: 'mm' },
+    s: { format: 'ss' },
+    S: { format: 'ss' }
+};
+var DateRangePicker = /** @class */ (function (_super) {
+    __extends(DateRangePicker, _super);
+    function DateRangePicker(props) {
+        var _this = _super.call(this, props) || this;
+        // 是否是第一次点击，如果是第一次点击就可以点任意地址
+        _this.isFirstClick = true;
+        _this.nextMonth = moment().add(1, 'months').startOf('day');
+        _this.currentMonth = moment().startOf('day');
+        _this.startInputRef = React__default.createRef();
+        _this.endInputRef = React__default.createRef();
+        _this.separatorRef = React__default.createRef();
+        _this.calendarRef = React__default.createRef();
+        _this.open = _this.open.bind(_this);
+        _this.openStart = _this.openStart.bind(_this);
+        _this.openEnd = _this.openEnd.bind(_this);
+        _this.close = _this.close.bind(_this);
+        _this.startInputChange = _this.startInputChange.bind(_this);
+        _this.endInputChange = _this.endInputChange.bind(_this);
+        _this.handleDateChange = _this.handleDateChange.bind(_this);
+        _this.handleStartDateChange = _this.handleStartDateChange.bind(_this);
+        _this.handelEndDateChange = _this.handelEndDateChange.bind(_this);
+        _this.handleTimeStartChange = _this.handleTimeStartChange.bind(_this);
+        _this.handleTimeEndChange = _this.handleTimeEndChange.bind(_this);
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        _this.checkStartIsValidDate = _this.checkStartIsValidDate.bind(_this);
+        _this.checkEndIsValidDate = _this.checkEndIsValidDate.bind(_this);
+        _this.confirm = _this.confirm.bind(_this);
+        _this.clearValue = _this.clearValue.bind(_this);
+        _this.dom = React__default.createRef();
+        _this.handleClick = _this.handleClick.bind(_this);
+        _this.handleKeyPress = _this.handleKeyPress.bind(_this);
+        _this.handlePopOverClick = _this.handlePopOverClick.bind(_this);
+        _this.renderDay = _this.renderDay.bind(_this);
+        _this.renderMonth = _this.renderMonth.bind(_this);
+        _this.renderQuarter = _this.renderQuarter.bind(_this);
+        _this.renderYear = _this.renderYear.bind(_this);
+        _this.handleMobileChange = _this.handleMobileChange.bind(_this);
+        _this.handleOutClick = _this.handleOutClick.bind(_this);
+        var _a = _this.props, format = _a.format, valueFormat = _a.valueFormat, joinValues = _a.joinValues, delimiter = _a.delimiter, value = _a.value, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, dateFormat = _a.dateFormat, timeFormat = _a.timeFormat, data = _a.data, utc = _a.utc;
+        var _b = DateRangePicker.unFormatValue(value, valueFormat || format, joinValues, delimiter, data, utc), startDate = _b.startDate, endDate = _b.endDate;
+        var curDateFormat = dateFormat !== null && dateFormat !== void 0 ? dateFormat : '';
+        var curTimeFormat = timeFormat !== null && timeFormat !== void 0 ? timeFormat : '';
+        var curTimeFormatArr = [];
+        !dateFormat &&
+            Object.keys(dateFormats).forEach(function (item) {
+                var _a;
+                if ((_a = (displayFormat || inputFormat)) === null || _a === void 0 ? void 0 : _a.includes(item)) {
+                    curDateFormat = dateFormats[item].format;
+                }
+            });
+        !timeFormat &&
+            Object.keys(timeFormats).forEach(function (item) {
+                var _a;
+                if ((_a = (displayFormat || inputFormat)) === null || _a === void 0 ? void 0 : _a.includes(item)) {
+                    curTimeFormatArr.push(timeFormats[item].format);
+                }
+            });
+        curTimeFormat = curTimeFormatArr.length
+            ? curTimeFormatArr.join(':')
+            : curTimeFormat;
+        _this.state = {
+            isOpened: false,
+            isFocused: false,
+            editState: 'start',
+            startDate: startDate,
+            endDate: endDate,
+            oldStartDate: startDate,
+            oldEndDate: endDate,
+            startInputValue: startDate === null || startDate === void 0 ? void 0 : startDate.format(displayFormat || inputFormat),
+            endInputValue: endDate === null || endDate === void 0 ? void 0 : endDate.format(displayFormat || inputFormat),
+            endDateOpenedFirst: false,
+            curDateFormat: curDateFormat,
+            curTimeFormat: curTimeFormat
+        };
+        return _this;
+    }
+    DateRangePicker.formatValue = function (newValue, valueFormat, joinValues, delimiter, utc) {
+        var _a, _b;
+        if (utc === void 0) { utc = false; }
+        newValue = [
+            (_a = (utc ? moment.utc(newValue.startDate) : newValue.startDate)) === null || _a === void 0 ? void 0 : _a.format(valueFormat),
+            (_b = (utc ? moment.utc(newValue.endDate) : newValue.endDate)) === null || _b === void 0 ? void 0 : _b.format(valueFormat)
+        ];
+        if (joinValues) {
+            newValue = newValue.join(delimiter);
+        }
+        return newValue;
+    };
+    /* 将日期时间转化为momemnt格式，如果输入的内容不合法则返回undefined */
+    DateRangePicker.unFormatValue = function (value, format, joinValues, delimiter, data, utc) {
+        if (!value) {
+            return {
+                startDate: undefined,
+                endDate: undefined
+            };
+        }
+        if (joinValues && typeof value === 'string') {
+            value = value.split(delimiter);
+        }
+        var startDate = filterDate(value === null || value === void 0 ? void 0 : value[0], data, format, utc);
+        var endDate = filterDate(value === null || value === void 0 ? void 0 : value[1], data, format, utc);
+        /**
+         * 不合法的value输入都丢弃
+         * 注意undefined被moment认为是合法的输入，moment会转化为now，所以需要结合在一起判断
+         * @reference https://github.com/moment/moment/issues/1639
+         */
+        return {
+            startDate: value[0] && startDate.isValid() ? startDate : undefined,
+            endDate: value[1] && endDate.isValid() ? endDate : undefined
+        };
+    };
+    DateRangePicker.prototype.componentDidMount = function () {
+        var _a, _b;
+        document.body.addEventListener('click', this.handleOutClick, true);
+        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onRef) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+    };
+    DateRangePicker.prototype.componentWillUnmount = function () {
+        document.body.removeEventListener('click', this.handleOutClick, true);
+    };
+    DateRangePicker.prototype.handleOutClick = function (e) {
+        if (!e.target ||
+            !this.dom.current ||
+            this.dom.current.contains(e.target) ||
+            !this.calendarRef.current ||
+            this.calendarRef.current.contains(e.target)) {
+            return;
+        }
+        if (this.state.isOpened) {
+            e.preventDefault();
+            this.close();
+        }
+    };
+    DateRangePicker.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        var value = props.value, format = props.format, valueFormat = props.valueFormat, joinValues = props.joinValues, inputFormat = props.inputFormat, displayFormat = props.displayFormat, dateFormat = props.dateFormat, timeFormat = props.timeFormat, delimiter = props.delimiter, data = props.data, utc = props.utc;
+        if (prevProps.displayFormat != displayFormat ||
+            prevProps.inputFormat != inputFormat) {
+            var curDateFormat_1 = dateFormat !== null && dateFormat !== void 0 ? dateFormat : '';
+            var curTimeFormat = timeFormat !== null && timeFormat !== void 0 ? timeFormat : '';
+            var curTimeFormatArr_1 = [];
+            !dateFormat &&
+                Object.keys(dateFormats).forEach(function (item) {
+                    var _a;
+                    if ((_a = (displayFormat || inputFormat)) === null || _a === void 0 ? void 0 : _a.includes(item)) {
+                        curDateFormat_1 = dateFormats[item].format;
+                    }
+                });
+            !timeFormat &&
+                Object.keys(timeFormats).forEach(function (item) {
+                    var _a;
+                    if ((_a = (displayFormat || inputFormat)) === null || _a === void 0 ? void 0 : _a.includes(item)) {
+                        curTimeFormatArr_1.push(timeFormats[item].format);
+                    }
+                });
+            this.setState({
+                curDateFormat: curDateFormat_1,
+                curTimeFormat: curTimeFormatArr_1.length
+                    ? curTimeFormatArr_1.join(':')
+                    : curTimeFormat
+            });
+        }
+        if (prevProps.value !== value) {
+            var _a = DateRangePicker.unFormatValue(value, valueFormat || format, joinValues, delimiter, data, utc), startDate = _a.startDate, endDate = _a.endDate;
+            this.setState({
+                startDate: startDate,
+                endDate: endDate,
+                startInputValue: startDate && (startDate === null || startDate === void 0 ? void 0 : startDate.isValid())
+                    ? startDate === null || startDate === void 0 ? void 0 : startDate.format(displayFormat || inputFormat)
+                    : '',
+                endInputValue: endDate && (endDate === null || endDate === void 0 ? void 0 : endDate.isValid())
+                    ? endDate === null || endDate === void 0 ? void 0 : endDate.format(displayFormat || inputFormat)
+                    : ''
+            });
+        }
+    };
+    DateRangePicker.prototype.focus = function () {
+        if (!this.dom.current || this.props.disabled) {
+            return;
+        }
+        this.dom.current.focus();
+    };
+    DateRangePicker.prototype.blur = function () {
+        if (!this.dom.current || this.props.disabled) {
+            return;
+        }
+        this.dom.current.blur();
+    };
+    DateRangePicker.prototype.handleFocus = function (e) {
+        this.setState({
+            isFocused: true
+        });
+        var onFocus = this.props.onFocus;
+        onFocus && onFocus(e);
+    };
+    DateRangePicker.prototype.handleBlur = function (e) {
+        this.setState({
+            isFocused: false
+        });
+        var onBlur = this.props.onBlur;
+        onBlur && onBlur(e);
+    };
+    DateRangePicker.prototype.open = function () {
+        if (this.props.disabled) {
+            return;
+        }
+        this.setState({
+            isOpened: true
+        });
+    };
+    DateRangePicker.prototype.openStart = function () {
+        if (this.props.disabled) {
+            return;
+        }
+        this.setState({
+            isOpened: true,
+            editState: 'start'
+        });
+    };
+    DateRangePicker.prototype.openEnd = function () {
+        if (this.props.disabled) {
+            return;
+        }
+        this.setState({
+            isOpened: true,
+            editState: 'end',
+            endDateOpenedFirst: true
+        });
+    };
+    DateRangePicker.prototype.close = function (isConfirm) {
+        if (isConfirm === void 0) { isConfirm = false; }
+        var newState = {};
+        if (!isConfirm) {
+            /** 未点击确认关闭时，将日期恢复至未做任何选择的状态 */
+            var _a = this.props, value = _a.value, format = _a.format, valueFormat = _a.valueFormat, joinValues = _a.joinValues, delimiter = _a.delimiter, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, data = _a.data, utc = _a.utc;
+            var _b = DateRangePicker.unFormatValue(value, valueFormat || format, joinValues, delimiter, data, utc), startDate = _b.startDate, endDate = _b.endDate;
+            Object.assign(newState, {
+                startDate: startDate,
+                endDate: endDate,
+                oldStartDate: startDate,
+                oldEndDate: endDate,
+                startInputValue: startDate && moment(startDate).isValid()
+                    ? startDate.format(displayFormat || inputFormat)
+                    : '',
+                endInputValue: endDate && moment(endDate).isValid()
+                    ? endDate.format(displayFormat || inputFormat)
+                    : ''
+            });
+        }
+        else {
+            Object.assign(newState, {
+                oldStartDate: this.state.startDate,
+                oldEndDate: this.state.endDate
+            });
+        }
+        this.setState(__assign(__assign({}, newState), { isOpened: false, editState: undefined, endDateOpenedFirst: false }), this.blur);
+    };
+    DateRangePicker.prototype.handleClick = function () {
+        this.state.isOpened ? this.close() : this.open();
+    };
+    DateRangePicker.prototype.handlePopOverClick = function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    DateRangePicker.prototype.handleKeyPress = function (e) {
+        if (e.key === ' ') {
+            this.handleClick();
+            e.preventDefault();
+        }
+    };
+    DateRangePicker.prototype.confirm = function () {
+        var _a = this.props, format = _a.format, valueFormat = _a.valueFormat, joinValues = _a.joinValues, delimiter = _a.delimiter, utc = _a.utc;
+        var _b = this.state, startDate = _b.startDate, endDate = _b.endDate;
+        if (!startDate && !endDate) {
+            return;
+        }
+        else if (endDate && (startDate === null || startDate === void 0 ? void 0 : startDate.isAfter(this.state.endDate))) {
+            return;
+        }
+        this.props.onChange(DateRangePicker.formatValue({ startDate: startDate, endDate: endDate }, valueFormat || format, joinValues, delimiter, utc));
+        if (startDate && !endDate) {
+            this.setState({ editState: 'end', endDateOpenedFirst: false });
+        }
+        else {
+            this.close(true);
+        }
+    };
+    DateRangePicker.prototype.filterDate = function (date, options) {
+        if (options === void 0) { options = { type: 'start' }; }
+        var _a = options || {
+            type: 'start'
+        }, type = _a.type, originValue = _a.originValue, timeFormat = _a.timeFormat, subControlViewMode = _a.subControlViewMode, autoInitDefaultValue = _a.autoInitDefaultValue;
+        var value = date.clone();
+        var _b = this.props, transform = _b.transform, data = _b.data;
+        var _c = this.state, startDate = _c.startDate, endDate = _c.endDate;
+        /** 此时为点选后的值初始化设置，不应该被内部转化逻辑和transformFn限制 */
+        if (autoInitDefaultValue === true) {
+            var now_1 = moment();
+            /** 如果已经设置了结束时间且当前时间已经超出了结束时间，则开始时间不能超过结束时间 */
+            if (!startDate && endDate && type === 'start' && now_1.isAfter(endDate)) {
+                value = endDate.clone();
+                return value;
+            }
+            var timePart_1 = {
+                date: value.get('date'),
+                hour: value.get('hour'),
+                minute: value.get('minute'),
+                second: value.get('second'),
+                millisecond: value.get('millisecond')
+            };
+            Object.keys(timePart_1).forEach(function (unit) {
+                /** 首次选择时间，日期使用当前时间; 将未设置过的时间字段设置为当前值 */
+                if ((unit === 'date' && subControlViewMode === 'time') ||
+                    (unit !== 'date' && timePart_1[unit] === 0)) {
+                    timePart_1[unit] = now_1.get(unit);
+                }
+            });
+            value.set(timePart_1);
+            return value;
+        }
+        /** 日期时间选择器组件支持用户选择时间，如果用户手动选择了时间，则不需要走默认处理 */
+        if (subControlViewMode && subControlViewMode === 'time') {
+            return value;
+        }
+        var transformFn = transform && typeof transform === 'string'
+            ? str2function(transform, 'value', 'config', 'props', 'data', 'moment')
+            : transform;
+        // 没有初始值
+        if (!originValue) {
+            value = value[type === 'start' ? 'startOf' : 'endOf']('day');
+        }
+        else if (typeof timeFormat === 'string' && /ss/.test(timeFormat)) {
+            value = value[type === 'start' ? 'startOf' : 'endOf']('second');
+        }
+        else if (typeof timeFormat === 'string' && /mm/.test(timeFormat)) {
+            value = value[type === 'start' ? 'startOf' : 'endOf']('minute');
+        }
+        else if (typeof timeFormat === 'string' && /HH/i.test(timeFormat)) {
+            value = value[type === 'start' ? 'startOf' : 'endOf']('hour');
+        }
+        else if (typeof timeFormat === 'string' && /Q/i.test(timeFormat)) {
+            value = value[type === 'start' ? 'startOf' : 'endOf']('quarter');
+        }
+        else {
+            value = value[type === 'start' ? 'startOf' : 'endOf']('day');
+        }
+        if (typeof transformFn === 'function') {
+            value = transformFn(value, { type: type, originValue: originValue, timeFormat: timeFormat }, this.props, data, moment);
+        }
+        return value;
+    };
+    DateRangePicker.prototype.handleDateChange = function (newValue, viewMode, status) {
+        var embed = this.props.embed;
+        var editState = embed
+            ? this.state.editState || status
+            : this.state.editState;
+        if (editState === 'start') {
+            this.handleStartDateChange(newValue);
+        }
+        else if (editState === 'end') {
+            this.handelEndDateChange(newValue);
+        }
+    };
+    /**
+     * @param {Moment} newValue 当前选择的日期时间值
+     * @param {ViewMode=} subControlViewMode 子选择控件的类型，可选参数（'time'），用于区分datetime选择器的触发控件
+     */
+    DateRangePicker.prototype.handleStartDateChange = function (newValue, subControlViewMode) {
+        var _a = this.props, minDate = _a.minDate, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, type = _a.type; _a.value;
+        var _b = this.state, startDate = _b.startDate; _b.oldStartDate; var endDateOpenedFirst = _b.endDateOpenedFirst, timeFormat = _b.curTimeFormat;
+        if (minDate && newValue.isBefore(minDate)) {
+            newValue = minDate;
+        }
+        var date = this.filterDate(newValue, {
+            type: 'start',
+            originValue: startDate || minDate,
+            timeFormat: timeFormat,
+            subControlViewMode: subControlViewMode,
+            autoInitDefaultValue: !!timeFormat && newValue && !startDate
+        });
+        var newState = {
+            startDate: date,
+            startInputValue: date.format(displayFormat || inputFormat)
+        };
+        // 这些没有时间的选择点第一次后第二次就是选结束时间
+        if (!endDateOpenedFirst &&
+            (type === 'input-date-range' ||
+                type === 'input-year-range' ||
+                type === 'input-quarter-range' ||
+                type === 'input-month-range')) {
+            newState.editState = 'end';
+        }
+        this.setState(newState);
+    };
+    /**
+     * @param {Moment} newValue 当前选择的日期时间值
+     * @param {string=} subControlViewMode 子选择控件的类型的类型，可选参数（'time'），用于区分datetime选择器的触发控件
+     */
+    DateRangePicker.prototype.handelEndDateChange = function (newValue, subControlViewMode) {
+        var _this = this;
+        var _a = this.props, embed = _a.embed, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, type = _a.type; _a.value;
+        var _b = this.state; _b.startDate; var endDate = _b.endDate; _b.oldEndDate; var endDateOpenedFirst = _b.endDateOpenedFirst, timeFormat = _b.curTimeFormat;
+        newValue = this.getEndDateByDuration(newValue);
+        var editState = endDateOpenedFirst ? 'start' : 'end';
+        var date = this.filterDate(newValue, {
+            type: 'end',
+            originValue: endDate,
+            timeFormat: timeFormat,
+            subControlViewMode: subControlViewMode,
+            autoInitDefaultValue: !!timeFormat && newValue && !endDate
+        });
+        this.setState({
+            endDate: date,
+            endInputValue: date.format(displayFormat || inputFormat)
+        }, function () {
+            embed && _this.confirm();
+        });
+        if (type !== 'input-datetime-range') {
+            this.setState({ editState: editState });
+        }
+    };
+    // 手动控制输入时间
+    DateRangePicker.prototype.startInputChange = function (e) {
+        var _a = this.props, onChange = _a.onChange, displayFormat = _a.displayFormat, inputFormat = _a.inputFormat; _a.utc;
+        var value = e.currentTarget.value;
+        this.setState({ startInputValue: value });
+        if (value === '') {
+            onChange('');
+        }
+        else {
+            var newDate = this.getStartDateByDuration(moment(value, displayFormat || inputFormat));
+            this.setState({ startDate: newDate });
+        }
+    };
+    DateRangePicker.prototype.endInputChange = function (e) {
+        var _a = this.props, onChange = _a.onChange, displayFormat = _a.displayFormat, inputFormat = _a.inputFormat; _a.utc;
+        var value = e.currentTarget.value;
+        this.setState({ endInputValue: value });
+        if (value === '') {
+            onChange('');
+        }
+        else {
+            var newDate = this.getEndDateByDuration(moment(value, displayFormat || inputFormat));
+            this.setState({ endDate: newDate });
+        }
+    };
+    // 根据 duration 修复结束时间
+    DateRangePicker.prototype.getEndDateByDuration = function (newValue) {
+        var _a = this.props, minDuration = _a.minDuration, maxDuration = _a.maxDuration, type = _a.type, maxDate = _a.maxDate;
+        var _b = this.state, startDate = _b.startDate; _b.endDate; _b.editState;
+        if (!startDate) {
+            return newValue;
+        }
+        // 时间范围必须统一成同一天，不然会不一致
+        if (type === 'input-time-range' && startDate) {
+            newValue.set({
+                year: startDate.year(),
+                month: startDate.month(),
+                date: startDate.date()
+            });
+        }
+        if (minDuration && newValue.isBefore(startDate.clone().add(minDuration))) {
+            newValue = startDate.clone().add(minDuration);
+        }
+        if (maxDuration && newValue.isAfter(startDate.clone().add(maxDuration))) {
+            newValue = startDate.clone().add(maxDuration);
+        }
+        if (maxDate && newValue && newValue.isAfter(maxDate, 'second')) {
+            newValue = maxDate;
+        }
+        return newValue;
+    };
+    // 根据 duration 修复起始时间
+    DateRangePicker.prototype.getStartDateByDuration = function (newValue) {
+        var _a = this.props, minDuration = _a.minDuration, maxDuration = _a.maxDuration, type = _a.type;
+        var _b = this.state, endDate = _b.endDate; _b.editState;
+        if (!endDate) {
+            return newValue;
+        }
+        // 时间范围必须统一成同一天，不然会不一致
+        if (type === 'input-time-range' && endDate) {
+            newValue.set({
+                year: endDate.year(),
+                month: endDate.month(),
+                date: endDate.date()
+            });
+        }
+        if (minDuration &&
+            newValue.isBefore(endDate.clone().subtract(minDuration))) {
+            newValue = endDate.clone().subtract(minDuration);
+        }
+        if (maxDuration &&
+            newValue.isAfter(endDate.clone().subtract(maxDuration))) {
+            newValue = endDate.clone().subtract(maxDuration);
+        }
+        return newValue;
+    };
+    // 主要用于处理时间的情况
+    DateRangePicker.prototype.handleTimeStartChange = function (newValue) {
+        var _this = this;
+        var _a = this.props, embed = _a.embed, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat; _a.minDuration; _a.maxDuration; var minDate = _a.minDate;
+        var _b = this.state; _b.startDate; var endDate = _b.endDate;
+        // 时间范围必须统一成同一天，不然会不一致
+        if (endDate) {
+            newValue.set({
+                year: endDate.year(),
+                month: endDate.month(),
+                date: endDate.date()
+            });
+        }
+        if (minDate && newValue && newValue.isBefore(minDate, 'second')) {
+            newValue = minDate;
+        }
+        this.setState({
+            startDate: newValue,
+            startInputValue: newValue.format(displayFormat || inputFormat)
+        }, function () {
+            embed && _this.confirm();
+        });
+    };
+    DateRangePicker.prototype.handleTimeEndChange = function (newValue) {
+        var _this = this;
+        var _a = this.props, embed = _a.embed, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, minDuration = _a.minDuration, maxDuration = _a.maxDuration, maxDate = _a.maxDate;
+        var _b = this.state, startDate = _b.startDate; _b.endDate;
+        if (startDate) {
+            newValue.set({
+                year: startDate.year(),
+                month: startDate.month(),
+                date: startDate.date()
+            });
+        }
+        if (maxDate && newValue && newValue.isAfter(maxDate, 'second')) {
+            newValue = maxDate;
+        }
+        if (startDate &&
+            minDuration &&
+            newValue.isBefore(startDate.clone().add(minDuration))) {
+            newValue = startDate.clone().add(minDuration);
+        }
+        if (startDate &&
+            maxDuration &&
+            newValue.isAfter(startDate.clone().add(maxDuration))) {
+            newValue = startDate.clone().add(maxDuration);
+        }
+        this.setState({
+            endDate: newValue,
+            endInputValue: newValue.format(displayFormat || inputFormat)
+        }, function () {
+            embed && _this.confirm();
+        });
+    };
+    DateRangePicker.prototype.handleMobileChange = function (data, callback) {
+        this.setState({
+            startDate: data.startDate,
+            endDate: data.endDate
+        }, callback);
+    };
+    DateRangePicker.prototype.selectShortcut = function (shortcut) {
+        var _a = this.props, closeOnSelect = _a.closeOnSelect, minDateRaw = _a.minDateRaw, maxDateRaw = _a.maxDateRaw, format = _a.format, valueFormat = _a.valueFormat, data = _a.data, mobileUI = _a.mobileUI;
+        var now = moment();
+        /** minDate和maxDate要实时计算，因为用户可能设置为${NOW()}，暂时不考虑毫秒级的时间差 */
+        var minDate = minDateRaw
+            ? filterDate(minDateRaw, data, valueFormat || format)
+            : undefined;
+        var maxDate = maxDateRaw
+            ? filterDate(maxDateRaw, data, valueFormat || format)
+            : undefined;
+        var startDate = shortcut.startDate(now.clone());
+        var endDate = shortcut.endDate(now.clone());
+        this.setState({
+            startDate: minDate && (minDate === null || minDate === void 0 ? void 0 : minDate.isValid())
+                ? moment.max(startDate, minDate)
+                : startDate,
+            endDate: maxDate && (maxDate === null || maxDate === void 0 ? void 0 : maxDate.isValid()) ? moment.min(maxDate, endDate) : endDate
+        }, closeOnSelect && !mobileUI ? this.confirm : noop);
+    };
+    DateRangePicker.prototype.renderShortcuts = function (shortcuts) {
+        var _this = this;
+        if (!shortcuts) {
+            return null;
+        }
+        var _a = this.props, ns = _a.classPrefix, format = _a.format, valueFormat = _a.valueFormat, data = _a.data, __ = _a.translate, testIdBuilder = _a.testIdBuilder;
+        var shortcutArr;
+        if (typeof shortcuts === 'string') {
+            shortcutArr = shortcuts.split(',');
+        }
+        else {
+            shortcutArr = shortcuts;
+        }
+        var TIDBuilder = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('shortcut');
+        return (React__default.createElement("ul", { className: "".concat(ns, "DateRangePicker-rangers") }, shortcutArr.map(function (item, index) {
+            if (!item) {
+                return null;
+            }
+            var shortcut = {};
+            if (typeof item === 'string') {
+                if (availableShortcuts[item]) {
+                    shortcut = availableShortcuts[item];
+                    shortcut.key = item;
+                }
+                else {
+                    // 通过正则尝试匹配
+                    for (var i = 0, len = advancedRanges.length; i < len; i++) {
+                        var value = advancedRanges[i];
+                        var m = value.regexp.exec(item);
+                        if (m) {
+                            shortcut = value.resolve.apply(item, __spreadArray([__], __read(m), false));
+                            shortcut.key = item;
+                        }
+                    }
+                }
+            }
+            else if (item.startDate &&
+                item.endDate) {
+                var shortcutRaw_1 = __assign({}, item);
+                shortcut = __assign(__assign({}, item), { startDate: function () {
+                        var startDate = isExpression(shortcutRaw_1.startDate)
+                            ? moment(FormulaExec['formula'](shortcutRaw_1.startDate, data), valueFormat || format)
+                            : typeof shortcutRaw_1.startDate === 'string'
+                                ? moment(shortcutRaw_1.startDate, valueFormat || format)
+                                : shortcutRaw_1.startDate;
+                        return startDate &&
+                            moment.isMoment(startDate) &&
+                            startDate.isValid()
+                            ? startDate
+                            : item.startDate;
+                    }, endDate: function () {
+                        var endDate = isExpression(shortcutRaw_1.endDate)
+                            ? moment(FormulaExec['formula'](shortcutRaw_1.endDate, data), valueFormat || format)
+                            : typeof shortcutRaw_1.endDate === 'string'
+                                ? moment(shortcutRaw_1.endDate, valueFormat || format)
+                                : shortcutRaw_1.endDate;
+                        return endDate && moment.isMoment(endDate) && endDate.isValid()
+                            ? endDate
+                            : item.endDate;
+                    } });
+            }
+            if (Object.keys(shortcut).length) {
+                return (React__default.createElement("li", { className: "".concat(ns, "DateRangePicker-ranger"), onClick: function () { return _this.selectShortcut(shortcut); }, key: index },
+                    React__default.createElement("a", __assign({}, TIDBuilder === null || TIDBuilder === void 0 ? void 0 : TIDBuilder.getChild(shortcut.key).getTestId()), __(shortcut.label))));
+            }
+            else {
+                return null;
+            }
+        })));
+    };
+    DateRangePicker.prototype.clearValue = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var onChange = this.props.onChange;
+        this.setState({ startInputValue: '', endInputValue: '' });
+        onChange('');
+    };
+    // 清空
+    DateRangePicker.prototype.clear = function () {
+        var onChange = this.props.onChange;
+        this.setState({ startInputValue: '', endInputValue: '' });
+        onChange('');
+    };
+    // 重置
+    DateRangePicker.prototype.reset = function (resetValue) {
+        var _a = this.props, onChange = _a.onChange, format = _a.format, valueFormat = _a.valueFormat, joinValues = _a.joinValues, delimiter = _a.delimiter, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, data = _a.data, utc = _a.utc;
+        var tmpResetValue = resetValue !== null && resetValue !== void 0 ? resetValue : this.props.resetValue;
+        var _b = DateRangePicker.unFormatValue(tmpResetValue, valueFormat || format, joinValues, delimiter, data, utc), startDate = _b.startDate, endDate = _b.endDate;
+        onChange === null || onChange === void 0 ? void 0 : onChange(tmpResetValue);
+        this.setState({
+            startInputValue: startDate === null || startDate === void 0 ? void 0 : startDate.format(displayFormat || inputFormat),
+            endInputValue: endDate === null || endDate === void 0 ? void 0 : endDate.format(displayFormat || inputFormat)
+        });
+    };
+    DateRangePicker.prototype.checkStartIsValidDate = function (currentDate) {
+        var _a = this.state, endDate = _a.endDate; _a.startDate;
+        var _b = this.props, minDate = _b.minDate, maxDate = _b.maxDate, minDuration = _b.minDuration, maxDuration = _b.maxDuration, viewMode = _b.viewMode;
+        var precision = viewMode === 'time' ? 'hours' : viewMode || 'day';
+        maxDate =
+            maxDate && endDate
+                ? maxDate.isBefore(endDate)
+                    ? maxDate
+                    : endDate
+                : maxDate || endDate;
+        if (minDate && currentDate.isBefore(minDate, precision)) {
+            return false;
+        }
+        else if (maxDate && currentDate.isAfter(maxDate, precision)) {
+            return false;
+        }
+        else if (
+        // 如果配置了 minDuration 那么 EndDate - minDuration 之后的天数也不能选
+        endDate &&
+            minDuration &&
+            currentDate.isAfter(endDate.clone().subtract(minDuration))) {
+            return false;
+        }
+        else if (endDate &&
+            maxDuration &&
+            currentDate.isBefore(endDate.clone().subtract(maxDuration))) {
+            return false;
+        }
+        return true;
+    };
+    DateRangePicker.prototype.checkEndIsValidDate = function (currentDate) {
+        var startDate = this.state.startDate;
+        var _a = this.props, minDate = _a.minDate, maxDate = _a.maxDate, minDuration = _a.minDuration, maxDuration = _a.maxDuration, viewMode = _a.viewMode;
+        var precision = viewMode === 'time' ? 'hours' : viewMode || 'day';
+        minDate =
+            minDate && startDate
+                ? minDate.isAfter(startDate)
+                    ? minDate
+                    : startDate
+                : minDate || startDate;
+        // 在 dateTimeRange 的场景下，如果选择了开始时间的时间点不为 0，比如 2020-10-1 10:10，这时 currentDate 传入的当天值是 2020-10-1 00:00，这个值在起始时间后面，导致没法再选这一天了，所以在这时需要先通过将时间都转成 00 再比较
+        if (minDate &&
+            currentDate
+                .startOf('day')
+                .isBefore(minDate.clone().startOf('day'), precision)) {
+            return false;
+        }
+        else if (maxDate && currentDate.isAfter(maxDate, precision)) {
+            return false;
+        }
+        else if (startDate &&
+            minDuration &&
+            currentDate.isBefore(startDate.clone().add(minDuration))) {
+            return false;
+        }
+        else if (startDate &&
+            maxDuration &&
+            currentDate.isAfter(startDate.clone().add(maxDuration))) {
+            return false;
+        }
+        return true;
+    };
+    DateRangePicker.prototype.renderDay = function (props, currentDate) {
+        var _a;
+        var _b = this.state, startDate = _b.startDate, endDate = _b.endDate;
+        var testIdBuilder = this.props.testIdBuilder;
+        if (startDate &&
+            endDate &&
+            currentDate.isBetween(startDate, endDate, 'day', '[]')) {
+            props.className += ' rdtBetween';
+        }
+        // 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
+        if (startDate && endDate && props.className.includes('rdtActive')) {
+            props.className = props.className.replace('rdtActive', '');
+        }
+        if (startDate && currentDate.isSame(startDate, 'day')) {
+            props.className += ' rdtActive rdtStart';
+        }
+        if (endDate && currentDate.isSame(endDate, 'day')) {
+            props.className += ' rdtActive rdtEnd';
+        }
+        var _c = this.getDisabledElementProps(currentDate, 'day'), className = _c.className, others = __rest(_c, ["className"]);
+        props.className += className;
+        return (React__default.createElement("td", __assign({}, omit(props, ['todayActiveStyle']), others),
+            React__default.createElement("span", __assign({}, (_a = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild(props.key)) === null || _a === void 0 ? void 0 : _a.getTestId()), currentDate.date())));
+    };
+    DateRangePicker.prototype.renderMonth = function (props, month, year, date) {
+        var currentDate = props.viewDate.year(year).month(month);
+        var _a = this.state, startDate = _a.startDate, endDate = _a.endDate;
+        var _b = this.props, __ = _b.translate, testIdBuilder = _b.testIdBuilder;
+        var monthStr = currentDate.format(__('MMM'));
+        var strLength = 3;
+        // Because some months are up to 5 characters long, we want to
+        // use a fixed string length for consistency
+        var monthStrFixedLength = monthStr.substring(0, strLength);
+        if (startDate &&
+            endDate &&
+            currentDate.isBetween(startDate, endDate, 'month', '[]')) {
+            props.className += ' rdtBetween';
+        }
+        // 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
+        if (startDate && endDate && props.className.includes('rdtActive')) {
+            props.className = props.className.replace('rdtActive', '');
+        }
+        if (startDate && currentDate.isSame(startDate, 'month')) {
+            props.className += ' rdtActive rdtStart';
+        }
+        if (endDate && currentDate.isSame(endDate, 'month')) {
+            props.className += ' rdtActive rdtEnd';
+        }
+        var _c = this.getDisabledElementProps(currentDate, 'month'), className = _c.className, others = __rest(_c, ["className"]);
+        props.className += className;
+        return (React__default.createElement("td", __assign({}, omit(props, 'viewDate'), others),
+            React__default.createElement("span", __assign({}, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild(props.key).getTestId()), monthStrFixedLength)));
+    };
+    DateRangePicker.prototype.renderQuarter = function (props, quarter, year) {
+        var currentDate = moment().year(year).quarter(quarter);
+        var _a = this.state, startDate = _a.startDate, endDate = _a.endDate;
+        var testIdBuilder = this.props.testIdBuilder;
+        if (startDate &&
+            endDate &&
+            currentDate.isBetween(startDate, endDate, 'quarter', '[]')) {
+            props.className += ' rdtBetween';
+        }
+        // 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
+        if (startDate && endDate && props.className.includes('rdtActive')) {
+            props.className = props.className.replace('rdtActive', '');
+        }
+        if (startDate && currentDate.isSame(startDate, 'quarter')) {
+            props.className += ' rdtActive rdtStart';
+        }
+        if (endDate && currentDate.isSame(endDate, 'quarter')) {
+            props.className += ' rdtActive rdtEnd';
+        }
+        var _b = this.getDisabledElementProps(currentDate, 'quarter'), className = _b.className, others = __rest(_b, ["className"]);
+        props.className += className;
+        return (React__default.createElement("td", __assign({}, props, others),
+            React__default.createElement("span", __assign({}, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild(props.key).getTestId()),
+                "Q",
+                quarter)));
+    };
+    DateRangePicker.prototype.renderYear = function (props, year) {
+        var currentDate = moment().year(year);
+        var _a = this.state, startDate = _a.startDate, endDate = _a.endDate;
+        var testIdBuilder = this.props.testIdBuilder;
+        if (startDate &&
+            endDate &&
+            currentDate.isBetween(startDate, endDate, 'year', '[]')) {
+            props.className += ' rdtBetween';
+        }
+        // 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
+        if (startDate && endDate && props.className.includes('rdtActive')) {
+            props.className = props.className.replace('rdtActive', '');
+        }
+        if (startDate && currentDate.isSame(startDate, 'year')) {
+            props.className += ' rdtActive rdtStart';
+        }
+        if (endDate && currentDate.isSame(endDate, 'year')) {
+            props.className += ' rdtActive rdtEnd';
+        }
+        var _b = this.getDisabledElementProps(currentDate, 'year'), className = _b.className, others = __rest(_b, ["className"]);
+        props.className += className;
+        return (React__default.createElement("td", __assign({}, props, others),
+            React__default.createElement("span", __assign({}, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild(props.key).getTestId()), year)));
+    };
+    DateRangePicker.prototype.renderCalendar = function () {
+        var _this = this;
+        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, ranges = _a.ranges, shortcuts = _a.shortcuts, locale = _a.locale, embed = _a.embed, type = _a.type, _b = _a.viewMode, viewMode = _b === void 0 ? 'days' : _b, label = _a.label, mobileUI = _a.mobileUI, testIdBuilder = _a.testIdBuilder;
+        var __ = this.props.translate;
+        var _c = this.state, startDate = _c.startDate, endDate = _c.endDate, editState = _c.editState, curDateFormat = _c.curDateFormat, curTimeFormat = _c.curTimeFormat;
+        var isDateTimeRange = type === 'input-datetime-range';
+        var isDateRange = type === 'input-date-range';
+        // timeRange需要单独选择范围
+        var isTimeRange = isDateTimeRange || viewMode === 'time';
+        var isConfirmBtnDisbaled = (isTimeRange && editState === 'start' && !startDate) ||
+            (isTimeRange && editState === 'end' && !endDate) ||
+            (startDate && (endDate === null || endDate === void 0 ? void 0 : endDate.isBefore(this.state.startDate))) ||
+            /** 日期范围选择之后会立即切换面板，所以开始/结束日期任意一个不合法就不允许更新数据 */
+            (isDateRange &&
+                (!startDate ||
+                    !endDate ||
+                    !(startDate === null || startDate === void 0 ? void 0 : startDate.isValid()) ||
+                    !(endDate === null || endDate === void 0 ? void 0 : endDate.isValid())));
+        return (React__default.createElement("div", { className: cx("".concat(ns, "DateRangePicker-wrap"), { 'is-mobile': mobileUI }), ref: this.calendarRef },
+            mobileUI && !embed ? (React__default.createElement("div", { className: cx('PickerColumns-header') },
+                React__default.createElement(Button, { className: "PickerColumns-cancel", level: "link", onClick: function () { return _this.close(false); } }, __('cancel')),
+                label && typeof label === 'string'
+                    ? label
+                    : __('Calendar.datepicker'),
+                React__default.createElement(Button, { className: "PickerColumns-confirm", level: "link", disabled: isConfirmBtnDisbaled || !startDate || !endDate, onClick: this.confirm }, __('confirm')))) : null,
+            this.renderShortcuts(ranges || shortcuts),
+            React__default.createElement("div", { className: cx("".concat(ns, "DateRangePicker-picker-wrap"), {
+                    'is-vertical': embed
+                }) },
+                (!isTimeRange ||
+                    (editState === 'start' && !embed) ||
+                    (mobileUI && isTimeRange)) && (React__default.createElement(Calendar, { className: "".concat(ns, "DateRangePicker-start"), value: startDate, 
+                    // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
+                    // TODO: 后续得把 time-range 代码拆分出来
+                    onChange: isDateTimeRange
+                        ? this.handleStartDateChange
+                        : viewMode === 'time'
+                            ? this.handleTimeStartChange
+                            : this.handleDateChange, requiredConfirm: false, dateFormat: curDateFormat, displayForamt: displayFormat || inputFormat, timeFormat: curTimeFormat, isValidDate: this.checkStartIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderMonth: this.renderMonth, renderQuarter: this.renderQuarter, renderYear: this.renderYear, locale: locale, timeRangeHeader: "\u5F00\u59CB\u65F6\u95F4", embed: embed, status: "start", testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('calendar-start') })),
+                (!isTimeRange ||
+                    (editState === 'end' && !embed) ||
+                    (mobileUI && isTimeRange)) && (React__default.createElement(Calendar, { className: "".concat(ns, "DateRangePicker-end"), value: endDate, onChange: isDateTimeRange
+                        ? this.handelEndDateChange
+                        : viewMode === 'time'
+                            ? this.handleTimeEndChange
+                            : this.handleDateChange, requiredConfirm: false, dateFormat: curDateFormat, displayForamt: displayFormat || inputFormat, timeFormat: curTimeFormat, viewDate: isDateTimeRange ? this.currentMonth : this.nextMonth, 
+                    // isEndDate
+                    isValidDate: this.checkEndIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderMonth: this.renderMonth, renderQuarter: this.renderQuarter, renderYear: this.renderYear, locale: locale, timeRangeHeader: "\u7ED3\u675F\u65F6\u95F4", embed: embed, status: "end", testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('calendar-end') }))),
+            embed || mobileUI ? null : (React__default.createElement("div", { key: "button", className: "".concat(ns, "DateRangePicker-actions") },
+                React__default.createElement(Button, { size: "sm", onClick: function () { return _this.close(); } }, __('cancel')),
+                React__default.createElement(Button, { level: "primary", size: "sm", className: cx('m-l-sm'), disabled: isConfirmBtnDisbaled, onClick: this.confirm }, __('confirm'))))));
+    };
+    DateRangePicker.prototype.getDisabledElementProps = function (currentDate, granularity) {
+        var _a = this.state; _a.endDateOpenedFirst; var endDate = _a.endDate, startDate = _a.startDate, editState = _a.editState;
+        var afterEndDate = editState === 'start' &&
+            endDate &&
+            currentDate.isAfter(endDate, granularity);
+        var beforeStartDate = editState === 'end' &&
+            startDate &&
+            !currentDate.isSameOrAfter(startDate, granularity);
+        if (afterEndDate || beforeStartDate) {
+            return {
+                className: ' is-disabled',
+                onClick: undefined
+            };
+        }
+        return {
+            className: ''
+        };
+    };
+    /** 获取宽度类型变量的值 */
+    DateRangePicker.prototype.getValidWidthValue = function (element, propsName) {
+        if (!element || !propsName) {
+            return 0;
+        }
+        var propsValue = parseInt(getComputedStyle(element, kebabCase(propsName)), 10);
+        return isNaN(propsValue) ? 0 : propsValue;
+    };
+    DateRangePicker.prototype.renderActiveCursor = function () {
+        var _a, _b, _c, _d;
+        var cx = this.props.classnames;
+        var _e = this.state, editState = _e.editState, isFocused = _e.isFocused;
+        var cursorWidth = 0;
+        var cursorLeft = 0;
+        var parentNode = (_a = this === null || this === void 0 ? void 0 : this.dom) === null || _a === void 0 ? void 0 : _a.current;
+        var startInputNode = (_b = this === null || this === void 0 ? void 0 : this.startInputRef) === null || _b === void 0 ? void 0 : _b.current;
+        var endInputNode = (_c = this === null || this === void 0 ? void 0 : this.endInputRef) === null || _c === void 0 ? void 0 : _c.current;
+        var separatorNode = (_d = this === null || this === void 0 ? void 0 : this.separatorRef) === null || _d === void 0 ? void 0 : _d.current;
+        if (parentNode && startInputNode && endInputNode && separatorNode) {
+            if (editState === 'start') {
+                var paddingWidth = this.getValidWidthValue(parentNode, 'paddingLeft');
+                cursorLeft = paddingWidth;
+                cursorWidth = startInputNode.offsetWidth;
+            }
+            else if (editState === 'end') {
+                var separatorWidth = separatorNode.offsetWidth +
+                    this.getValidWidthValue(parentNode, 'paddingLeft') +
+                    this.getValidWidthValue(parentNode, 'marginLeft') +
+                    this.getValidWidthValue(parentNode, 'paddingRight') +
+                    this.getValidWidthValue(parentNode, 'marginRight');
+                cursorLeft = startInputNode.offsetWidth + separatorWidth;
+                cursorWidth = endInputNode.offsetWidth;
+            }
+            else {
+                cursorWidth = 0;
+            }
+        }
+        return (React__default.createElement("div", { className: cx('DateRangePicker-activeCursor', { isFocused: isFocused }), style: {
+                position: 'absolute',
+                left: cursorLeft,
+                width: cursorWidth
+            } }));
+    };
+    DateRangePicker.prototype.getDefaultDate = function () {
+        var _a;
+        var _b = this.props, value = _b.value, data = _b.data, valueFormat = _b.valueFormat, format = _b.format, delimiter = _b.delimiter;
+        if (value) {
+            var startDate = filterDate(Array.isArray(value)
+                ? value[0] || value[1]
+                : (_a = String(value).split(delimiter)) === null || _a === void 0 ? void 0 : _a[0], data, valueFormat || format);
+            return startDate;
+        }
+        return undefined;
+    };
+    DateRangePicker.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var _b = this.props, className = _b.className, popoverClassName = _b.popoverClassName, ns = _b.classPrefix, cx = _b.classnames, value = _b.value, startPlaceholder = _b.startPlaceholder, endPlaceholder = _b.endPlaceholder, popOverContainer = _b.popOverContainer, popOverContainerSelector = _b.popOverContainerSelector, inputFormat = _b.inputFormat, displayFormat = _b.displayFormat; _b.joinValues; _b.delimiter; var clearable = _b.clearable, inputForbid = _b.inputForbid, disabled = _b.disabled, embed = _b.embed, overlayPlacement = _b.overlayPlacement, borderMode = _b.borderMode, mobileUI = _b.mobileUI; _b.timeFormat; var minDate = _b.minDate, maxDate = _b.maxDate, minDuration = _b.minDuration, maxDuration = _b.maxDuration; _b.dateFormat; var _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c, ranges = _b.ranges, shortcuts = _b.shortcuts, label = _b.label, animation = _b.animation, testIdBuilder = _b.testIdBuilder, locale = _b.locale;
+        var useCalendarMobile = mobileUI && ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
+        var _d = this.state, isOpened = _d.isOpened, isFocused = _d.isFocused, startDate = _d.startDate, endDate = _d.endDate, curDateFormat = _d.curDateFormat, curTimeFormat = _d.curTimeFormat;
+        var __ = this.props.translate;
+        var calendarMobile = (React__default.createElement(CalendarMobile, { popOverContainer: popOverContainer, timeFormat: curTimeFormat, displayForamt: displayFormat || inputFormat, defaultDate: this.getDefaultDate(), startDate: startDate, endDate: endDate, minDate: minDate, maxDate: maxDate, minDuration: minDuration, maxDuration: maxDuration, dateFormat: curDateFormat, embed: embed, viewMode: viewMode, close: this.close, confirm: this.confirm, onChange: this.handleMobileChange, footerExtra: this.renderShortcuts(ranges || shortcuts), locale: locale, showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months' }));
+        if (embed) {
+            return (React__default.createElement("div", { className: cx("".concat(ns, "DateRangeCalendar"), {
+                    'is-mobile': mobileUI
+                }, {
+                    'is-disabled': disabled
+                }, className) }, useCalendarMobile ? calendarMobile : this.renderCalendar()));
+        }
+        var CalendarMobileTitle = (React__default.createElement("div", { className: "".concat(ns, "CalendarMobile-title") }, label && typeof label === 'string' ? label : __('Calendar.datepicker')));
+        /** 是否启用游标动画 */
+        var useAnimation = animation !== false;
+        return (React__default.createElement("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: cx("".concat(ns, "DateRangePicker"), (_a = {
+                    'is-disabled': disabled,
+                    'is-focused': isFocused
+                },
+                _a["".concat(ns, "DateRangePicker--border").concat(ucFirst(borderMode))] = borderMode,
+                _a['is-mobile'] = mobileUI,
+                _a), className), ref: this.dom },
+            React__default.createElement(Input, { className: cx('DateRangePicker-input', {
+                    isActive: !useAnimation && this.state.editState === 'start' && isOpened
+                }), onChange: this.startInputChange, onClick: this.openStart, ref: this.startInputRef, placeholder: __(startPlaceholder), autoComplete: "off", value: this.state.startInputValue || '', disabled: disabled, readOnly: mobileUI || inputForbid, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('start') }),
+            React__default.createElement("span", { className: cx('DateRangePicker-input-separator'), ref: this.separatorRef },
+                React__default.createElement("span", { className: cx('DateRangePicker-input-separator-line') })),
+            React__default.createElement(Input, { className: cx('DateRangePicker-input', {
+                    isActive: !useAnimation && this.state.editState === 'end' && isOpened
+                }), onChange: this.endInputChange, onClick: this.openEnd, ref: this.endInputRef, placeholder: __(endPlaceholder), autoComplete: "off", value: this.state.endInputValue || '', disabled: disabled, readOnly: mobileUI || inputForbid, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('end') }),
+            useAnimation ? this.renderActiveCursor() : null,
+            clearable && !disabled && value ? (React__default.createElement("a", { className: "".concat(ns, "DateRangePicker-clear"), onClick: this.clearValue },
+                React__default.createElement(Icon, { icon: "input-clear", className: "icon" }))) : null,
+            React__default.createElement("a", { className: cx("DateRangePicker-toggler") },
+                React__default.createElement(Icon, { icon: viewMode === 'time' ? 'clock' : 'date', className: "icon", iconContent: viewMode === 'time'
+                        ? 'DatePicker-toggler-clock'
+                        : 'DatePicker-toggler-date' })),
+            isOpened ? (mobileUI ? (React__default.createElement(PopUp, { isShow: isOpened, container: popOverContainer, className: cx("".concat(ns, "CalendarMobile-pop"), "".concat(ns, "CalendarMobile-pop--").concat(viewMode)), onHide: this.close, header: CalendarMobileTitle, showClose: false }, useCalendarMobile ? calendarMobile : this.renderCalendar())) : (React__default.createElement(Overlay, { target: function () { return _this.dom.current; }, onHide: this.close, container: popOverContainer || (function () { return findDOMNode(_this); }), containerSelector: popOverContainerSelector, rootClose: false, placement: overlayPlacement, show: true },
+                React__default.createElement(PopOver, { classPrefix: ns, className: cx("".concat(ns, "DateRangePicker-popover"), popoverClassName), onHide: this.close, onClick: this.handlePopOverClick }, this.renderCalendar())))) : null));
+    };
+    DateRangePicker.defaultProps = {
+        startPlaceholder: 'Calendar.startPick',
+        endPlaceholder: 'Calendar.endPick',
+        format: 'X',
+        inputFormat: 'YYYY-MM-DD',
+        joinValues: true,
+        clearable: true,
+        delimiter: ',',
+        ranges: '',
+        shortcuts: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
+        resetValue: '',
+        closeOnSelect: true,
+        overlayPlacement: 'auto',
+        endDateOpenedFirst: false
+    };
+    return DateRangePicker;
+}(React__default.Component));
+var DateRangePicker$1 = themeable(localeable(DateRangePicker));
+
+export { DateRangePicker, advancedRanges, availableShortcuts, DateRangePicker$1 as default };