amis 1.7.0 → 1.8.0-beta.13

package/lib/components/DateRangePicker.js

@@ -5,12 +5,11 @@
  * @author fex
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateRangePicker = exports.availableRanges = void 0;
+exports.DateRangePicker = exports.advancedRanges = exports.availableRanges = void 0;
 var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
 var react_dom_1 = require("react-dom");
-var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
 var icons_1 = require("./icons");
 var Overlay_1 = (0, tslib_1.__importDefault)(require("./Overlay"));
 var Calendar_1 = (0, tslib_1.__importDefault)(require("./calendar/Calendar"));
@@ -20,6 +19,7 @@ var theme_1 = require("../theme");
 var helper_1 = require("../utils/helper");
 var locale_1 = require("../locale");
 var CalendarMobile_1 = (0, tslib_1.__importDefault)(require("./CalendarMobile"));
+var Input_1 = (0, tslib_1.__importDefault)(require("./Input"));
 exports.availableRanges = {
     'today': {
         label: 'Date.today',
@@ -39,8 +39,18 @@ exports.availableRanges = {
             return now.add(-1, 'days').endOf('day');
         }
     },
-    '1dayago': {
-        label: 'DateRange.1dayago',
+    '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');
         },
@@ -148,6 +158,176 @@ exports.availableRanges = {
         }
     }
 };
