@hipay/hipay-material-ui 2.0.0-beta.52 → 2.0.0-beta.54

package/HiDatePicker/HiDateRangePicker.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -23,8 +23,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -37,8 +35,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
-var _helpers = require("../utils/helpers");
-
 var _Caption = _interopRequireDefault(require("./Caption"));
 
 var _Overlay = _interopRequireDefault(require("./Overlays/Overlay"));
@@ -57,6 +53,10 @@ var _HiForm = require("../HiForm");
 
 var _stylesheet = _interopRequireDefault(require("./stylesheet"));
 
+var _moment2 = _interopRequireDefault(require("moment"));
+
+var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
+
 var HiDateRangePicker =
 /*#__PURE__*/
 function (_React$Component) {
@@ -68,399 +68,287 @@ function (_React$Component) {
     (0, _classCallCheck2.default)(this, HiDateRangePicker);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDateRangePicker).call(this));
 
-    _this.handleInputChange = function (inputName) {
-      return function (event) {
-        _this.event = event;
+    _this.handleDayChange = function (name, day) {
+      if (day) {
+        // if time disabled, focus TO input
+        // else focus current input
+        if (!_this.props.enableTime) {
+          if (day instanceof Date) {
+            if (name === 'from' && _this.toInput) {
+              _this.toInput.getInput().focus();
+            }
+          }
+        } else {
+          _this.timeout = setTimeout(function () {
+            if (_this["".concat(name, "Input")].getInput()) {
+              _this["".concat(name, "Input")].getInput().focus();
+            }
+          }, 10);
+        }
 
-        _this.props.onChange(inputName, event.target.value);
-      };
+        if (_this.props.onChange) {
+          _this.handleChange(name, day);
+        }
+
+        if (_this.props.enableTime) {
+          _this.openPanel('time');
+        }
+      }
     };
 
-    _this.handleDayPickerFocus = function (name) {
-      return function () {
-        _this.setState({
-          focusedInput: name
-        });
+    _this.handleInputChange = function (inputName) {
+      return function (event) {
+        _this.handleChange(inputName, event.target.value);
       };
     };
 
-    _this.handleDayPickerBlur = function (name) {
-      return function () {
-        _this.setState({
-          focusedInput: ''
-        });
+    _this.onDayToClick = function (day) {
+      _this.handleDayChange('to', day);
 
-        if (_this.props.onBlur) {
-          _this.props.onBlur(name);
-        }
-      };
+      document.activeElement.blur();
     };
 
-    _this.state = {
-      fromCurrentMonth: props.from ? props.from : new Date(),
-      toCurrentMonth: props.to ? props.to : new Date(),
-      focusedInput: ''
-    };
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleDayChange = _this.handleDayChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleDayChangeFrom = _this.handleDayChangeFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleDayChangeTo = _this.handleDayChangeTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleCurrentMonthChange = _this.handleCurrentMonthChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleCurrentMonthChangeFrom = _this.handleCurrentMonthChangeFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleCurrentMonthChangeTo = _this.handleCurrentMonthChangeTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleTimeChange = _this.handleTimeChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleCalendarClick = _this.handleCalendarClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleCalendarClickFrom = _this.handleCalendarClickFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleCalendarClickTo = _this.handleCalendarClickTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClockClick = _this.handleClockClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClockClickFrom = _this.handleClockClickFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClockClickTo = _this.handleClockClickTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleMonthClick = _this.handleMonthClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleMonthClickFrom = _this.handleMonthClickFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleMonthClickTo = _this.handleMonthClickTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleYearClick = _this.handleYearClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleYearClickFrom = _this.handleYearClickFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleYearClickTo = _this.handleYearClickTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleDayPickerFocus = _this.handleDayPickerFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleDayPickerBlur = _this.handleDayPickerBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleInputChange = _this.handleInputChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.openPanel = _this.openPanel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderCaption = _this.renderCaption.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderCaptionFrom = _this.renderCaptionFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderCaptionTo = _this.renderCaptionTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderNavBar = _this.renderNavBar.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderNavBarFrom = _this.renderNavBarFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderNavBarTo = _this.renderNavBarTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderOverlay = _this.renderOverlay.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderOverlayFrom = _this.renderOverlayFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderOverlayTo = _this.renderOverlayTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderMonthPickerOverlay = _this.renderMonthPickerOverlay.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderTimePickerOverlay = _this.renderTimePickerOverlay.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.renderYearPickerOverlay = _this.renderYearPickerOverlay.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    return _this;
-  }
+    _this.handleTimeChange = function (name, date, precision) {
+      _this.handleChange(name, date);
 
-  (0, _createClass2.default)(HiDateRangePicker, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
-      // Focus From input on enabling
-      if (prevProps.disabled === true && this.props.disabled === false) {
-        this.timeout = setTimeout(function () {
-          if (_this2.fromInput.getInput()) {
-            _this2.fromInput.getInput().focus();
-          }
-        }, 0);
+      if (name === 'from' && precision === 'minute') {
+        _this.fromInput.hideDayPicker();
+
+        _this.toInput.getInput().focus();
+
+        _this.toInput.showDayPicker();
+
+        _this.openPanel('calendar');
+      } else if (name === 'to' && precision === 'minute') {
+        _this.toInput.hideDayPicker();
+
+        document.activeElement.blur();
       }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      clearTimeout(this.timeout);
-    }
-  }, {
-    key: "handleDayChange",
-    value: function handleDayChange(name, day, modifiers) {
-      var _this3 = this;
+    };
 
-      if (day) {
-        // if time disabled, focus TO input
-        // else focus current input
-        if (!this.props.enableTime) {
-          if (day instanceof Date) {
-            if (name === 'from' && this.toInput) {
-              this.toInput.getInput().focus();
-            } else if (name === 'to') {
-              if (typeof this.event === 'undefined' || this.event && this.event.type !== 'change') {
-                // trigger blur only if user clicks on date into calendar
-                // else keep focus to see day selection into calendar
-                document.activeElement.blur();
-              }
-
-              delete this.event;
-            }
-          }
+    _this.handleChange = function (name, day) {
+      var translations = _this.props.translations;
+      var date = undefined;
+      var error = undefined;
+      var now = new Date();
+      var _this$props = _this.props,
+          minimumDate = _this$props.minimumDate,
+          disableFutureDays = _this$props.disableFutureDays,
+          format = _this$props.format;
+
+      if (day instanceof Date) {
+        date = day;
+      } else if (day) {
+        var parsedValue = (0, _moment2.default)(day, _this.props.format, true);
+
+        if (parsedValue.isValid()) {
+          date = parsedValue.toDate();
         } else {
-          this.timeout = setTimeout(function () {
-            if (_this3["".concat(name, "Input")].getInput()) {
-              _this3["".concat(name, "Input")].getInput().focus();
-            }
-          }, 10);
+          error = translations.invalid_format;
         }
+      }
 
-        if (this.props.onChange) {
-          // Keep Time if set
-          if (this.props.enableTime) {
-            if (this.props[name]) {
-              day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
-            } else {
-              day.setHours(0, 0);
-            }
-          }
+      if (date) {
+        var comparativeDate = name === 'to' ? (0, _moment2.default)(_this.props.from) : (0, _moment2.default)(_this.props.to);
 
-          this.props.onChange(name, day);
+        if (name === 'to' && comparativeDate > (0, _moment2.default)(date) || name === 'from' && comparativeDate < (0, _moment2.default)(date)) {
+          error = translations.to_superior_from;
+        } else if (date < minimumDate) {
+          error = translations.date_inferior_min_date.replace("%s", (0, _moment2.default)(minimumDate).format(format));
+        } else if (disableFutureDays && date > now) {
+          error = translations.date_superior_max_date.replace("%s", (0, _moment2.default)().format(format));
         }
 
-        if (this.props.enableTime) {
-          this.openPanel(name, 'time');
+        if (!_this.props.enableTime) {
+          if (name === 'from') {
+            date.setHours(0, 0);
+          } else {
+            date.setHours(23, 59);
+          }
         }
       }
-    }
-  }, {
-    key: "handleDayChangeFrom",
-    value: function handleDayChangeFrom(day, modifiers) {
-      this.handleDayChange('from', day, modifiers);
-    }
-  }, {
-    key: "handleDayChangeTo",
-    value: function handleDayChangeTo(day, modifiers) {
-      this.handleDayChange('to', day, modifiers);
-    }
-  }, {
-    key: "handleCurrentMonthChange",
-    value: function handleCurrentMonthChange(name, day) {
-      var _this$setState;
 
-      this.setState((_this$setState = {}, (0, _defineProperty2.default)(_this$setState, "".concat(name, "CurrentMonth"), day), (0, _defineProperty2.default)(_this$setState, "".concat(name, "OpenedPanel"), 'calendar'), _this$setState));
-    }
-  }, {
-    key: "handleCurrentMonthChangeFrom",
-    value: function handleCurrentMonthChangeFrom(day) {
-      this.handleCurrentMonthChange('from', day);
-    }
-  }, {
-    key: "handleCurrentMonthChangeTo",
-    value: function handleCurrentMonthChangeTo(day) {
-      this.handleCurrentMonthChange('to', day);
-    }
-  }, {
-    key: "handleCalendarClick",
-    value: function handleCalendarClick(name) {
-      this.openPanel(name, 'calendar');
-    }
-  }, {
-    key: "handleCalendarClickFrom",
-    value: function handleCalendarClickFrom() {
-      this.handleCalendarClick('from');
-    }
-  }, {
-    key: "handleCalendarClickTo",
-    value: function handleCalendarClickTo() {
-      this.handleCalendarClick('to');
-    }
-  }, {
-    key: "handleClockClick",
-    value: function handleClockClick(name) {
-      this.openPanel(name, 'time');
-    }
-  }, {
-    key: "handleClockClickFrom",
-    value: function handleClockClickFrom() {
-      this.handleClockClick('from');
-    }
-  }, {
-    key: "handleClockClickTo",
-    value: function handleClockClickTo() {
-      this.handleClockClick('to');
-    }
-  }, {
-    key: "handleMonthClick",
-    value: function handleMonthClick(name) {
-      this.openPanel(name, 'months');
-    }
-  }, {
-    key: "handleMonthClickFrom",
-    value: function handleMonthClickFrom() {
-      this.handleMonthClick('from');
-    }
-  }, {
-    key: "handleMonthClickTo",
-    value: function handleMonthClickTo() {
-      this.handleMonthClick('to');
-    }
-  }, {
-    key: "handleYearClick",
-    value: function handleYearClick(name) {
-      this.openPanel(name, 'years');
-    }
-  }, {
-    key: "handleYearClickFrom",
-    value: function handleYearClickFrom() {
-      this.handleYearClick('from');
-    }
-  }, {
-    key: "handleYearClickTo",
-    value: function handleYearClickTo() {
-      this.handleYearClick('to');
-    }
-  }, {
-    key: "handleTimeChange",
-    value: function handleTimeChange(name, date, precision) {
-      this.props.onChange(name, date);
+      _this.props.onChange(name, date);
 
-      if (name === 'from' && precision === 'minute') {
-        this.fromInput.hideDayPicker();
-        this.toInput.getInput().focus();
-        this.toInput.showDayPicker();
-      } else if (name === 'to' && precision === 'minute') {
-        this.toInput.hideDayPicker();
-        document.activeElement.blur();
+      _this.props.onChange("".concat(name, "Error"), error);
+    };
+
+    _this.handleCurrentMonthChange = function (day) {
+      _this.setState({
+        currentMonth: day,
+        openedPanel: 'calendar'
+      });
+    };
+
+    _this.handleDayPickerFocus = function (name) {
+      _this.setState({
+        focusedInput: name
+      });
+    };
+
+    _this.handleDayPickerBlur = function (name) {
+      _this.setState({
+        focusedInput: ''
+      });
+
+      if (_this.props.onBlur) {
+        _this.props.onBlur(name);
       }
-    }
-  }, {
-    key: "handleReset",
-    value: function handleReset(name) {
-      var _this4 = this;
-
-      this.handleCurrentMonthChange(name, new Date());
-      this.timeout = setTimeout(function () {
-        if (_this4.props.onReset) {
-          _this4.props.onReset(name);
+
+      _this.timeout = setTimeout(function () {
+        if (!['from', 'to'].includes(_this.state.focusedInput)) {
+          _this.setState({
+            openedPanel: 'calendar'
+          });
         }
-      }, 0);
-    }
-  }, {
-    key: "openPanel",
-    value: function openPanel(name, panel) {
-      this.setState((0, _defineProperty2.default)({}, "".concat(name, "OpenedPanel"), panel));
-    }
-  }, {
-    key: "renderCaption",
-    value: function renderCaption(name, propsCaption) {
+      }, 100);
+    };
+
+    _this.handleReset = function (name) {
+      _this.handleChange(name, undefined);
+
+      _this.setState({
+        keyFrom: _this.state.keyFrom === 1 ? 2 : 1,
+        keyTo: _this.state.keyTo === 1 ? 2 : 1
+      });
+    };
+
+    _this.openPanel = function (panel) {
+      _this.setState({
+        openedPanel: panel
+      });
+    };
+
+    _this.renderCaption = function (propsCaption) {
       return _react.default.createElement(_Caption.default, (0, _extends2.default)({
-        onMonthClick: this["handleMonthClick".concat((0, _helpers.capitalize)(name))],
-        onYearClick: this["handleYearClick".concat((0, _helpers.capitalize)(name))]
+        onMonthClick: function onMonthClick() {
+          return _this.openPanel('months');
+        },
+        onYearClick: function onYearClick() {
+          return _this.openPanel('years');
+        }
       }, propsCaption));
-    }
-  }, {
-    key: "renderCaptionFrom",
-    value: function renderCaptionFrom(propsCaption) {
-      return this.renderCaption('from', propsCaption);
-    }
-  }, {
-    key: "renderCaptionTo",
-    value: function renderCaptionTo(propsCaption) {
-      return this.renderCaption('to', propsCaption);
-    }
-  }, {
-    key: "renderNavBar",
-    value: function renderNavBar(name, propsNavBar) {
+    };
+
+    _this.renderNavBar = function (propsNavBar) {
       return _react.default.createElement(_NavBar.default, (0, _extends2.default)({
-        showClockButton: this.props.enableTime,
-        onClockClick: this["handleClockClick".concat((0, _helpers.capitalize)(name))]
+        showClockButton: _this.props.enableTime,
+        onClockClick: function onClockClick() {
+          return _this.openPanel('time');
+        }
       }, propsNavBar));
-    }
-  }, {
-    key: "renderNavBarFrom",
-    value: function renderNavBarFrom(propsNavBar) {
-      return this.renderNavBar('from', propsNavBar);
-    }
-  }, {
-    key: "renderNavBarTo",
-    value: function renderNavBarTo(propsNavBar) {
-      return this.renderNavBar('to', propsNavBar);
-    }
-  }, {
-    key: "renderOverlay",
-    value: function renderOverlay(name, propsOverlay, staticPosition) {
+    };
+
+    _this.renderOverlay = function (name, propsOverlay, staticPosition) {
       var rangeOverlayProps = (0, _extends2.default)({}, propsOverlay, {
         side: name,
         staticPosition: staticPosition
       });
 
-      switch (this.state["".concat(name, "OpenedPanel")]) {
+      switch (_this.state['openedPanel']) {
         case 'time':
-          return this.renderTimePickerOverlay(name, rangeOverlayProps);
+          return _this.renderTimePickerOverlay(name, rangeOverlayProps);
 
         case 'months':
-          return this.renderMonthPickerOverlay(name, rangeOverlayProps);
+          return _this.renderMonthPickerOverlay(name, rangeOverlayProps);
 
         case 'years':
-          return this.renderYearPickerOverlay(name, rangeOverlayProps);
+          return _this.renderYearPickerOverlay(name, rangeOverlayProps);
 
         case 'calendar':
-        default:
           return _react.default.createElement(_Overlay.default, rangeOverlayProps);
       }
-    }
-  }, {
-    key: "renderOverlayFrom",
-    value: function renderOverlayFrom(propsOverlay) {
-      return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
-    }
-  }, {
-    key: "renderOverlayTo",
-    value: function renderOverlayTo(propsOverlay) {
-      return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
-    }
-  }, {
-    key: "renderMonthPickerOverlay",
-    value: function renderMonthPickerOverlay(name, propsOverlay) {
+    };
+
+    _this.renderOverlayFrom = function (propsOverlay) {
+      return _this.renderOverlay('from', propsOverlay, _this.props.staticPosition);
+    };
+
+    _this.renderOverlayTo = function (propsOverlay) {
+      return _this.renderOverlay('to', propsOverlay, _this.props.staticPosition);
+    };
+
+    _this.renderMonthPickerOverlay = function (name, propsOverlay) {
       var monthPickerProps = {
-        value: this.state["".concat(name, "CurrentMonth")],
-        onChange: this["handleCurrentMonthChange".concat((0, _helpers.capitalize)(name))]
+        value: _this.state['currentMonth'],
+        onChange: _this.handleCurrentMonthChange
       };
       return _react.default.createElement(_MonthPickerOverlay.default, (0, _extends2.default)({
         key: "".concat(name, "-month-picker-overlay")
       }, monthPickerProps, propsOverlay));
-    }
-  }, {
-    key: "renderTimePickerOverlay",
-    value: function renderTimePickerOverlay(name, propsOverlay) {
-      var _this5 = this;
+    };
 
+    _this.renderTimePickerOverlay = function (name, propsOverlay) {
       var timePickerProps = {
-        value: this.props[name],
+        value: _this.props[name],
         onChange: function onChange(date, precision) {
-          return _this5.handleTimeChange(name, date, precision);
+          return _this.handleTimeChange(name, date, precision);
         },
-        onCalendarClick: this["handleCalendarClick".concat((0, _helpers.capitalize)(name))]
+        onCalendarClick: function onCalendarClick() {
+          return _this.openPanel('calendar');
+        }
       };
       return _react.default.createElement(_TimePickerOverlay.default, (0, _extends2.default)({
         key: "".concat(name, "-time-picker-overlay")
       }, timePickerProps, propsOverlay));
-    }
-  }, {
-    key: "renderYearPickerOverlay",
-    value: function renderYearPickerOverlay(name, propsOverlay) {
+    };
+
+    _this.renderYearPickerOverlay = function (name, propsOverlay) {
       var yearPickerProps = {
-        value: this.state["".concat(name, "CurrentMonth")],
-        onChange: this["handleCurrentMonthChange".concat((0, _helpers.capitalize)(name))],
-        disabledFutureDays: this.props.disableFutureDays,
-        disabledPastDays: this.props.disablePastDays
+        value: _this.state['currentMonth'],
+        onChange: _this.handleCurrentMonthChange,
+        disabledFutureDays: _this.props.disableFutureDays
       };
       return _react.default.createElement(_YearPickerOverlay.default, (0, _extends2.default)({
         key: "".concat(name, "-year-picker-overlay")
       }, yearPickerProps, propsOverlay));
+    };
+
+    _this.state = {
+      currentMonth: new Date(),
+      focusedInput: '',
+      openedPanel: 'calendar',
+      keyFrom: 1,
+      keyTo: 1
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiDateRangePicker, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.timeout);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this,
+      var _this2 = this,
           _classNames;
 
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          disabledDays = _this$props.disabledDays,
-          disablePastDays = _this$props.disablePastDays,
-          disableFutureDays = _this$props.disableFutureDays,
-          enableTime = _this$props.enableTime,
-          labelFrom = _this$props.labelFrom,
-          labelTo = _this$props.labelTo,
-          locale = _this$props.locale,
-          format = _this$props.format,
-          from = _this$props.from,
-          minimumDate = _this$props.minimumDate,
-          onReset = _this$props.onReset,
-          to = _this$props.to,
-          translations = _this$props.translations,
-          id = _this$props.id,
-          staticPosition = _this$props.staticPosition,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "minimumDate", "onReset", "to", "translations", "id", "staticPosition"]);
-      var _this$state = this.state,
-          fromCurrentMonth = _this$state.fromCurrentMonth,
-          toCurrentMonth = _this$state.toCurrentMonth;
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          disabled = _this$props2.disabled,
+          disabledDays = _this$props2.disabledDays,
+          disableFutureDays = _this$props2.disableFutureDays,
+          enableTime = _this$props2.enableTime,
+          labelFrom = _this$props2.labelFrom,
+          labelTo = _this$props2.labelTo,
+          locale = _this$props2.locale,
+          format = _this$props2.format,
+          from = _this$props2.from,
+          fromError = _this$props2.fromError,
+          minimumDate = _this$props2.minimumDate,
+          onReset = _this$props2.onReset,
+          to = _this$props2.to,
+          toError = _this$props2.toError,
+          translations = _this$props2.translations,
+          id = _this$props2.id,
+          staticPosition = _this$props2.staticPosition,
+          errorText = _this$props2.errorText,
+          hasSelector = _this$props2.hasSelector,
+          helperIcon = _this$props2.helperIcon,
+          helperText = _this$props2.helperText,
+          props = (0, _objectWithoutProperties2.default)(_this$props2, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText"]);
       var now = new Date();
       var modifiers = {
         start: from,
@@ -505,92 +393,77 @@ function (_React$Component) {
         selectedDays: selectedDays,
         todayButton: translations.today,
         weekdayElement: _Weekday.default
-      }, props); // Build Props for the From DatePicker
-      // Disable days after 'to' date if define
-
-      var after;
-
-      if (to instanceof Date && disableFutureDays) {
-        after = to < now ? now : to;
-      } else if (to instanceof Date) {
-        after = to;
-      } else if (disableFutureDays) {
-        after = now;
-      }
-
-      var disabledDaysFrom = (0, _extends2.default)({}, disablePastDays && {
-        before: now
-      }, (to || disableFutureDays) && {
-        after: after
-      }, disabledDays);
+      }, props);
       var fromDayPickerProps = (0, _extends2.default)({}, dayPickerProps, {
-        onTodayButtonClick: this.handleCurrentMonthChangeFrom,
-        NavBarElement: this.renderNavBarFrom,
-        captionElement: this.renderCaptionFrom,
-        disabledDays: disabledDaysFrom,
-        month: fromCurrentMonth,
-        modifiers: (0, _extends2.default)({}, modifiers, {
-          disabled: disabledDaysFrom
-        })
-      }); // Build Props for the To DatePicker
-      // Disable days before 'from' date if define
-
-      var before;
-
-      if (from instanceof Date && disablePastDays) {
-        before = from < now ? now : from;
-      } else if (from instanceof Date) {
-        before = from;
-      } else if (disablePastDays) {
-        before = now;
-      }
-
-      var disabledDaysTo = (0, _extends2.default)({}, (from || disablePastDays) && {
-        before: before
-      }, disableFutureDays && {
-        after: now
-      }, disabledDays);
+        onTodayButtonClick: this.handleCurrentMonthChange,
+        navbarElement: this.renderNavBar,
+        captionElement: this.renderCaption,
+        disabledDays: (0, _extends2.default)({
+          before: minimumDate
+        }, disableFutureDays && {
+          after: now
+        }, to && {
+          after: to
+        }),
+        month: this.state.currentMonth,
+        modifiers: (0, _extends2.default)({}, modifiers)
+      });
       var toDayPickerProps = (0, _extends2.default)({}, dayPickerProps, {
-        onTodayButtonClick: this.handleCurrentMonthChangeTo,
-        NavBarElement: this.renderNavBarTo,
-        captionElement: this.renderCaptionTo,
-        disabledDays: disabledDaysTo,
-        month: toCurrentMonth,
-        modifiers: (0, _extends2.default)({}, modifiers, {
-          disabled: disabledDaysTo
-        })
+        onTodayButtonClick: this.handleCurrentMonthChange,
+        navbarElement: this.renderNavBar,
+        onDayClick: this.onDayToClick,
+        captionElement: this.renderCaption,
+        disabledDays: (0, _extends2.default)({
+          before: minimumDate
+        }, disableFutureDays && {
+          after: now
+        }, from && {
+          before: from
+        }),
+        month: this.state.currentMonth,
+        modifiers: (0, _extends2.default)({}, modifiers)
       }); // From & To InputProps
 
       var fromInputProps = (0, _extends2.default)({}, onReset && {
         onReset: function onReset() {
-          return _this6.handleReset('from');
+          return _this2.handleReset('from');
         }
-      }, props, labelFrom && {
+      }, props, fromError && {
+        error: true
+      }, labelFrom && {
         label: labelFrom
       }, {
         id: "".concat(id, "-from"),
-        onChange: this.handleInputChange('from')
+        onChange: this.handleInputChange('from'),
+        disabled: disabled
       });
       var toInputProps = (0, _extends2.default)({}, onReset && {
         onReset: function onReset() {
-          return _this6.handleReset('to');
+          return _this2.handleReset('to');
         }
-      }, props, labelTo && {
+      }, props, toError && {
+        error: true
+      }, labelTo && {
         label: labelTo
       }, {
         id: "".concat(id, "-to"),
-        onChange: this.handleInputChange('to')
+        onChange: this.handleInputChange('to'),
+        disabled: disabled
       });
       var toClass = (0, _classnames.default)(classes.toInput, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'), (0, _defineProperty2.default)(_classNames, classes.right4, staticPosition === true && this.state.focusedInput === 'from'), _classNames));
-      return _react.default.createElement("div", {
+
+      var content = _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.root, classes.rangePickerContainer)
       }, _react.default.createElement("div", {
         className: classes.fromInput,
-        onFocus: this.handleDayPickerFocus('from'),
-        onBlur: this.handleDayPickerBlur('from')
+        onFocus: function onFocus() {
+          return _this2.handleDayPickerFocus('from');
+        } // onBlur={() => this.handleDayPickerBlur('from')}
+
       }, _react.default.createElement("div", null, _react.default.createElement(_DayPickerInput.default, {
+        key: this.state.keyFrom,
         ref: function ref(el) {
-          _this6.fromInput = el;
+          _this2.fromInput = el;
         },
         value: from,
         hideOnDayClick: false,
@@ -601,15 +474,22 @@ function (_React$Component) {
         format: enableTime ? "".concat(format, " HH:mm") : format,
         formatDate: _moment.default.formatDate,
         parseDate: _moment.default.parseDate,
-        onDayChange: this.handleDayChangeFrom,
+        onDayChange: function onDayChange(day) {
+          return _this2.handleDayChange('from', day);
+        },
         placeholder: ''
       }))), _react.default.createElement("div", {
         className: toClass,
-        onFocus: this.handleDayPickerFocus('to'),
-        onBlur: this.handleDayPickerBlur('to')
+        onFocus: function onFocus() {
+          return _this2.handleDayPickerFocus('to');
+        },
+        onBlur: function onBlur() {
+          return _this2.handleDayPickerBlur('to');
+        }
       }, _react.default.createElement(_DayPickerInput.default, {
+        key: this.state.keyTo,
         ref: function ref(el) {
-          _this6.toInput = el;
+          _this2.toInput = el;
         },
         value: to,
         hideOnDayClick: false,
@@ -619,10 +499,23 @@ function (_React$Component) {
         inputProps: toInputProps,
         format: enableTime ? "".concat(format, " HH:mm") : format,
         formatDate: _moment.default.formatDate,
-        parseDate: _moment.default.parseDate,
-        onDayChange: this.handleDayChangeTo,
+        parseDate: _moment.default.parseDate //onDayChange={(day) => this.handleDayChange('to', day)}
+        ,
         placeholder: ''
       })));
+
+      if (!hasSelector) {
+        content = _react.default.createElement(_HiFormControl.default, {
+          disabled: disabled,
+          helperIcon: helperIcon,
+          helperText: helperText,
+          errorText: errorText,
+          error: fromError || toError,
+          label: ' '
+        }, content);
+      }
+
+      return content;
     }
   }]);
   return HiDateRangePicker;
@@ -630,22 +523,26 @@ function (_React$Component) {
 
 HiDateRangePicker.defaultProps = {
   disabledDays: [],
-  disablePastDays: false,
-  disableFutureDays: false,
+  disableFutureDays: true,
   staticPosition: false,
   enableTime: false,
-  format: 'YYYY-DD-MM',
+  hasSelector: false,
+  format: 'YYYY-MM-DD',
   labelFrom: 'Start',
   labelTo: 'End',
   locale: 'fr-FR',
-  minimumDate: new Date(2013, 4, 1),
-  // by default 1 May 2013
   translations: {
     today: 'today',
     hour: 'Hour',
     minute: 'Minute',
     month: 'Month',
-    year: 'Year'
+    year: 'Year',
+    invalid_format: 'The date format is not valid',
+    to_superior_from: 'Date from cannot be greater than date to',
+    missing_date_from: 'Missing date from',
+    missing_date_to: 'Missing date to',
+    date_superior_max_date: 'Date from cannot be greater than %s',
+    date_inferior_min_date: 'Date from cannot be before than %s'
   }
 };
 HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -659,25 +556,20 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabled: _propTypes.default.bool,
 
-  /**
-   * Définie les jours non sélectionnables
-   */
-  disabledDays: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object, _propTypes.default.instanceOf(Date)]),
-
   /**
    * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
    */
   disableFutureDays: _propTypes.default.bool,
 
   /**
-   * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+   * Ajoute la gestion de l'heure
    */
-  disablePastDays: _propTypes.default.bool,
+  enableTime: _propTypes.default.bool,
 
   /**
-   * Ajoute la gestion de l'heure
+   * Texte de l'erreur
    */
-  enableTime: _propTypes.default.bool,
+  errorText: _propTypes.default.string,
 
   /**
    * Format des dates affichées
@@ -687,7 +579,29 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date de début sélectionnée
    */
-  from: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
+  from: _propTypes.default.instanceOf(Date),
+  //from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+  /**
+   * Erreur sur date from
+   */
+  fromError: _propTypes.default.bool,
+
+  /**
+   * @ignore
+   * Si true, on n'enveloppe pas le composant avec un HiFormControl
+   */
+  hasSelector: _propTypes.default.bool,
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: _propTypes.default.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: _propTypes.default.string,
 
   /**
    * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
@@ -712,7 +626,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: _propTypes.default.instanceOf(Date),
+  minimumDate: _propTypes.default.instanceOf(Date).isRequired,
 
   /**
    * Callback à la sélection d'une date
@@ -725,7 +639,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    * @param {string} nom du champs
    * @param {string} nouvelle valeur du champs
    */
-  onChange: _propTypes.default.func,
+  onChange: _propTypes.default.func.isRequired,
 
   /**
    * Callback au reset de l'input
@@ -741,7 +655,12 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date de fin sélectionnée
    */
-  to: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
+  to: _propTypes.default.instanceOf(Date),
+
+  /**
+   * Erreur sur date to
+   */
+  toError: _propTypes.default.bool,
 
   /**
    * Traductions