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

package/es/HiDatePicker/HiDateRangePicker.js

@@ -7,7 +7,6 @@ import MomentLocaleUtils from 'react-day-picker/moment';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
-import { capitalize } from '../utils/helpers';
 import Caption from './Caption';
 import Overlay from './Overlays/Overlay';
 import TimePickerOverlay from './Overlays/TimePickerOverlay';
@@ -17,333 +16,252 @@ import NavBar from './NavBar';
 import Weekday from './Weekday';
 import { HiTextField } from '../HiForm';
 import styles from './stylesheet';
+import moment from 'moment';
+import HiFormControl from '../HiForm/HiFormControl';
 
 class HiDateRangePicker extends React.Component {
   constructor(props) {
     super();
 
-    this.handleInputChange = inputName => event => {
-      this.event = event;
-      this.props.onChange(inputName, event.target.value);
-    };
+    this.handleDayChange = (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(() => {
+            if (this[`${name}Input`].getInput()) {
+              this[`${name}Input`].getInput().focus();
+            }
+          }, 10);
+        }
 
-    this.handleDayPickerFocus = name => () => {
-      this.setState({
-        focusedInput: name
-      });
+        if (this.props.onChange) {
+          this.handleChange(name, day);
+        }
+
+        if (this.props.enableTime) {
+          this.openPanel('time');
+        }
+      }
     };
 
-    this.handleDayPickerBlur = name => () => {
-      this.setState({
-        focusedInput: ''
-      });
+    this.handleInputChange = inputName => event => {
+      this.handleChange(inputName, event.target.value);
+    };
 
-      if (this.props.onBlur) {
-        this.props.onBlur(name);
-      }
+    this.onDayToClick = day => {
+      this.handleDayChange('to', day);
+      document.activeElement.blur();
     };
 
-    this.state = {
-      fromCurrentMonth: props.from ? props.from : new Date(),
-      toCurrentMonth: props.to ? props.to : new Date(),
-      focusedInput: ''
+    this.handleTimeChange = (name, date, precision) => {
+      this.handleChange(name, date);
+
+      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();
+      }
     };
-    this.handleReset = this.handleReset.bind(this);
-    this.handleDayChange = this.handleDayChange.bind(this);
-    this.handleDayChangeFrom = this.handleDayChangeFrom.bind(this);
-    this.handleDayChangeTo = this.handleDayChangeTo.bind(this);
-    this.handleCurrentMonthChange = this.handleCurrentMonthChange.bind(this);
-    this.handleCurrentMonthChangeFrom = this.handleCurrentMonthChangeFrom.bind(this);
-    this.handleCurrentMonthChangeTo = this.handleCurrentMonthChangeTo.bind(this);
-    this.handleTimeChange = this.handleTimeChange.bind(this);
-    this.handleCalendarClick = this.handleCalendarClick.bind(this);
-    this.handleCalendarClickFrom = this.handleCalendarClickFrom.bind(this);
-    this.handleCalendarClickTo = this.handleCalendarClickTo.bind(this);
-    this.handleClockClick = this.handleClockClick.bind(this);
-    this.handleClockClickFrom = this.handleClockClickFrom.bind(this);
-    this.handleClockClickTo = this.handleClockClickTo.bind(this);
-    this.handleMonthClick = this.handleMonthClick.bind(this);
-    this.handleMonthClickFrom = this.handleMonthClickFrom.bind(this);
-    this.handleMonthClickTo = this.handleMonthClickTo.bind(this);
-    this.handleYearClick = this.handleYearClick.bind(this);
-    this.handleYearClickFrom = this.handleYearClickFrom.bind(this);
-    this.handleYearClickTo = this.handleYearClickTo.bind(this);
-    this.handleDayPickerFocus = this.handleDayPickerFocus.bind(this);
-    this.handleDayPickerBlur = this.handleDayPickerBlur.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.openPanel = this.openPanel.bind(this);
-    this.renderCaption = this.renderCaption.bind(this);
-    this.renderCaptionFrom = this.renderCaptionFrom.bind(this);
-    this.renderCaptionTo = this.renderCaptionTo.bind(this);
-    this.renderNavBar = this.renderNavBar.bind(this);
-    this.renderNavBarFrom = this.renderNavBarFrom.bind(this);
-    this.renderNavBarTo = this.renderNavBarTo.bind(this);
-    this.renderOverlay = this.renderOverlay.bind(this);
-    this.renderOverlayFrom = this.renderOverlayFrom.bind(this);
-    this.renderOverlayTo = this.renderOverlayTo.bind(this);
-    this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
-    this.renderTimePickerOverlay = this.renderTimePickerOverlay.bind(this);
-    this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
-  }
 
-  componentDidUpdate(prevProps) {
-    // Focus From input on enabling
-    if (prevProps.disabled === true && this.props.disabled === false) {
-      this.timeout = setTimeout(() => {
-        if (this.fromInput.getInput()) {
-          this.fromInput.getInput().focus();
+    this.handleChange = (name, day) => {
+      const {
+        translations
+      } = this.props;
+      let date = undefined;
+      let error = undefined;
+      let now = new Date();
+      const {
+        minimumDate,
+        disableFutureDays,
+        format
+      } = this.props;
+
+      if (day instanceof Date) {
+        date = day;
+      } else if (day) {
+        let parsedValue = moment(day, this.props.format, true);
+
+        if (parsedValue.isValid()) {
+          date = parsedValue.toDate();
+        } else {
+          error = translations.invalid_format;
         }
-      }, 0);
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-  }
+      }
 
-  handleDayChange(name, day, modifiers) {
-    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();
-            }
+      if (date) {
+        let comparativeDate = name === 'to' ? moment(this.props.from) : moment(this.props.to);
 
-            delete this.event;
-          }
+        if (name === 'to' && comparativeDate > moment(date) || name === 'from' && comparativeDate < moment(date)) {
+          error = translations.to_superior_from;
+        } else if (date < minimumDate) {
+          error = translations.date_inferior_min_date.replace("%s", moment(minimumDate).format(format));
+        } else if (disableFutureDays && date > now) {
+          error = translations.date_superior_max_date.replace("%s", moment().format(format));
         }
-      } else {
-        this.timeout = setTimeout(() => {
-          if (this[`${name}Input`].getInput()) {
-            this[`${name}Input`].getInput().focus();
-          }
-        }, 10);
-      }
 
-      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());
+        if (!this.props.enableTime) {
+          if (name === 'from') {
+            date.setHours(0, 0);
           } else {
-            day.setHours(0, 0);
+            date.setHours(23, 59);
           }
         }
-
-        this.props.onChange(name, day);
       }
 
-      if (this.props.enableTime) {
-        this.openPanel(name, 'time');
-      }
-    }
-  }
-
-  handleDayChangeFrom(day, modifiers) {
-    this.handleDayChange('from', day, modifiers);
-  }
-
-  handleDayChangeTo(day, modifiers) {
-    this.handleDayChange('to', day, modifiers);
-  }
-
-  handleCurrentMonthChange(name, day) {
-    this.setState({
-      [`${name}CurrentMonth`]: day,
-      [`${name}OpenedPanel`]: 'calendar'
-    });
-  }
-
-  handleCurrentMonthChangeFrom(day) {
-    this.handleCurrentMonthChange('from', day);
-  }
-
-  handleCurrentMonthChangeTo(day) {
-    this.handleCurrentMonthChange('to', day);
-  }
-
-  handleCalendarClick(name) {
-    this.openPanel(name, 'calendar');
-  }
-
-  handleCalendarClickFrom() {
-    this.handleCalendarClick('from');
-  }
-
-  handleCalendarClickTo() {
-    this.handleCalendarClick('to');
-  }
-
-  handleClockClick(name) {
-    this.openPanel(name, 'time');
-  }
-
-  handleClockClickFrom() {
-    this.handleClockClick('from');
-  }
-
-  handleClockClickTo() {
-    this.handleClockClick('to');
-  }
-
-  handleMonthClick(name) {
-    this.openPanel(name, 'months');
-  }
-
-  handleMonthClickFrom() {
-    this.handleMonthClick('from');
-  }
-
-  handleMonthClickTo() {
-    this.handleMonthClick('to');
-  }
-
-  handleYearClick(name) {
-    this.openPanel(name, 'years');
-  }
-
-  handleYearClickFrom() {
-    this.handleYearClick('from');
-  }
+      this.props.onChange(name, date);
+      this.props.onChange(`${name}Error`, error);
+    };
 
