@hi-ui/hiui 2.15.10 → 2.15.11

package/es/date-picker/BasePicker.js

@@ -1,35 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 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 _util = require("./util");
+var _lodash = _interopRequireDefault(require("lodash"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -37,68 +21,87 @@ var _Type = _interopRequireDefault(require("./Type"));
 
 var _dateUtil = require("./dateUtil");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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 noop() {}
+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) {
-  (0, _inherits2["default"])(BasePicker, _Component);
+  _inherits(BasePicker, _Component);
 
   var _super = _createSuper(BasePicker);
 
   function BasePicker(props) {
     var _this;
 
-    (0, _classCallCheck2["default"])(this, BasePicker);
+    _classCallCheck(this, BasePicker);
+
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "inputRoot", null);
+
+    _defineProperty(_assertThisInitialized(_this), "input", null);
+
+    _defineProperty(_assertThisInitialized(_this), "rInput", null);
+
     _this.state = {
       showPanel: false,
       style: {},
       date: null,
       isFocus: false,
+      // input 框内的显示的时间内容
       texts: ['', ''],
       placeholder: '',
+      rText: '',
       leftPlaceholder: '',
       rightPlaceholder: '',
-      format: _this.getFormatString(props),
-      rangeInputIsError: false
+      format: ''
     };
-    _this.inputRoot = /*#__PURE__*/_react["default"].createRef();
-    _this.input = null;
-    _this.rInput = null;
     return _this;
   }
 
-  (0, _createClass2["default"])(BasePicker, [{
+  _createClass(BasePicker, [{
     key: "setPlaceholder",
-    value: function setPlaceholder(_props) {
-      var placeholder = _props.placeholder;
+    value: function setPlaceholder() {
       var _this$props = this.props,
+          placeholder = _this$props.placeholder,
           localeDatas = _this$props.localeDatas,
-          type = _this$props.type,
-          showTime = _this$props.showTime;
-      var typePlaceholder = localeDatas.datePicker.placeholders[type];
-      var tempPlaceholder = showTime ? localeDatas.datePicker.placeholderTimeperiod : typePlaceholder || localeDatas.datePicker.placeholder;
+          type = _this$props.type;
+      var tempPlaceholder = localeDatas.datePicker.placeholders[type] || 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];
@@ -112,13 +115,94 @@ 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() {
-      this._parseProps(this.props);
+      var _this3 = this;
+
+      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(this.props);
-      var rect = this.inputRoot.current.getBoundingClientRect();
+      this.setPlaceholder();
+      var rect = this.inputRoot.getBoundingClientRect();
       this.calcPanelPos(rect);
     }
   }, {
@@ -130,20 +214,12 @@ 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;
@@ -155,14 +231,14 @@ var BasePicker = /*#__PURE__*/function (_Component) {
           top = rect.top,
           height = rect.height;
 
-      var _top = rect.top + rect.height + _st + 4;
+      var _top = rect.top + rect.height + _st;
 
       if (left + _w > _cw) {
         left = left + width - _w;
       }
 
       if (top + _h + height > _ch) {
-        _top = top - _h + _st - 4;
+        _top = top - _h + _st;
       }
 
       this.setState({
@@ -176,234 +252,141 @@ 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,
-          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;
+          onChange = _this$props3.onChange,
+          currentProps = _objectWithoutProperties(_this$props3, ["onChange"]);
 
-      var _value = value || defaultValue;
+      var _onChange = nextProps.onChange,
+          _nextProps = _objectWithoutProperties(nextProps, ["onChange"]);
 
-      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);
-        }
+      if (!_lodash["default"].isEqual(currentProps, _nextProps)) {
+        this._parseProps(nextProps);
       }
-
-      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 _this2 = this;
-
-      if (!date.startDate) {
-        date = {
-          startDate: date,
-          endDate: undefined
-        };
-      }
+      var _this4 = this;
 
+      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: [this.callFormatterDate(date.startDate), this.callFormatterDate(date.endDate)],
+        texts: [(0, _constants.formatterDate)(type, date.startDate || date, format, showTime, localeDatas, weekOffset), (0, _constants.formatterDate)(type, date.endDate, format, showTime, localeDatas, weekOffset)],
         showPanel: showPanel,
         isFocus: false
       }, function () {
         if (!showPanel) {
-          _this2.callback();
+          _this4.callback();
         }
       });
     }
   }, {
     key: "callback",
     value: function callback() {
-      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;
-
-        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 (type === 'time') {
-          this.setState({
-            texts: [this.callFormatterDate(startDate), ''],
-            showPanel: false
-          });
-          onChange(startDate, (0, _dateUtil.dateFormat)(startDate, format));
-          return;
-        }
+      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
+        };
 
-        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
-          });
-          !isError && onChange({
-            start: startDate,
-            end: endDate
-          }, {
-            start: (0, _dateUtil.dateFormat)(startDate, format),
-            end: (0, _dateUtil.dateFormat)(endDate, format)
+        if (type === 'week') {
+          onChange({
+            start: (0, _dateUtil.startOfWeek)(date, _weekOffset),
+            end: (0, _dateUtil.endOfWeek)(date, _weekOffset)
           });
           return;
         }
 
-        if ((0, _dateUtil.isValid)(startDate) || startDate === '') {
-          this.setState({
-            texts: [this.callFormatterDate(startDate), ''],
-            showPanel: false
-          });
-          onChange(startDate, startDate ? (0, _dateUtil.dateFormat)(startDate, format) : '');
+        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);
         }
       }
     }
   }, {
-    key: "timeCancel",
-    value: function timeCancel() {
+    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
       });
-    }
-  }, {
-    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 (endDate && (0, _dateUtil.isValid)(endDate)) {
-        date.endDate && (date.endDate = endDate);
-        this.setState({
-          date: date
-        });
+      if (onChange) {
+        if (date.startDate && date.endDate) {
+          onChange({
+            start: date.startDate,
+            end: date.endDate
+          });
+        } else {
+          onChange(date);
+        }
       }
+    }
+  }, {
+    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;
 
-      if (texts[0].trim().length === 0) {
-        date.startDate = null;
+      if (tempDate) {
         this.setState({
-          date: date
+          date: new Date(tempDate),
+          text: (0, _constants.formatterDate)(type, new Date(tempDate), format, showTime, localeDatas, weekOffset),
+          showPanel: false
         });
-      }
-
-      if (texts[1].trim().length === 0) {
-        date.endDate = null;
+      } else {
         this.setState({
-          date: date
+          showPanel: false,
+          isFocus: false
         });
       }
     }
   }, {
     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({
@@ -414,59 +397,45 @@ var BasePicker = /*#__PURE__*/function (_Component) {
       }
 
       if (tar !== this.input && tar !== this.rInput) {
-        var texts = this.state.texts;
-
-        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();
-        });
+        this.timeCancel();
       }
+
+      this.callback();
     }
   }, {
     key: "_input",
-    value: function _input(text, _ref, placeholder) {
-      var _this4 = this;
+    value: function _input(text) {
+      var _this5 = this;
 
-      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;
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'input';
+
+      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", {
         type: "text",
         ref: function ref(el) {
-          _this4[_ref] = el;
+          _this5[_ref] = el;
         },
         placeholder: placeholder,
         className: disabled ? 'disabled' : '',
         disabled: disabled,
-        readOnly: hourStep || minuteStep || secondStep || inputReadOnly ? 'readOnly' : false,
         onChange: function onChange(e) {
-          _ref === 'input' ? texts[0] = e.target.value : texts[1] = e.target.value;
+          (0, _constants.isVaildDate)(new Date(e.target.value)) && type === 'date' && _onChange2(new Date(e.target.value));
 
-          _this4.setState({
-            texts: texts
-          }, function () {
-            _this4.inputChangeEvent();
+          _this5.setState({
+            text: e.target.value
           });
         },
         onFocus: function onFocus(e) {
-          _this4.setState({
+          _this5.setState({
             showPanel: true,
             isFocus: true
           });
 
-          _this4.calcPanelPos(_this4.inputRoot.current.getBoundingClientRect());
+          _this5.calcPanelPos(_this5.inputRoot.getBoundingClientRect());
         },
         value: text
       });
@@ -474,18 +443,15 @@ var BasePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "_clear",
     value: function _clear() {
-      var _this5 = this;
+      var onChange = this.props.onChange;
 
-      var disabled = this.props.disabled;
-      !disabled && this.setState({
-        date: {
-          startDate: null,
-          endDate: null
-        },
+      if (onChange) {
+        onChange(null);
+      }
+
+      this.setState({
         texts: ['', ''],
         isFocus: false
-      }, function () {
-        _this5.callback();
       });
     }
   }, {
@@ -493,16 +459,9 @@ var BasePicker = /*#__PURE__*/function (_Component) {
     value: function _icon() {
       var _this6 = this;
 
-      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 ? /*#__PURE__*/_react["default"].createElement("span", {
+      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", {
         className: iconCls,
         onClick: this._clear.bind(this)
       }) : /*#__PURE__*/_react["default"].createElement("span", {
@@ -510,7 +469,7 @@ var BasePicker = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           if (_this6.props.disabled) return;
 
-          _this6.calcPanelPos(_this6.inputRoot.current.getBoundingClientRect());
+          _this6.calcPanelPos(_this6.inputRoot.getBoundingClientRect());
 
           _this6.setState({
             showPanel: true,
@@ -522,117 +481,73 @@ var BasePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderRangeInput",
     value: function renderRangeInput() {
-      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 _this$props9 = this.props,
+          localeDatas = _this$props9.localeDatas,
+          disabled = _this$props9.disabled,
+          showTime = _this$props9.showTime;
 
-      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');
+      var _cls = (0, _classnames["default"])('hi-datepicker__input', 'hi-datepicker__input--range', showTime && 'hi-datepicker__input--range-time', disabled && 'hi-datepicker__input--disabled');
 
       return /*#__PURE__*/_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), /*#__PURE__*/_react["default"].createElement("span", {
-        className: "hi-datepicker__input--connection"
-      }, localeDatas.datePicker.to), this._input(this.state.texts[1], 'rInput', this.state.rightPlaceholder), this._icon());
+        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());
     }
   }, {
     key: "renderNormalInput",
     value: function renderNormalInput() {
-      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 _this$props10 = this.props,
+          disabled = _this$props10.disabled,
+          showTime = _this$props10.showTime;
 
-      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');
+      var _cls = (0, _classnames["default"])('hi-datepicker__input', 'hi-datepicker__input--normal', disabled && 'hi-datepicker__input--disabled', showTime && 'hi-datepicker__input--middle');
 
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _cls,
-        style: {
-          width: width
-        },
-        onMouseEnter: function onMouseEnter() {
-          _this8.setState({
-            isFocus: true
-          });
-        },
-        onMouseLeave: function onMouseLeave() {
-          _this8.setState({
-            isFocus: false
-          });
-        }
+        className: _cls
       }, this._input(this.state.texts[0], 'input', this.state.leftPlaceholder), this._icon());
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props10 = this.props,
-          type = _this$props10.type,
-          showTime = _this$props10.showTime,
-          width = _this$props10.width;
+      var _this7 = this;
+
+      var _this$props11 = this.props,
+          type = _this$props11.type,
+          showTime = _this$props11.showTime;
       return /*#__PURE__*/_react["default"].createElement("span", {
-        ref: this.inputRoot,
-        className: "hi-datepicker__input-root",
-        style: {
-          width: width
-        }
+        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"], {
         clickOutSide: this.clickOutSide.bind(this),
         showTime: showTime
       }, this.initPanel(this.state, this.props)) : null);
     }
   }]);
+
   return BasePicker;
 }(_react.Component);
 
-BasePicker.propTypes = {
+_defineProperty(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.isValid)(val.start);
+      var _start = (0, _dateUtil.dateFormat)(val.start);
 
-      var _end = (0, _dateUtil.isValid)(val.end);
+      var _end = (0, _dateUtil.dateFormat)(val.end);
 
-      if (!_start || !_end) {
+      if (_start === 'Invalid Date' || _end === 'Invalid Date') {
         return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Validation failed. start or end is an invalid date."));
       }
     } else {
-      if (!(0, _dateUtil.isValid)(val)) {
+      if ((0, _dateUtil.dateFormat)(val) === 'Invalid Date') {
         return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Validation failed. value is an invalid data."));
       }
     }
@@ -649,17 +564,16 @@ 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."));
     }
-  },
-  clearable: _propTypes["default"].bool
-};
-BasePicker.defaultProps = {
+  }
+});
+
+_defineProperty(BasePicker, "defaultProps", {
   type: 'date',
   disabled: false,
   showWeekNumber: true,
   weekOffset: 0,
-  timeInterval: 240,
-  clearable: true,
-  onSelect: noop
-};
+  timeInterval: 240
+});
+
 var _default = BasePicker;
 exports["default"] = _default;