@hi-ui/hiui 2.15.11 → 2.15.12

package/es/date-picker/BasePicker.js

@@ -1,19 +1,35 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _lodash = _interopRequireDefault(require("lodash"));
+
 var _Modal = _interopRequireDefault(require("./Modal"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _constants = require("./constants");
 
-var _lodash = _interopRequireDefault(require("lodash"));
+var _util = require("./util");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,87 +37,60 @@ var _Type = _interopRequireDefault(require("./Type"));
 
 var _dateUtil = require("./dateUtil");
 
-var _dateFns = require("date-fns");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function noop() {}
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var BasePicker = /*#__PURE__*/function (_Component) {
-  _inherits(BasePicker, _Component);
-
-  var _super = _createSuper(BasePicker);
+var BasePicker =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(BasePicker, _Component);
 
   function BasePicker(props) {
     var _this;
 
-    _classCallCheck(this, BasePicker);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "inputRoot", null);
-
-    _defineProperty(_assertThisInitialized(_this), "input", null);
-
-    _defineProperty(_assertThisInitialized(_this), "rInput", null);
-
+    (0, _classCallCheck2["default"])(this, BasePicker);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(BasePicker).call(this, props));
     _this.state = {
       showPanel: false,
       style: {},
       date: null,
       isFocus: false,
-      // input 框内的显示的时间内容
       texts: ['', ''],
       placeholder: '',
-      rText: '',
       leftPlaceholder: '',
       rightPlaceholder: '',
-      format: ''
+      format: _this.getFormatString(props),
+      rangeInputIsError: false
     };
+    _this.inputRoot = _react["default"].createRef();
+    _this.input = null;
+    _this.rInput = null;
     return _this;
   }
 
-  _createClass(BasePicker, [{
+  (0, _createClass2["default"])(BasePicker, [{
     key: "setPlaceholder",
-    value: function setPlaceholder() {
+    value: function setPlaceholder(_props) {
+      var placeholder = _props.placeholder;
       var _this$props = this.props,
-          placeholder = _this$props.placeholder,
           localeDatas = _this$props.localeDatas,
-          type = _this$props.type;
-      var tempPlaceholder = localeDatas.datePicker.placeholders[type] || localeDatas.datePicker.placeholder;
+          type = _this$props.type,
+          showTime = _this$props.showTime;
+      var typePlaceholder = localeDatas.datePicker.placeholders[type];
+      var tempPlaceholder = showTime ? localeDatas.datePicker.placeholderTimeperiod : typePlaceholder || localeDatas.datePicker.placeholder;
       var leftPlaceholder = tempPlaceholder;
       var rightPlaceholder = tempPlaceholder;
 
+      if (typePlaceholder instanceof Array) {
+        if (showTime) {
+          var timeperiodPlaceholder = localeDatas.datePicker.placeholders.timeperiod;
+          leftPlaceholder = timeperiodPlaceholder[0];
+          rightPlaceholder = timeperiodPlaceholder[1];
+        } else {
+          leftPlaceholder = tempPlaceholder[0];
+          rightPlaceholder = tempPlaceholder[1];
+        }
+      }
+
       if (placeholder instanceof Array) {
         leftPlaceholder = placeholder[0];
         rightPlaceholder = placeholder[1] || placeholder[0];
@@ -115,94 +104,13 @@ var BasePicker = /*#__PURE__*/function (_Component) {
         rightPlaceholder: rightPlaceholder
       });
     }
-  }, {
-    key: "_parseProps",
-    value: function _parseProps(props, callback) {
-      var _this2 = this;
-
-      var value = props.value,
-          showTime = props.showTime,
-          type = props.type,
-          format = props.format,
-          localeDatas = props.localeDatas,
-          weekOffset = props.weekOffset;
-      format = format || _constants.FORMATS[type];
-      var date;
-      var noText = false;
-      /**
-       * value 可能的格式：
-       *  '' | undefined  | null | Date | String | Number | {start: xxx, end: xxx}
-       */
-
-      if (value === '' || !value) {
-        // value 未传入情况
-        date = new Date();
-        noText = true;
-      }
-
-      if (typeof value === 'number' || typeof value === 'string' && value.trim().length > 4) {
-        // value 为数字（times）
-        date = (0, _dateUtil.parse)(value);
-      }
-
-      if (value instanceof Date) {
-        date = value;
-      }
-
-      if (type.includes('range') || type === 'timeperiod') {
-        if (value) {
-          if (value instanceof Date) {
-            // 如果为时间段选择，则取默认的第一个范围
-            date = {
-              startDate: (0, _dateUtil.startOfDay)(date),
-              endDate: type === 'timeperiod' ? (0, _dateFns.addHours)((0, _dateUtil.startOfDay)(date), 4) : (0, _dateUtil.endOfDay)(date)
-            };
-          }
-
-          if (value.start && value.end) {
-            date = {
-              startDate: value.start,
-              endDate: value.end
-            };
-          }
-        } else {
-          date = {
-            startDate: new Date(),
-            endDate: new Date()
-          };
-        }
-      }
-
-      var leftText = noText ? '' : (0, _constants.formatterDate)(type, date.startDate || date, format, showTime, localeDatas, weekOffset);
-      var rightText = noText ? '' : (0, _constants.formatterDate)(type, date.endDate || date, format, showTime, localeDatas, weekOffset);
-      this.setState({
-        texts: [leftText, rightText],
-        date: date,
-        format: format
-      }, function () {
-        callback && callback(_this2.state.date);
-      });
-    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this3 = this;
+      this._parseProps(this.props);
 
-      this._parseProps(this.props, function (date) {
-        if (date && date.startDate && date.endDate) {
-          date = {
-            start: new Date(date.startDate),
-            end: new Date(date.endDate)
-          };
-        } else if (date !== null) {
-          date = new Date(date);
-        }
-
-        _this3.props.value && _this3.props.onChange && _this3.props.onChange(date);
-      });
-
-      this.setPlaceholder();
-      var rect = this.inputRoot.getBoundingClientRect();
+      this.setPlaceholder(this.props);
+      var rect = this.inputRoot.current.getBoundingClientRect();
       this.calcPanelPos(rect);
     }
   }, {
@@ -214,12 +122,20 @@ var BasePicker = /*#__PURE__*/function (_Component) {
 
       var _w = type.indexOf('range') !== -1 ? 578 : 288;
 
+      if (type === 'timerange') {
+        _w = 400;
+      }
+
       var _h = 298;
 
       if (type === 'daterange' && showTime) {
         _h = 344;
       }
 
+      if ((0, _util.showLargeCalendar)(this.props)) {
+        _h = 440;
+      }
+
       var _cw = document.documentElement.clientWidth || document.body.clientWidth;
 
       var _ch = document.documentElement.clientHeight || document.body.clientHeight;
@@ -231,14 +147,14 @@ var BasePicker = /*#__PURE__*/function (_Component) {
           top = rect.top,
           height = rect.height;
 
-      var _top = rect.top + rect.height + _st;
+      var _top = rect.top + rect.height + _st + 4;
 
       if (left + _w > _cw) {
         left = left + width - _w;
       }
 
       if (top + _h + height > _ch) {
-        _top = top - _h + _st;
+        _top = top - _h + _st - 4;
       }
 
       this.setState({
@@ -252,141 +168,234 @@ var BasePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.value !== this.props.value) {
+        this._parseProps(nextProps);
+      }
+
+      if (!_lodash["default"].isEqual(nextProps.placeholder, this.props.placeholder)) {
+        this.setPlaceholder(nextProps);
+      }
+    }
+  }, {
+    key: "getFormatString",
+    value: function getFormatString(props) {
+      var format = props.format,
+          showTime = props.showTime,
+          type = props.type;
+      format = (0, _dateUtil.compatibleFormatString)(format || _constants.FORMATS[type]);
+
+      if ((showTime || type === 'timeperiod') && !/[H|h|m|s]/.test(format)) {
+        format = format + ' HH:mm:ss';
+      }
+
+      return format;
+    }
+  }, {
+    key: "callFormatterDate",
+    value: function callFormatterDate(date) {
       var _this$props3 = this.props,
-          onChange = _this$props3.onChange,
-          currentProps = _objectWithoutProperties(_this$props3, ["onChange"]);
+          type = _this$props3.type,
+          showTime = _this$props3.showTime,
+          localeDatas = _this$props3.localeDatas,
+          weekOffset = _this$props3.weekOffset;
+      return (0, _constants.formatterDate)(type, date, this.state.format, showTime, localeDatas, weekOffset);
+    }
+  }, {
+    key: "_parseProps",
+    value: function _parseProps(props) {
+      var value = props.value,
+          defaultValue = props.defaultValue,
+          type = props.type,
+          _props$timeInterval = props.timeInterval,
+          timeInterval = _props$timeInterval === void 0 ? 240 : _props$timeInterval;
+      var format = this.state.format;
 
-      var _onChange = nextProps.onChange,
-          _nextProps = _objectWithoutProperties(nextProps, ["onChange"]);
+      var _value = value || defaultValue;
 
-      if (!_lodash["default"].isEqual(currentProps, _nextProps)) {
-        this._parseProps(nextProps);
+      var start;
+      var end;
+      var date;
+      var leftText = '';
+      var rightText = '';
+
+      if (_value) {
+        if (Object.prototype.toString.call(_value) === '[object Object]') {
+          start = (0, _dateUtil.compatibleToDate)(_value.start, format);
+          end = (0, _dateUtil.compatibleToDate)(_value.end, format);
+        } else {
+          start = (0, _dateUtil.compatibleToDate)(_value, format);
+
+          if (type.includes('range')) {
+            end = (0, _dateUtil.compatibleToDate)(start, format);
+
+            if (type === 'weekrange') {
+              start = (0, _dateUtil.startOfWeek)(start);
+              end = (0, _dateUtil.endOfWeek)(end);
+            }
+          }
+        }
+
+        if (type === 'timeperiod' && (0, _dateUtil.isValid)(start)) {
+          var startTime = start.getTime();
+          startTime += timeInterval * 60 * 1000;
+          end = new Date(startTime);
+        }
       }
+
+      date = {
+        startDate: (0, _dateUtil.compatibleToDate)(start, format),
+        endDate: (0, _dateUtil.compatibleToDate)(end, format)
+      };
+      leftText = (0, _dateUtil.isValid)(date.startDate) ? this.callFormatterDate(date.startDate) : '';
+      rightText = (0, _dateUtil.isValid)(date.endDate) ? this.callFormatterDate(date.endDate) : '';
+      this.setState({
+        texts: [leftText, rightText],
+        date: date
+      });
     }
   }, {
     key: "onPick",
     value: function onPick(date, showPanel) {
-      var _this4 = this;
+      var _this2 = this;
+
+      if (!date.startDate) {
+        date = {
+          startDate: date,
+          endDate: undefined
+        };
+      }
 
-      var _this$props4 = this.props,
-          type = _this$props4.type,
-          showTime = _this$props4.showTime,
-          localeDatas = _this$props4.localeDatas,
-          weekOffset = _this$props4.weekOffset;
-      var format = this.state.format;
       this.setState({
         date: date,
-        texts: [(0, _constants.formatterDate)(type, date.startDate || date, format, showTime, localeDatas, weekOffset), (0, _constants.formatterDate)(type, date.endDate, format, showTime, localeDatas, weekOffset)],
+        texts: [this.callFormatterDate(date.startDate), this.callFormatterDate(date.endDate)],
         showPanel: showPanel,
         isFocus: false
       }, function () {
         if (!showPanel) {
-          _this4.callback();
+          _this2.callback();
         }
       });
     }
   }, {
     key: "callback",
     value: function callback() {
-      var _this$props5 = this.props,
-          type = _this$props5.type,
-          onChange = _this$props5.onChange,
-          weekOffset = _this$props5.weekOffset;
-      var date = this.state.date;
-
-      if (onChange) {
-        var _weekOffset = {
-          weekStartsOn: weekOffset
-        };
+      var _this$props4 = this.props,
+          type = _this$props4.type,
+          onChange = _this$props4.onChange,
+          disabled = _this$props4.disabled,
+          max = _this$props4.max,
+          min = _this$props4.min;
+      var _this$state = this.state,
+          date = _this$state.date,
+          format = _this$state.format;
+
+      if (onChange && !disabled) {
+        var _getInRangeDate = (0, _util.getInRangeDate)(_lodash["default"].cloneDeep(date.startDate), _lodash["default"].cloneDeep(date.endDate), max, min),
+            startDate = _getInRangeDate.startDate,
+            endDate = _getInRangeDate.endDate;
 
-        if (type === 'week') {
-          onChange({
-            start: (0, _dateUtil.startOfWeek)(date, _weekOffset),
-            end: (0, _dateUtil.endOfWeek)(date, _weekOffset)
+        startDate = (0, _dateUtil.isValid)(startDate) ? startDate : '';
+        endDate = (0, _dateUtil.isValid)(endDate) ? endDate : '';
+
+        if (type === 'week' || type === 'weekrange') {
+          this.setState({
+            texts: [this.callFormatterDate(startDate), this.callFormatterDate(endDate)],
+            showPanel: false
           });
+          onChange(date);
           return;
         }
 
-        if (date && date.startDate && date.endDate) {
-          if (type === 'weekrange') {
-            onChange({
-              start: (0, _dateUtil.startOfWeek)(date.startDate, _weekOffset),
-              end: (0, _dateUtil.endOfWeek)(date.endDate, _weekOffset)
-            });
-          } else if (['timerange', 'timeperiod', 'daterange'].includes(type)) {
-            onChange({
-              start: date.startDate,
-              end: date.endDate
-            });
-          } else {
-            onChange({
-              start: (0, _dateUtil.startOfDay)(date.startDate),
-              end: (0, _dateUtil.endOfDay)(date.endDate)
-            });
-          }
-        } else {
-          onChange(date);
+        if (type === 'time') {
+          this.setState({
+            texts: [this.callFormatterDate(startDate), ''],
+            showPanel: false
+          });
+          onChange(startDate, (0, _dateUtil.dateFormat)(startDate, format));
+          return;
         }
-      }
-    }
-  }, {
-    key: "timeConfirm",
-    value: function timeConfirm(date, onlyTime) {
-      var _this$props6 = this.props,
-          type = _this$props6.type,
-          showTime = _this$props6.showTime,
-          onChange = _this$props6.onChange,
-          localeDatas = _this$props6.localeDatas,
-          weekOffset = _this$props6.weekOffset;
-      var format = this.state.format;
-      onlyTime && (format = _constants.FORMATS['time']);
-      this.setState({
-        date: date,
-        texts: [(0, _constants.formatterDate)(type, date.startDate || date, format, showTime, localeDatas, weekOffset), (0, _constants.formatterDate)(type, date.endDate, format, showTime, localeDatas, weekOffset)],
-        showPanel: false,
-        isFocus: false
-      });
 
-      if (onChange) {
-        if (date.startDate && date.endDate) {
-          onChange({
-            start: date.startDate,
-            end: date.endDate
+        if (['timerange', 'timeperiod', 'daterange', 'yearrange', 'monthrange'].includes(type)) {
+          var isError = Date.parse((0, _dateUtil.toDate)(startDate)) > Date.parse((0, _dateUtil.toDate)(endDate));
+          this.setState({
+            rangeInputIsError: isError,
+            texts: [this.callFormatterDate(startDate), this.callFormatterDate(endDate)],
+            showPanel: isError
           });
-        } else {
-          onChange(date);
+          !isError && onChange({
+            start: startDate,
+            end: endDate
+          }, {
+            start: (0, _dateUtil.dateFormat)(startDate, format),
+            end: (0, _dateUtil.dateFormat)(endDate, format)
+          });
+          return;
+        }
+
+        if ((0, _dateUtil.isValid)(startDate) || startDate === '') {
+          this.setState({
+            texts: [this.callFormatterDate(startDate), ''],
+            showPanel: false
+          });
+          onChange(startDate, startDate ? (0, _dateUtil.dateFormat)(startDate, format) : '');
         }
       }
     }
   }, {
     key: "timeCancel",
     value: function timeCancel() {
-      var _this$state = this.state,
-          tempDate = _this$state.tempDate,
-          format = _this$state.format;
-      var _this$props7 = this.props,
-          type = _this$props7.type,
-          showTime = _this$props7.showTime,
-          localeDatas = _this$props7.localeDatas,
-          weekOffset = _this$props7.weekOffset;
+      this.setState({
+        isFocus: false
+      });
+    }
+  }, {
+    key: "inputChangeEvent",
+    value: function inputChangeEvent() {
+      var _this$state2 = this.state,
+          texts = _this$state2.texts,
+          date = _this$state2.date,
+          format = _this$state2.format;
+      var startDate = (0, _dateUtil.parse)(texts[0], format, new Date());
+      var endDate = (0, _dateUtil.parse)(texts[1], format, new Date());
+
+      if (startDate && (0, _dateUtil.isValid)(startDate)) {
+        date.startDate ? date.startDate = startDate : date = startDate;
+        this.setState({
+          date: date
+        });
+      }
 
-      if (tempDate) {
+      if (endDate && (0, _dateUtil.isValid)(endDate)) {
+        date.endDate && (date.endDate = endDate);
         this.setState({
-          date: new Date(tempDate),
-          text: (0, _constants.formatterDate)(type, new Date(tempDate), format, showTime, localeDatas, weekOffset),
-          showPanel: false
+          date: date
         });
-      } else {
+      }
+
+      if (texts[0].trim().length === 0) {
+        date.startDate = null;
         this.setState({
-          showPanel: false,
-          isFocus: false
+          date: date
+        });
+      }
+
+      if (texts[1].trim().length === 0) {
+        date.endDate = null;
+        this.setState({
+          date: date
         });
       }
     }
   }, {
     key: "clickOutSide",
     value: function clickOutSide(e) {
+      var _this3 = this;
+
+      var _this$props5 = this.props,
+          max = _this$props5.max,
+          min = _this$props5.min;
       var tar = e.target;
+      this.inputChangeEvent();
 
       if (tar.className.indexOf('clear') !== -1) {
         this.setState({
@@ -397,45 +406,59 @@ var BasePicker = /*#__PURE__*/function (_Component) {
       }
 
       if (tar !== this.input && tar !== this.rInput) {
-        this.timeCancel();
-      }
+        var texts = this.state.texts;
 
-      this.callback();
+        var _getInRangeDate2 = (0, _util.getInRangeDate)(texts[0], texts[1], max, min),
+            startDate = _getInRangeDate2.startDate,
+            endDate = _getInRangeDate2.endDate;
+
+        texts = [this.callFormatterDate(startDate), this.callFormatterDate(endDate)];
+        this.setState({
+          texts: texts
+        }, function () {
+          _this3.timeCancel();
+
+          _this3.callback();
+        });
+      }
     }
   }, {
     key: "_input",
-    value: function _input(text) {
-      var _this5 = this;
-
-      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'input';
+    value: function _input(text, _ref, placeholder) {
+      var _this4 = this;
 
-      var placeholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Please Select...';
-      var _this$props8 = this.props,
-          disabled = _this$props8.disabled,
-          type = _this$props8.type,
-          _onChange2 = _this$props8.onChange;
-      return /*#__PURE__*/_react["default"].createElement("input", {
+      var _this$props6 = this.props,
+          disabled = _this$props6.disabled,
+          hourStep = _this$props6.hourStep,
+          minuteStep = _this$props6.minuteStep,
+          secondStep = _this$props6.secondStep,
+          inputReadOnly = _this$props6.inputReadOnly;
+      var texts = this.state.texts;
+      return _react["default"].createElement("input", {
         type: "text",
         ref: function ref(el) {
-          _this5[_ref] = el;
+          _this4[_ref] = el;
         },
         placeholder: placeholder,
         className: disabled ? 'disabled' : '',
         disabled: disabled,
+        readOnly: hourStep || minuteStep || secondStep || inputReadOnly ? 'readOnly' : false,
         onChange: function onChange(e) {
-          (0, _constants.isVaildDate)(new Date(e.target.value)) && type === 'date' && _onChange2(new Date(e.target.value));
+          _ref === 'input' ? texts[0] = e.target.value : texts[1] = e.target.value;
 
-          _this5.setState({
-            text: e.target.value
+          _this4.setState({
+            texts: texts
+          }, function () {
+            _this4.inputChangeEvent();
           });
         },
         onFocus: function onFocus(e) {
-          _this5.setState({
+          _this4.setState({
             showPanel: true,
             isFocus: true
           });
 
-          _this5.calcPanelPos(_this5.inputRoot.getBoundingClientRect());
+          _this4.calcPanelPos(_this4.inputRoot.current.getBoundingClientRect());
         },
         value: text
       });
@@ -443,15 +466,18 @@ var BasePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "_clear",
     value: function _clear() {
-      var onChange = this.props.onChange;
-
-      if (onChange) {
-        onChange(null);
-      }
+      var _this5 = this;
 
-      this.setState({
+      var disabled = this.props.disabled;
+      !disabled && this.setState({
+        date: {
+          startDate: null,
+          endDate: null
+        },
         texts: ['', ''],
         isFocus: false
+      }, function () {
+        _this5.callback();
       });
     }
   }, {
@@ -459,17 +485,24 @@ var BasePicker = /*#__PURE__*/function (_Component) {
     value: function _icon() {
       var _this6 = this;
 
-      var isFocus = this.state.isFocus;
-      var iconCls = (0, _classnames["default"])('hi-datepicker__input-icon', 'hi-icon', isFocus ? 'icon-close-circle clear' : 'icon-date');
-      return isFocus ? /*#__PURE__*/_react["default"].createElement("span", {
+      var _this$state3 = this.state,
+          isFocus = _this$state3.isFocus,
+          texts = _this$state3.texts;
+      var _this$props7 = this.props,
+          clearable = _this$props7.clearable,
+          type = _this$props7.type,
+          showTime = _this$props7.showTime,
+          disabled = _this$props7.disabled;
+      var iconCls = (0, _classnames["default"])('hi-datepicker__input-icon', 'hi-icon', texts[0].length && isFocus && clearable && !disabled ? 'icon-close-circle clear' : type.includes('time') || showTime ? 'icon-time' : 'icon-date');
+      return texts[0].length && isFocus && clearable ? _react["default"].createElement("span", {
         className: iconCls,
         onClick: this._clear.bind(this)
-      }) : /*#__PURE__*/_react["default"].createElement("span", {
+      }) : _react["default"].createElement("span", {
         className: iconCls,
         onClick: function onClick(e) {
           if (_this6.props.disabled) return;
 
-          _this6.calcPanelPos(_this6.inputRoot.getBoundingClientRect());
+          _this6.calcPanelPos(_this6.inputRoot.current.getBoundingClientRect());
 
           _this6.setState({
             showPanel: true,
@@ -481,73 +514,117 @@ var BasePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderRangeInput",
     value: function renderRangeInput() {
-      var _this$props9 = this.props,
-          localeDatas = _this$props9.localeDatas,
-          disabled = _this$props9.disabled,
-          showTime = _this$props9.showTime;
+      var _this7 = this;
+
+      var _this$props8 = this.props,
+          localeDatas = _this$props8.localeDatas,
+          disabled = _this$props8.disabled,
+          showTime = _this$props8.showTime,
+          type = _this$props8.type,
+          width = _this$props8.width,
+          theme = _this$props8.theme;
+      var _this$state4 = this.state,
+          isFocus = _this$state4.isFocus,
+          rangeInputIsError = _this$state4.rangeInputIsError;
 
-      var _cls = (0, _classnames["default"])('hi-datepicker__input', 'hi-datepicker__input--range', showTime && 'hi-datepicker__input--range-time', disabled && 'hi-datepicker__input--disabled');
+      var _cls = (0, _classnames["default"])('hi-datepicker__input', "theme__".concat(theme), isFocus && 'hi-datepicker__input--focus', "hi-datepicker__input--".concat(type), 'hi-datepicker__input--range', (showTime || type === 'timeperiod') && 'hi-datepicker__input--range-time', disabled && 'hi-datepicker__input--disabled', rangeInputIsError && 'hi-datepicker__input--error');
 
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _cls
-      }, this._input(this.state.texts[0], 'input', this.state.leftPlaceholder), /*#__PURE__*/_react["default"].createElement("span", null, localeDatas.datePicker.to), this._input(this.state.texts[1], 'rInput', this.state.rightPlaceholder), this._icon());
+      return _react["default"].createElement("div", {
+        className: _cls,
+        style: {
+          width: width
+        },
+        onMouseEnter: function onMouseEnter() {
+          _this7.setState({
+            isFocus: true
+          });
+        },
+        onMouseLeave: function onMouseLeave() {
+          _this7.setState({
+            isFocus: false
+          });
+        }
+      }, this._input(this.state.texts[0], 'input', this.state.leftPlaceholder), _react["default"].createElement("span", {
+        className: "hi-datepicker__input--connection"
+      }, localeDatas.datePicker.to), this._input(this.state.texts[1], 'rInput', this.state.rightPlaceholder), this._icon());
     }
   }, {
     key: "renderNormalInput",
     value: function renderNormalInput() {
-      var _this$props10 = this.props,
-          disabled = _this$props10.disabled,
-          showTime = _this$props10.showTime;
+      var _this8 = this;
+
+      var _this$props9 = this.props,
+          disabled = _this$props9.disabled,
+          showTime = _this$props9.showTime,
+          type = _this$props9.type,
+          width = _this$props9.width,
+          theme = _this$props9.theme;
+      var isFocus = this.state.isFocus;
 
-      var _cls = (0, _classnames["default"])('hi-datepicker__input', 'hi-datepicker__input--normal', disabled && 'hi-datepicker__input--disabled', showTime && 'hi-datepicker__input--middle');
+      var _cls = (0, _classnames["default"])('hi-datepicker__input', "theme__".concat(theme), isFocus && 'hi-datepicker__input--focus', "hi-datepicker__input--".concat(type), disabled && 'hi-datepicker__input--disabled', showTime && 'hi-datepicker__input--middle');
 
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _cls
+      return _react["default"].createElement("div", {
+        className: _cls,
+        style: {
+          width: width
+        },
+        onMouseEnter: function onMouseEnter() {
+          _this8.setState({
+            isFocus: true
+          });
+        },
+        onMouseLeave: function onMouseLeave() {
+          _this8.setState({
+            isFocus: false
+          });
+        }
       }, this._input(this.state.texts[0], 'input', this.state.leftPlaceholder), this._icon());
     }
   }, {
     key: "render",
     value: function render() {
-      var _this7 = this;
-
-      var _this$props11 = this.props,
-          type = _this$props11.type,
-          showTime = _this$props11.showTime;
-      return /*#__PURE__*/_react["default"].createElement("span", {
-        ref: function ref(el) {
-          _this7.inputRoot = el;
-        },
-        className: "hi-datepicker__input-root"
-      }, type.indexOf('range') !== -1 || type === 'timeperiod' ? this.renderRangeInput() : this.renderNormalInput(), this.state.showPanel ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+      var _this$props10 = this.props,
+          type = _this$props10.type,
+          showTime = _this$props10.showTime,
+          width = _this$props10.width;
+      return _react["default"].createElement("span", {
+        ref: this.inputRoot,
+        className: "hi-datepicker__input-root",
+        style: {
+          width: width
+        }
+      }, type.indexOf('range') !== -1 || type === 'timeperiod' ? this.renderRangeInput() : this.renderNormalInput(), this.state.showPanel ? _react["default"].createElement(_Modal["default"], {
         clickOutSide: this.clickOutSide.bind(this),
         showTime: showTime
       }, this.initPanel(this.state, this.props)) : null);
     }
   }]);
-
   return BasePicker;
 }(_react.Component);
 
-_defineProperty(BasePicker, "propTypes", {
+BasePicker.propTypes = {
   type: _propTypes["default"].oneOf(Object.values(_Type["default"])),
   value: function value(props, propName, componentName) {
-    // Invalid Date
     var val = props[propName];
 
     if (val === undefined || val === null) {
       return null;
     }
 
+    if (!val) {
+      return null;
+    }
+
     if (val.start && val.end) {
-      var _start = (0, _dateUtil.dateFormat)(val.start);
+      var _start = (0, _dateUtil.isValid)(val.start);
 
-      var _end = (0, _dateUtil.dateFormat)(val.end);
+      var _end = (0, _dateUtil.isValid)(val.end);
 
-      if (_start === 'Invalid Date' || _end === 'Invalid Date') {
+      if (!_start || !_end) {
         return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Validation failed. start or end is an invalid date."));
       }
     } else {
-      if ((0, _dateUtil.dateFormat)(val) === 'Invalid Date') {
+      if (!(0, _dateUtil.isValid)(val)) {
         return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Validation failed. value is an invalid data."));
       }
     }
@@ -564,16 +641,17 @@ _defineProperty(BasePicker, "propTypes", {
     if (val < 5 || val > 480 || val > 60 && val % 60 !== 0 || val < 60 && 60 % val !== 0) {
       return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". This value must be greater than 5 and less than 480 and is a multiple of 60."));
     }
-  }
-});
-
-_defineProperty(BasePicker, "defaultProps", {
+  },
+  clearable: _propTypes["default"].bool
+};
+BasePicker.defaultProps = {
   type: 'date',
   disabled: false,
   showWeekNumber: true,
   weekOffset: 0,
-  timeInterval: 240
-});
-
+  timeInterval: 240,
+  clearable: true,
+  onSelect: noop
+};
 var _default = BasePicker;
 exports["default"] = _default;