-  handleYearClickTo() {
-    this.handleYearClick('to');
-  }
+    this.handleCurrentMonthChange = day => {
+      this.setState({
+        currentMonth: day,
+        openedPanel: 'calendar'
+      });
+    };
 
-  handleTimeChange(name, date, precision) {
-    this.props.onChange(name, date);
+    this.handleDayPickerFocus = name => {
+      this.setState({
+        focusedInput: name
+      });
+    };
 
-    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.handleDayPickerBlur = name => {
+      this.setState({
+        focusedInput: ''
+      });
 
-  handleReset(name) {
-    this.handleCurrentMonthChange(name, new Date());
-    this.timeout = setTimeout(() => {
-      if (this.props.onReset) {
-        this.props.onReset(name);
+      if (this.props.onBlur) {
+        this.props.onBlur(name);
       }
-    }, 0);
-  }
 
-  openPanel(name, panel) {
-    this.setState({
-      [`${name}OpenedPanel`]: panel
-    });
-  }
+      this.timeout = setTimeout(() => {
+        if (!['from', 'to'].includes(this.state.focusedInput)) {
+          this.setState({
+            openedPanel: 'calendar'
+          });
+        }
+      }, 100);
+    };
 
-  renderCaption(name, propsCaption) {
-    return React.createElement(Caption, _extends({
-      onMonthClick: this[`handleMonthClick${capitalize(name)}`],
-      onYearClick: this[`handleYearClick${capitalize(name)}`]
-    }, propsCaption));
-  }
+    this.handleReset = name => {
+      this.handleChange(name, undefined);
+      this.setState({
+        keyFrom: this.state.keyFrom === 1 ? 2 : 1,
+        keyTo: this.state.keyTo === 1 ? 2 : 1
+      });
+    };
 
-  renderCaptionFrom(propsCaption) {
-    return this.renderCaption('from', propsCaption);
-  }
+    this.openPanel = panel => {
+      this.setState({
+        openedPanel: panel
+      });
+    };
 
-  renderCaptionTo(propsCaption) {
-    return this.renderCaption('to', propsCaption);
-  }
+    this.renderCaption = propsCaption => {
+      return React.createElement(Caption, _extends({
+        onMonthClick: () => this.openPanel('months'),
+        onYearClick: () => this.openPanel('years')
+      }, propsCaption));
+    };
 
-  renderNavBar(name, propsNavBar) {
-    return React.createElement(NavBar, _extends({
-      showClockButton: this.props.enableTime,
-      onClockClick: this[`handleClockClick${capitalize(name)}`]
-    }, propsNavBar));
-  }
+    this.renderNavBar = propsNavBar => {
+      return React.createElement(NavBar, _extends({
+        showClockButton: this.props.enableTime,
+        onClockClick: () => this.openPanel('time')
+      }, propsNavBar));
+    };
 
-  renderNavBarFrom(propsNavBar) {
-    return this.renderNavBar('from', propsNavBar);
-  }
+    this.renderOverlay = (name, propsOverlay, staticPosition) => {
+      const rangeOverlayProps = _objectSpread({}, propsOverlay, {
+        side: name,
+        staticPosition
+      });
 
-  renderNavBarTo(propsNavBar) {
-    return this.renderNavBar('to', propsNavBar);
-  }
+      switch (this.state['openedPanel']) {
+        case 'time':
+          return this.renderTimePickerOverlay(name, rangeOverlayProps);
 
-  renderOverlay(name, propsOverlay, staticPosition) {
-    const rangeOverlayProps = _objectSpread({}, propsOverlay, {
-      side: name,
-      staticPosition
-    });
+        case 'months':
+          return this.renderMonthPickerOverlay(name, rangeOverlayProps);
 
-    switch (this.state[`${name}OpenedPanel`]) {
-      case 'time':
-        return this.renderTimePickerOverlay(name, rangeOverlayProps);
+        case 'years':
+          return this.renderYearPickerOverlay(name, rangeOverlayProps);
 
-      case 'months':
-        return this.renderMonthPickerOverlay(name, rangeOverlayProps);
+        case 'calendar':
+          return React.createElement(Overlay, rangeOverlayProps);
+      }
+    };
 
-      case 'years':
-        return this.renderYearPickerOverlay(name, rangeOverlayProps);
+    this.renderOverlayFrom = propsOverlay => {
+      return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
+    };
 
-      case 'calendar':
-      default:
-        return React.createElement(Overlay, rangeOverlayProps);
-    }
-  }
+    this.renderOverlayTo = propsOverlay => {
+      return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
+    };
 
-  renderOverlayFrom(propsOverlay) {
-    return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
-  }
+    this.renderMonthPickerOverlay = (name, propsOverlay) => {
+      const monthPickerProps = {
+        value: this.state['currentMonth'],
+        onChange: this.handleCurrentMonthChange
+      };
+      return React.createElement(MonthPickerOverlay, _extends({
+        key: `${name}-month-picker-overlay`
+      }, monthPickerProps, propsOverlay));
+    };
 
-  renderOverlayTo(propsOverlay) {
-    return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
-  }
+    this.renderTimePickerOverlay = (name, propsOverlay) => {
+      const timePickerProps = {
+        value: this.props[name],
+        onChange: (date, precision) => this.handleTimeChange(name, date, precision),
+        onCalendarClick: () => this.openPanel('calendar')
+      };
+      return React.createElement(TimePickerOverlay, _extends({
+        key: `${name}-time-picker-overlay`
+      }, timePickerProps, propsOverlay));
+    };
 
-  renderMonthPickerOverlay(name, propsOverlay) {
-    const monthPickerProps = {
-      value: this.state[`${name}CurrentMonth`],
-      onChange: this[`handleCurrentMonthChange${capitalize(name)}`]
+    this.renderYearPickerOverlay = (name, propsOverlay) => {
+      const yearPickerProps = {
+        value: this.state['currentMonth'],
+        onChange: this.handleCurrentMonthChange,
+        disabledFutureDays: this.props.disableFutureDays
+      };
+      return React.createElement(YearPickerOverlay, _extends({
+        key: `${name}-year-picker-overlay`
+      }, yearPickerProps, propsOverlay));
     };
-    return React.createElement(MonthPickerOverlay, _extends({
-      key: `${name}-month-picker-overlay`
-    }, monthPickerProps, propsOverlay));
-  }
 
-  renderTimePickerOverlay(name, propsOverlay) {
-    const timePickerProps = {
-      value: this.props[name],
-      onChange: (date, precision) => this.handleTimeChange(name, date, precision),
-      onCalendarClick: this[`handleCalendarClick${capitalize(name)}`]
+    this.state = {
+      currentMonth: new Date(),
+      focusedInput: '',
+      openedPanel: 'calendar',
+      keyFrom: 1,
+      keyTo: 1
     };
-    return React.createElement(TimePickerOverlay, _extends({
-      key: `${name}-time-picker-overlay`
-    }, timePickerProps, propsOverlay));
   }
 
-  renderYearPickerOverlay(name, propsOverlay) {
-    const yearPickerProps = {
-      value: this.state[`${name}CurrentMonth`],
-      onChange: this[`handleCurrentMonthChange${capitalize(name)}`],
-      disabledFutureDays: this.props.disableFutureDays,
-      disabledPastDays: this.props.disablePastDays
-    };
-    return React.createElement(YearPickerOverlay, _extends({
-      key: `${name}-year-picker-overlay`
-    }, yearPickerProps, propsOverlay));
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
   }
 
   render() {
     const _this$props = this.props,
           {
       classes,
+      disabled,
       disabledDays,
-      disablePastDays,
       disableFutureDays,
       enableTime,
       labelFrom,
@@ -351,19 +269,21 @@ class HiDateRangePicker extends React.Component {
       locale,
       format,
       from,
+      fromError,
       minimumDate,
       onReset,
       to,
+      toError,
       translations,
       id,
-      staticPosition
+      staticPosition,
+      errorText,
+      hasSelector,
+      helperIcon,
+      helperText
     } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "minimumDate", "onReset", "to", "translations", "id", "staticPosition"]);
+          props = _objectWithoutProperties(_this$props, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText"]);
 
-    const {
-      fromCurrentMonth,
-      toCurrentMonth
-    } = this.state;
     const now = new Date();
     const modifiers = {
       start: from,
@@ -408,96 +328,76 @@ class HiDateRangePicker extends React.Component {
       selectedDays,
       todayButton: translations.today,
       weekdayElement: Weekday
-    }, props); // Build Props for the From DatePicker
-    // Disable days after 'to' date if define
-
-
-    let after;
-
-    if (to instanceof Date && disableFutureDays) {
-      after = to < now ? now : to;
-    } else if (to instanceof Date) {
-      after = to;
-    } else if (disableFutureDays) {
-      after = now;
-    }
-
-    const disabledDaysFrom = _objectSpread({}, disablePastDays && {
-      before: now
-    }, (to || disableFutureDays) && {
-      after
-    }, disabledDays);
+    }, props);
 
     const fromDayPickerProps = _objectSpread({}, dayPickerProps, {
-      onTodayButtonClick: this.handleCurrentMonthChangeFrom,
-      NavBarElement: this.renderNavBarFrom,
-      captionElement: this.renderCaptionFrom,
-      disabledDays: disabledDaysFrom,
-      month: fromCurrentMonth,
-      modifiers: _objectSpread({}, modifiers, {
-        disabled: disabledDaysFrom
-      })
-    }); // Build Props for the To DatePicker
-    // Disable days before 'from' date if define
-
-
-    let before;
-
-    if (from instanceof Date && disablePastDays) {
-      before = from < now ? now : from;
-    } else if (from instanceof Date) {
-      before = from;
-    } else if (disablePastDays) {
-      before = now;
-    }
-
-    const disabledDaysTo = _objectSpread({}, (from || disablePastDays) && {
-      before
-    }, disableFutureDays && {
-      after: now
-    }, disabledDays);
+      onTodayButtonClick: this.handleCurrentMonthChange,
+      navbarElement: this.renderNavBar,
+      captionElement: this.renderCaption,
+      disabledDays: _objectSpread({
+        before: minimumDate
+      }, disableFutureDays && {
+        after: now
+      }, to && {
+        after: to
+      }),
+      month: this.state.currentMonth,
+      modifiers: _objectSpread({}, modifiers)
+    });
 
     const toDayPickerProps = _objectSpread({}, dayPickerProps, {
-      onTodayButtonClick: this.handleCurrentMonthChangeTo,
-      NavBarElement: this.renderNavBarTo,
-      captionElement: this.renderCaptionTo,
-      disabledDays: disabledDaysTo,
-      month: toCurrentMonth,
-      modifiers: _objectSpread({}, modifiers, {
-        disabled: disabledDaysTo
-      })
+      onTodayButtonClick: this.handleCurrentMonthChange,
+      navbarElement: this.renderNavBar,
+      onDayClick: this.onDayToClick,
+      captionElement: this.renderCaption,
+      disabledDays: _objectSpread({
+        before: minimumDate
+      }, disableFutureDays && {
+        after: now
+      }, from && {
+        before: from
+      }),
+      month: this.state.currentMonth,
+      modifiers: _objectSpread({}, modifiers)
     }); // From & To InputProps
 
 
     const fromInputProps = _objectSpread({}, onReset && {
       onReset: () => this.handleReset('from')
-    }, props, labelFrom && {
+    }, props, fromError && {
+      error: true
+    }, labelFrom && {
       label: labelFrom
     }, {
       id: `${id}-from`,
-      onChange: this.handleInputChange('from')
+      onChange: this.handleInputChange('from'),
+      disabled: disabled
     });
 
     const toInputProps = _objectSpread({}, onReset && {
       onReset: () => this.handleReset('to')
-    }, props, labelTo && {
+    }, props, toError && {
+      error: true
+    }, labelTo && {
       label: labelTo
     }, {
       id: `${id}-to`,
-      onChange: this.handleInputChange('to')
+      onChange: this.handleInputChange('to'),
+      disabled: disabled
     });
 
     const toClass = classNames(classes.toInput, {
       [classes.absolute]: staticPosition === true && this.state.focusedInput === 'from',
       [classes.right4]: staticPosition === true && this.state.focusedInput === 'from'
     });
-    return React.createElement("div", {
+    let content = React.createElement("div", {
       className: classNames(classes.root, classes.rangePickerContainer)
     }, React.createElement("div", {
       className: classes.fromInput,
-      onFocus: this.handleDayPickerFocus('from'),
-      onBlur: this.handleDayPickerBlur('from')
+      onFocus: () => this.handleDayPickerFocus('from') // onBlur={() => this.handleDayPickerBlur('from')}
+
     }, React.createElement("div", null, React.createElement(DayPickerInput, {
+      key: this.state.keyFrom,
       ref: el => {
         this.fromInput = el;
       },
@@ -510,13 +410,14 @@ class HiDateRangePicker extends React.Component {
       format: enableTime ? `${format} HH:mm` : format,
       formatDate: MomentLocaleUtils.formatDate,
       parseDate: MomentLocaleUtils.parseDate,
-      onDayChange: this.handleDayChangeFrom,
+      onDayChange: day => this.handleDayChange('from', day),
       placeholder: ''
     }))), React.createElement("div", {
       className: toClass,
-      onFocus: this.handleDayPickerFocus('to'),
-      onBlur: this.handleDayPickerBlur('to')
+      onFocus: () => this.handleDayPickerFocus('to'),
+      onBlur: () => this.handleDayPickerBlur('to')
     }, React.createElement(DayPickerInput, {
+      key: this.state.keyTo,
       ref: el => {
         this.toInput = el;
       },
@@ -528,32 +429,49 @@ class HiDateRangePicker extends React.Component {
       inputProps: toInputProps,
       format: enableTime ? `${format} HH:mm` : format,
       formatDate: MomentLocaleUtils.formatDate,
-      parseDate: MomentLocaleUtils.parseDate,
-      onDayChange: this.handleDayChangeTo,
+      parseDate: MomentLocaleUtils.parseDate //onDayChange={(day) => this.handleDayChange('to', day)}
+      ,
       placeholder: ''
     })));
+
+    if (!hasSelector) {
+      content = React.createElement(HiFormControl, {
+        disabled: disabled,
+        helperIcon: helperIcon,
+        helperText: helperText,
+        errorText: errorText,
+        error: fromError || toError,
+        label: ' '
+      }, content);
+    }
+
+    return content;
   }
 
 }
 
 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" ? {
@@ -567,25 +485,20 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabled: PropTypes.bool,
 
-  /**
-   * Définie les jours non sélectionnables
-   */
-  disabledDays: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.instanceOf(Date)]),
-
   /**
    * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
    */
   disableFutureDays: PropTypes.bool,
 
   /**
-   * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+   * Ajoute la gestion de l'heure
    */
-  disablePastDays: PropTypes.bool,
+  enableTime: PropTypes.bool,
 
   /**
-   * Ajoute la gestion de l'heure
+   * Texte de l'erreur
    */
-  enableTime: PropTypes.bool,
+  errorText: PropTypes.string,
 
   /**
    * Format des dates affichées
@@ -595,7 +508,29 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date de début sélectionnée
    */
-  from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  from: PropTypes.instanceOf(Date),
+  //from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+  /**
+   * Erreur sur date from
+   */
+  fromError: PropTypes.bool,
+
+  /**
+   * @ignore
+   * Si true, on n'enveloppe pas le composant avec un HiFormControl
+   */
+  hasSelector: PropTypes.bool,
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: PropTypes.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: PropTypes.string,
 
   /**
    * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
@@ -620,7 +555,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: PropTypes.instanceOf(Date),
+  minimumDate: PropTypes.instanceOf(Date).isRequired,
 
   /**
    * Callback à la sélection d'une date
@@ -633,7 +568,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    * @param {string} nom du champs
    * @param {string} nouvelle valeur du champs
    */
-  onChange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
 
   /**
    * Callback au reset de l'input
@@ -649,7 +584,12 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date de fin sélectionnée
    */
-  to: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  to: PropTypes.instanceOf(Date),
+
+  /**
+   * Erreur sur date to
+   */
+  toError: PropTypes.bool,
 
   /**
    * Traductions