+exports.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 DateRangePicker = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(DateRangePicker, _super);
     function DateRangePicker(props) {
@@ -155,9 +335,20 @@ var DateRangePicker = /** @class */ (function (_super) {
         // 是否是第一次点击，如果是第一次点击就可以点任意地址
         _this.isFirstClick = true;
         _this.nextMonth = (0, moment_1.default)().add(1, 'months');
+        _this.startInputRef = react_1.default.createRef();
+        _this.endInputRef = react_1.default.createRef();
+        _this.calendarRef = react_1.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.handleSelectChange = _this.handleSelectChange.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.handeleEndDateChange = _this.handeleEndDateChange.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);
@@ -171,8 +362,17 @@ var DateRangePicker = /** @class */ (function (_super) {
         _this.renderDay = _this.renderDay.bind(_this);
         _this.renderQuarter = _this.renderQuarter.bind(_this);
         _this.handleMobileChange = _this.handleMobileChange.bind(_this);
-        var _a = _this.props, format = _a.format, joinValues = _a.joinValues, delimiter = _a.delimiter, value = _a.value;
-        _this.state = (0, tslib_1.__assign)({ isOpened: false, isFocused: false }, DateRangePicker.unFormatValue(value, format, joinValues, delimiter));
+        _this.handleOutClick = _this.handleOutClick.bind(_this);
+        var _a = _this.props, format = _a.format, joinValues = _a.joinValues, delimiter = _a.delimiter, value = _a.value, inputFormat = _a.inputFormat;
+        var _b = DateRangePicker.unFormatValue(value, format, joinValues, delimiter), startDate = _b.startDate, endDate = _b.endDate;
+        _this.state = {
+            isOpened: false,
+            isFocused: false,
+            startDate: startDate,
+            endDate: endDate,
+            startInputValue: startDate === null || startDate === void 0 ? void 0 : startDate.format(inputFormat),
+            endInputValue: endDate === null || endDate === void 0 ? void 0 : endDate.format(inputFormat)
+        };
         return _this;
     }
     DateRangePicker.formatValue = function (newValue, format, joinValues, delimiter, utc) {
@@ -201,11 +401,36 @@ var DateRangePicker = /** @class */ (function (_super) {
             endDate: value[1] ? (0, moment_1.default)(value[1], format) : undefined
         };
     };
+    DateRangePicker.prototype.componentDidMount = function () {
+        document.body.addEventListener('click', this.handleOutClick, true);
+    };
+    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, joinValues = props.joinValues, delimiter = props.delimiter;
+        var value = props.value, format = props.format, joinValues = props.joinValues, inputFormat = props.inputFormat, delimiter = props.delimiter;
         if (prevProps.value !== value) {
-            this.setState((0, tslib_1.__assign)({}, DateRangePicker.unFormatValue(value, format, joinValues, delimiter)));
+            var _a = DateRangePicker.unFormatValue(value, format, joinValues, delimiter), startDate = _a.startDate, endDate = _a.endDate;
+            this.setState({
+                startDate: startDate,
+                endDate: endDate,
+                startInputValue: startDate === null || startDate === void 0 ? void 0 : startDate.format(inputFormat),
+                endInputValue: endDate === null || endDate === void 0 ? void 0 : endDate.format(inputFormat)
+            });
         }
     };
     DateRangePicker.prototype.focus = function () {
@@ -242,9 +467,28 @@ var DateRangePicker = /** @class */ (function (_super) {
             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'
+        });
+    };
     DateRangePicker.prototype.close = function () {
         this.setState({
-            isOpened: false
+            isOpened: false,
+            editState: undefined
         }, this.blur);
     };
     DateRangePicker.prototype.handleClick = function () {
@@ -297,44 +541,180 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         return value;
     };
-    DateRangePicker.prototype.handleSelectChange = function (newValue) {
+    DateRangePicker.prototype.handleDateChange = function (newValue) {
+        var editState = this.state.editState;
+        if (editState === 'start') {
+            this.handleStartDateChange(newValue);
+        }
+        else if (editState === 'end') {
+            this.handeleEndDateChange(newValue);
+        }
+    };
+    DateRangePicker.prototype.handleStartDateChange = function (newValue) {
+        var _a = this.props, timeFormat = _a.timeFormat, minDate = _a.minDate, inputFormat = _a.inputFormat, type = _a.type;
+        var startDate = this.state.startDate;
+        if (minDate && newValue.isBefore(minDate)) {
+            newValue = minDate;
+        }
+        var date = this.filterDate(newValue, startDate || minDate, timeFormat, 'start');
+        var newState = {
+            startDate: date,
+            startInputValue: date.format(inputFormat)
+        };
+        // 这些没有时间的选择点第一次后第二次就是选结束时间
+        if (type === 'input-date-range' ||
+            type === 'input-year-range' ||
+            type === 'input-quarter-range') {
+            newState.editState = 'end';
+        }
+        this.setState(newState);
+    };
+    DateRangePicker.prototype.handeleEndDateChange = function (newValue) {
         var _this = this;
-        var _a = this.props, embed = _a.embed, timeFormat = _a.timeFormat, minDuration = _a.minDuration, maxDuration = _a.maxDuration, minDate = _a.minDate;
+        var _a = this.props, embed = _a.embed, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat;
         var _b = this.state, startDate = _b.startDate, endDate = _b.endDate;
-        // 第一次点击只标记起始时间，或者点击了开始时间前面的时间
-        if (this.isFirstClick || newValue.isBefore(startDate)) {
-            // 这种情况说明第二次点击点击了前面的时间，这时要标记为第二次点击
-            if (newValue.isBefore(startDate)) {
-                this.isFirstClick = true;
-            }
-            if (minDate && newValue.isBefore(minDate)) {
-                newValue = minDate;
-            }
+        newValue = this.getEndDateByDuration(newValue);
+        // 如果结束时间在前面，需要清空开始时间
+        if (newValue.isBefore(startDate)) {
             this.setState({
-                startDate: this.filterDate(newValue, startDate || minDate, timeFormat, 'start'),
-                endDate: undefined
+                startDate: undefined,
+                startInputValue: ''
             });
         }
+        var date = this.filterDate(newValue, endDate, timeFormat, 'end');
+        this.setState({
+            endDate: date,
+            endInputValue: date.format(inputFormat)
+        }, function () {
+            embed && _this.confirm();
+        });
+    };
+    // 手动控制输入时间
+    DateRangePicker.prototype.startInputChange = function (e) {
+        var _a = this.props, onChange = _a.onChange, inputFormat = _a.inputFormat, format = _a.format, utc = _a.utc;
+        var value = e.currentTarget.value;
+        this.setState({ startInputValue: value });
+        if (value === '') {
+            onChange('');
+        }
         else {
-            // 第二次点击作为结束时间
-            if (!startDate) {
-                // 不大可能，但只能作为开始时间了
-                startDate = newValue;
-            }
-            if (minDuration && newValue.isAfter(startDate.clone().add(minDuration))) {
-                newValue = startDate.clone().add(minDuration);
-            }
-            if (maxDuration &&
-                newValue.isBefore(startDate.clone().add(maxDuration))) {
-                newValue = startDate.clone().add(maxDuration);
-            }
-            this.setState({
-                endDate: this.filterDate(newValue, endDate, timeFormat, 'end')
-            }, function () {
-                embed && _this.confirm();
+            var newDate = this.getStartDateByDuration((0, moment_1.default)(value, inputFormat));
+            this.setState({ startDate: newDate });
+        }
+    };
+    DateRangePicker.prototype.endInputChange = function (e) {
+        var _a = this.props, onChange = _a.onChange, inputFormat = _a.inputFormat, format = _a.format, utc = _a.utc;
+        var value = e.currentTarget.value;
+        this.setState({ endInputValue: value });
+        if (value === '') {
+            onChange('');
+        }
+        else {
+            var newDate = this.getEndDateByDuration((0, moment_1.default)(value, inputFormat));
+            this.setState({ endDate: newDate });
+        }
+    };
+    // 根据 duration 修复结束时间
+    DateRangePicker.prototype.getEndDateByDuration = function (newValue) {
+        var _a = this.props, minDuration = _a.minDuration, maxDuration = _a.maxDuration, type = _a.type;
+        var _b = this.state, startDate = _b.startDate, endDate = _b.endDate, editState = _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);
+        }
+        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, editState = _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, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat, minDuration = _a.minDuration, maxDuration = _a.maxDuration, minDate = _a.minDate;
+        var _b = this.state, startDate = _b.startDate, endDate = _b.endDate;
+        // 时间范围必须统一成同一天，不然会不一致
+        if (endDate) {
+            newValue.set({
+                year: endDate.year(),
+                month: endDate.month(),
+                date: endDate.date()
             });
         }
-        this.isFirstClick = !this.isFirstClick;
+        if (minDate && newValue && newValue.isBefore(minDate, 'second')) {
+            newValue = minDate;
+        }
+        this.setState({
+            startDate: newValue,
+            startInputValue: newValue.format(inputFormat)
+        }, function () {
+            embed && _this.confirm();
+        });
+    };
+    DateRangePicker.prototype.handleTimeEndChange = function (newValue) {
+        var _this = this;
+        var _a = this.props, embed = _a.embed, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat, minDuration = _a.minDuration, maxDuration = _a.maxDuration, maxDate = _a.maxDate;
+        var _b = this.state, startDate = _b.startDate, endDate = _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.isAfter(startDate.clone().add(minDuration))) {
+            newValue = startDate.clone().add(minDuration);
+        }
+        if (startDate &&
+            maxDuration &&
+            newValue.isBefore(startDate.clone().add(maxDuration))) {
+            newValue = startDate.clone().add(maxDuration);
+        }
+        this.setState({
+            endDate: newValue,
+            endInputValue: newValue.format(inputFormat)
+        }, function () {
+            embed && _this.confirm();
+        });
     };
     DateRangePicker.prototype.handleMobileChange = function (data, callback) {
         this.setState({
@@ -374,8 +754,21 @@ var DateRangePicker = /** @class */ (function (_super) {
             }
             var range = {};
             if (typeof item === 'string') {
-                range = exports.availableRanges[item];
-                range.key = item;
+                if (exports.availableRanges[item]) {
+                    range = exports.availableRanges[item];
+                    range.key = item;
+                }
+                else {
+                    // 通过正则尝试匹配
+                    for (var i = 0, len = exports.advancedRanges.length; i < len; i++) {
+                        var value = exports.advancedRanges[i];
+                        var m = value.regexp.exec(item);
+                        if (m) {
+                            range = value.resolve.apply(item, (0, tslib_1.__spreadArray)([__], m, true));
+                            range.key = item;
+                        }
+                    }
+                }
             }
             else if (item.startDate &&
                 item.endDate) {
@@ -389,6 +782,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         e.preventDefault();
         e.stopPropagation();
         var _a = this.props, resetValue = _a.resetValue, onChange = _a.onChange;
+        this.setState({ startInputValue: '', endInputValue: '' });
         onChange(resetValue);
     };
     DateRangePicker.prototype.checkStartIsValidDate = function (currentDate) {
@@ -472,62 +866,73 @@ var DateRangePicker = /** @class */ (function (_super) {
                 quarter)));
     };
     DateRangePicker.prototype.renderCalendar = function () {
-        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, dateFormat = _a.dateFormat, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat, ranges = _a.ranges, locale = _a.locale, embed = _a.embed, _b = _a.viewMode, viewMode = _b === void 0 ? 'days' : _b;
+        var _a;
+        var _b = this.props, ns = _b.classPrefix, cx = _b.classnames, dateFormat = _b.dateFormat, timeFormat = _b.timeFormat, inputFormat = _b.inputFormat, ranges = _b.ranges, locale = _b.locale, embed = _b.embed, type = _b.type, _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c;
         var __ = this.props.translate;
-        var _c = this.state, startDate = _c.startDate, endDate = _c.endDate;
-        return (react_1.default.createElement("div", { className: "".concat(ns, "DateRangePicker-wrap") },
+        var _d = this.state, startDate = _d.startDate, endDate = _d.endDate;
+        return (react_1.default.createElement("div", { className: "".concat(ns, "DateRangePicker-wrap"), ref: this.calendarRef },
             this.renderRanges(ranges),
-            react_1.default.createElement(Calendar_1.default, { className: "".concat(ns, "DateRangePicker-start"), value: startDate, onChange: this.handleSelectChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, isValidDate: this.checkStartIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderQuarter: this.renderQuarter, locale: locale }),
-            react_1.default.createElement(Calendar_1.default, { className: "".concat(ns, "DateRangePicker-end"), value: endDate, onChange: this.handleSelectChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, viewDate: this.nextMonth, isEndDate: true, isValidDate: this.checkEndIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderQuarter: this.renderQuarter, locale: locale }),
+            react_1.default.createElement(Calendar_1.default, { className: "".concat(ns, "DateRangePicker-start"), value: startDate, 
+                // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
+                // TODO: 后续得把 time-range 代码拆分出来
+                onChange: type === 'input-datetime-range'
+                    ? this.handleStartDateChange
+                    : viewMode === 'time'
+                        ? this.handleTimeStartChange
+                        : this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, isValidDate: this.checkStartIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderQuarter: this.renderQuarter, locale: locale }),
+            react_1.default.createElement(Calendar_1.default, { className: "".concat(ns, "DateRangePicker-end"), value: endDate, onChange: type === 'input-datetime-range'
+                    ? this.handeleEndDateChange
+                    : viewMode === 'time'
+                        ? this.handleTimeEndChange
+                        : this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, viewDate: this.nextMonth, isEndDate: true, isValidDate: this.checkEndIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderQuarter: this.renderQuarter, locale: locale }),
             embed ? null : (react_1.default.createElement("div", { key: "button", className: "".concat(ns, "DateRangePicker-actions") },
                 react_1.default.createElement("a", { className: cx('Button', 'Button--default'), onClick: this.close }, __('cancel')),
                 react_1.default.createElement("a", { className: cx('Button', 'Button--primary', 'm-l-sm', {
-                        'is-disabled': !this.state.startDate || !this.state.endDate
+                        'is-disabled': !this.state.startDate ||
+                            !this.state.endDate ||
+                            ((_a = this.state.endDate) === null || _a === void 0 ? void 0 : _a.isBefore(this.state.startDate))
                     }), onClick: this.confirm }, __('confirm'))))));
     };
     DateRangePicker.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, className = _b.className, popoverClassName = _b.popoverClassName, ns = _b.classPrefix, value = _b.value, placeholder = _b.placeholder, popOverContainer = _b.popOverContainer, inputFormat = _b.inputFormat, format = _b.format, joinValues = _b.joinValues, delimiter = _b.delimiter, clearable = _b.clearable, disabled = _b.disabled, embed = _b.embed, overlayPlacement = _b.overlayPlacement, borderMode = _b.borderMode, useMobileUI = _b.useMobileUI, timeFormat = _b.timeFormat, minDate = _b.minDate, maxDate = _b.maxDate, minDuration = _b.minDuration, maxDuration = _b.maxDuration, dateFormat = _b.dateFormat, _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c, ranges = _b.ranges;
+        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, inputFormat = _b.inputFormat, format = _b.format, joinValues = _b.joinValues, delimiter = _b.delimiter, clearable = _b.clearable, disabled = _b.disabled, embed = _b.embed, overlayPlacement = _b.overlayPlacement, borderMode = _b.borderMode, useMobileUI = _b.useMobileUI, timeFormat = _b.timeFormat, minDate = _b.minDate, maxDate = _b.maxDate, minDuration = _b.minDuration, maxDuration = _b.maxDuration, dateFormat = _b.dateFormat, _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c, ranges = _b.ranges;
         var useCalendarMobile = useMobileUI &&
             (0, helper_1.isMobile)() &&
             ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
         var _d = this.state, isOpened = _d.isOpened, isFocused = _d.isFocused, startDate = _d.startDate, endDate = _d.endDate;
-        var selectedDate = DateRangePicker.unFormatValue(value, format, joinValues, delimiter);
-        var startViewValue = selectedDate.startDate
-            ? selectedDate.startDate.format(inputFormat)
-            : '';
-        var endViewValue = selectedDate.endDate
-            ? selectedDate.endDate.format(inputFormat)
-            : '';
-        var arr = [];
-        startViewValue && arr.push(startViewValue);
-        endViewValue && arr.push(endViewValue);
         var __ = this.props.translate;
         var calendarMobile = (react_1.default.createElement(CalendarMobile_1.default, { timeFormat: timeFormat, inputFormat: inputFormat, startDate: startDate, endDate: endDate, minDate: minDate, maxDate: maxDate, minDuration: minDuration, maxDuration: maxDuration, dateFormat: dateFormat, embed: embed, viewMode: viewMode, close: this.close, confirm: this.confirm, onChange: this.handleMobileChange, footerExtra: this.renderRanges(ranges), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months' }));
         if (embed) {
-            return (react_1.default.createElement("div", { className: (0, classnames_1.default)("".concat(ns, "DateRangeCalendar"), {
+            return (react_1.default.createElement("div", { className: cx("".concat(ns, "DateRangeCalendar"), {
                     'is-disabled': disabled
                 }, className) }, useCalendarMobile ? calendarMobile : this.renderCalendar()));
         }
         var CalendarMobileTitle = (react_1.default.createElement("div", { className: "".concat(ns, "CalendarMobile-title") }, __('Calendar.datepicker')));
-        return (react_1.default.createElement("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: (0, classnames_1.default)("".concat(ns, "DateRangePicker"), (_a = {
+        return (react_1.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((0, helper_1.ucFirst)(borderMode))] = borderMode,
                 _a['is-mobile'] = useMobileUI && (0, helper_1.isMobile)(),
-                _a), className), ref: this.dom, onClick: this.handleClick },
-            arr.length ? (react_1.default.createElement("span", { className: "".concat(ns, "DateRangePicker-value") }, arr.join(__('DateRange.valueConcat')))) : (react_1.default.createElement("span", { className: "".concat(ns, "DateRangePicker-placeholder") }, __(placeholder))),
+                _a), className), ref: this.dom },
+            react_1.default.createElement(Input_1.default, { className: cx('DateRangePicker-input', {
+                    isActive: this.state.editState === 'start'
+                }), onChange: this.startInputChange, onClick: this.openStart, ref: this.startInputRef, placeholder: __(startPlaceholder), autoComplete: "off", value: this.state.startInputValue || '', disabled: disabled }),
+            react_1.default.createElement("span", { className: cx('DateRangePicker-input-separator') }, "~"),
+            react_1.default.createElement(Input_1.default, { className: cx('DateRangePicker-input', {
+                    isActive: this.state.editState === 'end'
+                }), onChange: this.endInputChange, onClick: this.openEnd, ref: this.endInputRef, placeholder: __(endPlaceholder), autoComplete: "off", value: this.state.endInputValue || '', disabled: disabled }),
             clearable && !disabled && value ? (react_1.default.createElement("a", { className: "".concat(ns, "DateRangePicker-clear"), onClick: this.clearValue },
                 react_1.default.createElement(icons_1.Icon, { icon: "input-clear", className: "icon" }))) : null,
             react_1.default.createElement("a", { className: "".concat(ns, "DateRangePicker-toggler") },
                 react_1.default.createElement(icons_1.Icon, { icon: "clock", className: "icon" })),
-            isOpened ? (useMobileUI && (0, helper_1.isMobile)() ? (react_1.default.createElement(PopUp_1.default, { isShow: isOpened, container: popOverContainer, className: (0, classnames_1.default)("".concat(ns, "CalendarMobile-pop")), onHide: this.close, header: CalendarMobileTitle }, useCalendarMobile ? calendarMobile : this.renderCalendar())) : (react_1.default.createElement(Overlay_1.default, { target: function () { return _this.dom.current; }, onHide: this.close, container: popOverContainer || (function () { return (0, react_dom_1.findDOMNode)(_this); }), rootClose: false, placement: overlayPlacement, show: true },
-                react_1.default.createElement(PopOver_1.default, { classPrefix: ns, className: (0, classnames_1.default)("".concat(ns, "DateRangePicker-popover"), popoverClassName), onHide: this.close, onClick: this.handlePopOverClick, overlay: true }, this.renderCalendar())))) : null));
+            isOpened ? (useMobileUI && (0, helper_1.isMobile)() ? (react_1.default.createElement(PopUp_1.default, { isShow: isOpened, container: popOverContainer, className: cx("".concat(ns, "CalendarMobile-pop")), onHide: this.close, header: CalendarMobileTitle }, useCalendarMobile ? calendarMobile : this.renderCalendar())) : (react_1.default.createElement(Overlay_1.default, { target: function () { return _this.dom.current; }, onHide: this.close, container: popOverContainer || (function () { return (0, react_dom_1.findDOMNode)(_this); }), rootClose: false, placement: overlayPlacement, show: true },
+                react_1.default.createElement(PopOver_1.default, { classPrefix: ns, className: cx("".concat(ns, "DateRangePicker-popover"), popoverClassName), onHide: this.close, onClick: this.handlePopOverClick }, this.renderCalendar())))) : null));
     };
     DateRangePicker.defaultProps = {
-        placeholder: 'DateRange.placeholder',
+        startPlaceholder: 'Calendar.startPick',
+        endPlaceholder: 'Calendar.endPick',
         format: 'X',
         inputFormat: 'YYYY-MM-DD',
         joinValues: true,