intelicoreact 0.0.94 → 0.0.95

package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -11,403 +11,402 @@ import Btn from '../../../UI/Button/Button';
 // import Switcher from '../../Switcher/Switcher';
 import Calendar from '../../RangeCalendar/RangeCalendar';
 
-const padTime = time => {
-    return `${time.toString().padStart(2, '0')}:00`;
+const padTime = (time) => {
+  return `${time.toString().padStart(2, '0')}:00`;
 };
 
-const handleDateInputOnChange = value => {
-    const replace = val => val.replace(/[^0-9\/]/g, '');
+const handleDateInputOnChange = (value) => {
+  const replace = (val) => val.replace(/[^0-9\/]/g, '');
 
-    const input = replace(value);
-    const lastSymbol = input ? input.slice(-1) : '';
-    const previousValue = input ? input.slice(0, input.length - 1) : '';
+  const input = replace(value);
+  const lastSymbol = input ? input.slice(-1) : '';
+  const previousValue = input ? input.slice(0, input.length - 1) : '';
 
-    if (value.length > 10 || lastSymbol === '/') return previousValue;
-    return previousValue.length === 2 || previousValue.length === 5 ? previousValue + '/' + lastSymbol : input;
+  if (value.length > 10 || lastSymbol === '/') return previousValue;
+  return previousValue.length === 2 || previousValue.length === 5 ? previousValue + '/' + lastSymbol : input;
 };
 
-const Datepicker = props => {
-    const {
-        txt,
-        className,
-        buttonsTypes = {},
-        values = {},
-        onChange,
-        onChangeCompare,
-        onCancel,
-        getSelectedMode,
-        onChangeInterval,
-        isCompareHidden,
-        limitRange,
-        handleItemClick,
-        setActiveInterval,
-        isShortWeekNames,
-        minDate = null,
-        maxDate = null
-    } = props;
-    const { start = null, end = null, compare = false } = values;
-    const startDateInputRef = useRef(null);
-    const endDateInputRef = useRef(null);
-
-    const [startDate, setStartDate] = useState(start);
-    const [endDate, setEndDate] = useState(end);
-    const dateInterval = getSelectedMode({ start: startDate, end: endDate });
-
-    const [startDateInput, setStartDateInput] = useState(start);
-    const [endDateInput, setEndDateInput] = useState(end);
-    const [startHour, setStartHour] = useState(start ? moment(start).hour() : 0);
-    const [endHour, setEndHour] = useState(end ? moment(end).hour() : 0);
-    // eslint-disable-next-line no-unused-vars
-    const [isCompare, setIsCompare] = useState(compare);
-    const [date1, setDate1] = useState(start ? moment(start).toDate() : moment().subtract(1, 'month').toDate());
-    const [date2, setDate2] = useState(end ? moment(end).toDate() : moment().toDate());
-    const [isStartFocused, setIsStartFocused] = useState(false);
-    const [isEndFocused, setIsEndFocused] = useState(false);
-    const [hoverStatus, setHoverStatus] = useState(null);
-
-    const isNearby = useMemo(() => moment(date2).subtract(1, 'month').isSame(moment(date1), 'month'), [date1, date2]);
-
-    const isPreviousPeriodShowed = useMemo(
-        () => isCompare && !isCompareHidden && startDate && endDate,
-        [startDate, endDate, isCompare],
-    );
-
-    const setInterval = () => {
-        setActiveInterval(getActualDateRange({ start: startDate, end: endDate }).intervalKey)
-    };
-
-    const prevEndHour = useRef(endHour);
-
-    const getStartHourItems = () =>
-        [...Array(24).keys()].map(hour => ({
-            label: padTime(hour),
-            value: hour,
-            disabled: moment(startDate).isSame(endDate, 'day') && endHour <= hour,
-        }));
-    const getEndHourItems = () =>
-        [...Array(24).keys()].map(hour => ({
-            label: padTime(hour + 1),
-            value: hour === 23 ? 0 : hour + 1,
-            disabled:
-                (moment(startDate).isSame(endDate, 'day') ||
-                    (moment(startDate).isSame(moment(endDate).subtract(1, 'days'), 'day') && endHour === 0)) &&
-                hour < startHour,
-        }));
-
-    const startPrevDate = useMemo(() => {
-        if (isPreviousPeriodShowed) {
-            const intervalHoursCount = moment(endDate).diff(startDate, 'hours');
-            return moment(startDate).subtract(intervalHoursCount, 'hours').toDate();
-        } else return null;
-    }, [startDate, endDate, isCompare]);
-
-    const endPrevDate = useMemo(() => {
-        if (isPreviousPeriodShowed) {
-            return startDate;
-        } else return null;
-    }, [startDate, endDate, isCompare]);
-
-    const title = useMemo(() => {
-        if (isCompare && !isCompareHidden && startDate && endDate) {
-            return `${moment(startPrevDate).format('ll')} (${moment(startPrevDate).format('HH:mm')}) - ${moment(
-                endPrevDate,
-            ).format('ll')} (${moment(endPrevDate).format('HH:mm')})`;
-        } else return '';
-    }, [startDate, endDate, isCompare]);
-
-    const subtractDay = date => (endHour === 0 ? moment(date).subtract(1, 'days') : date);
-    const addDay = date => (endHour === 0 ? moment(date).add(1, 'days') : date);
-
-    useEffect(() => {
-        if (moment(startDate).isSameOrAfter(endDate)) {
-            setStartDate(moment(endDate).subtract(1, 'd').toDate());
-            setDate1(moment(endDate).subtract(1, 'd'));
-        }
-    }, [startDate]);
-
-    useEffect(() => {
-        if (moment(endDate).isSameOrBefore(startDate)) {
-            setEndDate(moment(startDate).add(1, 'd').toDate());
-            setDate2(moment(startDate).add(1, 'd'));
-        }
-    }, [endDate]);
-
-    useEffect(() => {
-        setStartDateInput(startDate);
-        setEndDateInput(endDate);
-        if (moment(startDate).isBefore(moment(endDate), 'month')) {
-            setDate1(moment(startDate));
-            setDate2(moment(endDate));
-        }
-        setInterval();
-    }, [startDate, endDate]);
-
-    useEffect(() => {
-        if (moment(date1).isSameOrAfter(moment(date2), 'month')) {
-            setDate1(moment(date2).subtract(1, 'month'));
-        }
-    }, [date1, date2]);
-
-    useEffect(() => {
-        onChangeInterval(dateInterval);
-    }, [dateInterval]);
-
-    const handleClick = date => {
-        prevEndHour.current = 0;
-        if (
-            !startDate ||
-            (startDate && endDate && !(moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0))
-        ) {
-            setStartDate(moment(date).startOf('day').toDate());
-            setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
-            setStartHour(0);
-            setEndHour(0);
-        } else if (moment(date).isBefore(moment(startDate), 'day')) {
-            setEndDate(moment(startDate).add(1, 'd').startOf('day').toDate());
-            setStartDate(moment(date).set('hour', parseInt(startHour, 10)).toDate());
-        } else if (moment(date).isAfter(moment(startDate), 'day')) {
-            setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
-        }
+const Datepicker = (props) => {
+  const {
+    txt,
+    className,
+    buttonsTypes = {},
+    values = {},
+    onChange,
+    onChangeCompare,
+    onCancel,
+    getSelectedMode,
+    onChangeInterval,
+    isCompareHidden,
+    limitRange,
+    handleItemClick,
+    setActiveInterval,
+    isShortWeekNames,
+    minDate,
+    maxDate,
+    momentMinDate,
+    momentMaxDate,
+    isDontLimitFuture,
+    format,
+  } = props;
+  const { start = null, end = null, compare = false } = values;
+  const startDateInputRef = useRef(null);
+  const endDateInputRef = useRef(null);
+
+  const [startDate, setStartDate] = useState(start);
+  const [endDate, setEndDate] = useState(end);
+  const dateInterval = getSelectedMode({ start: startDate, end: endDate });
+
+  const [startDateInput, setStartDateInput] = useState(start);
+  const [endDateInput, setEndDateInput] = useState(end);
+  const [startHour, setStartHour] = useState(start ? moment(start).hour() : 0);
+  const [endHour, setEndHour] = useState(end ? moment(end).hour() : 0);
+  // eslint-disable-next-line no-unused-vars
+  const [isCompare, setIsCompare] = useState(compare);
+  const [date1, setDate1] = useState(start ? moment(start).toDate() : moment().subtract(1, 'month').toDate());
+  const [date2, setDate2] = useState(end ? moment(end).toDate() : moment().toDate());
+  const [isStartFocused, setIsStartFocused] = useState(false);
+  const [isEndFocused, setIsEndFocused] = useState(false);
+  const [hoverStatus, setHoverStatus] = useState(null);
+
+  const isNearby = useMemo(() => moment(date2).subtract(1, 'month').isSame(moment(date1), 'month'), [date1, date2]);
+
+  const isPreviousPeriodShowed = useMemo(() => isCompare && !isCompareHidden && startDate && endDate, [startDate, endDate, isCompare]);
+
+  const setInterval = () => {
+    setActiveInterval(getActualDateRange({ start: startDate, end: endDate }).intervalKey);
+  };
+
+  const prevEndHour = useRef(endHour);
+
+  const getStartHourItems = () =>
+    [...Array(24).keys()].map((hour) => ({
+      label: padTime(hour),
+      value: hour,
+      disabled: moment(startDate).isSame(endDate, 'day') && endHour <= hour,
+    }));
+  const getEndHourItems = () =>
+    [...Array(24).keys()].map((hour) => ({
+      label: padTime(hour + 1),
+      value: hour === 23 ? 0 : hour + 1,
+      disabled:
+        (moment(startDate).isSame(endDate, 'day') || (moment(startDate).isSame(moment(endDate).subtract(1, 'days'), 'day') && endHour === 0)) &&
+        hour < startHour,
+    }));
+
+  const startPrevDate = useMemo(() => {
+    if (isPreviousPeriodShowed) {
+      const intervalHoursCount = moment(endDate).diff(startDate, 'hours');
+      return moment(startDate).subtract(intervalHoursCount, 'hours').toDate();
+    } else return null;
+  }, [startDate, endDate, isCompare]);
+
+  const endPrevDate = useMemo(() => {
+    if (isPreviousPeriodShowed) {
+      return startDate;
+    } else return null;
+  }, [startDate, endDate, isCompare]);
+
+  const title = useMemo(() => {
+    if (isCompare && !isCompareHidden && startDate && endDate) {
+      return `${moment(startPrevDate).format('ll')} (${moment(startPrevDate).format('HH:mm')}) - ${moment(endPrevDate).format('ll')} (${moment(
+        endPrevDate
+      ).format('HH:mm')})`;
+    } else return '';
+  }, [startDate, endDate, isCompare]);
+
+  const subtractDay = (date) => (endHour === 0 ? moment(date).subtract(1, 'days') : date);
+  const addDay = (date) => (endHour === 0 ? moment(date).add(1, 'days') : date);
+
+  useEffect(() => {
+    if (moment(startDate).isSameOrAfter(endDate)) {
+      setStartDate(moment(endDate).subtract(1, 'd').toDate());
+      setDate1(moment(endDate).subtract(1, 'd'));
+    }
+  }, [startDate]);
+
+  useEffect(() => {
+    if (moment(endDate).isSameOrBefore(startDate)) {
+      setEndDate(moment(startDate).add(1, 'd').toDate());
+      setDate2(moment(startDate).add(1, 'd'));
+    }
+  }, [endDate]);
+
+  useEffect(() => {
+    setStartDateInput(startDate);
+    setEndDateInput(endDate);
+    if (moment(startDate).isBefore(moment(endDate), 'month')) {
+      setDate1(moment(startDate));
+      setDate2(moment(endDate));
+    }
+    setInterval();
+  }, [startDate, endDate]);
+
+  useEffect(() => {
+    if (moment(date1).isSameOrAfter(moment(date2), 'month')) {
+      setDate1(moment(date2).subtract(1, 'month'));
+    }
+  }, [date1, date2]);
+
+  useEffect(() => {
+    onChangeInterval(dateInterval);
+  }, [dateInterval]);
+
+  const handleClick = (date) => {
+    prevEndHour.current = 0;
+    if (!startDate || (startDate && endDate && !(moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0))) {
+      setStartDate(moment(date).startOf('day').toDate());
+      setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
+      setStartHour(0);
+      setEndHour(0);
+    } else if (moment(date).isBefore(moment(startDate), 'day')) {
+      setEndDate(moment(startDate).add(1, 'd').startOf('day').toDate());
+      setStartDate(moment(date).set('hour', parseInt(startHour, 10)).toDate());
+    } else if (moment(date).isAfter(moment(startDate), 'day')) {
+      setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
+    }
+    setHoverStatus(null);
+  };
+
+  let timerId;
+
+  const handleHover = (date) => {
+    if (!date) {
+      timerId = setTimeout(() => {
         setHoverStatus(null);
-    };
-
-    let timerId;
-
-    const handleHover = date => {
-        if (!date) {
-            timerId = setTimeout(() => {
-                setHoverStatus(null);
-            }, 400);
-            return;
-        }
-        if (timerId) clearTimeout(timerId);
-        if (moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0) {
-            if (moment(date).isAfter(moment(startDate), 'day')) setHoverStatus('end');
-            else if (moment(date).isBefore(moment(startDate), 'day')) setHoverStatus('start');
-            else setHoverStatus(null);
-        } else {
-            setHoverStatus('start');
-        }
-    };
-
-    const handleChangeStartHour = val => {
-        setStartHour(+val);
-        setStartDate(
-            moment(startDate || moment())
-                .set('hour', +val)
-                .toDate(),
-        );
-    };
-
-    const handleChangeEndHour = val => {
-        const newHour = +val;
-        setEndHour(newHour);
-        let newEndDate = moment();
-
-        if(endDate){
-          if (prevEndHour.current === 0 && newHour !== 0) {
-              newEndDate = moment(endDate).subtract(1, 'days');
-          } else if (prevEndHour.current !== 0 && newHour === 0) {
-              newEndDate = moment(endDate).add(1, 'days');
-          }
-        }
-
-        prevEndHour.current = newHour;
-        setEndDate(moment(newEndDate).set('hour', newHour).toDate());
-    };
-
-    const renderButtons = () => (
-        <>
-            <Btn className="date-picker__button" onClick={() => onCancel()} variant={buttonsTypes?.cancel}>
-                {txt?.buttons?.cancel || 'cancel'}
-            </Btn>
-            <Btn
-                className="date-picker__button"
-                variant={buttonsTypes?.apply}
-                disabled={!startDate || !endDate}
-                onClick={() =>
-                    onChange({
-                        start: startDate,
-                        end: endDate,
-                        startPrevDate,
-                        endPrevDate,
-                        compare: isCompare,
-                    })
-                }
-            >
-                {txt?.buttons?.apply || 'apply'}
-            </Btn>
-        </>
-    );
-
-    const renderPreviousPeriod = () => (
-        <>
-            {txt.labels.previousPeriod}: <span className="date-picker__previous-period-interval">{title}</span>
-        </>
+      }, 400);
+      return;
+    }
+    if (timerId) clearTimeout(timerId);
+    if (moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0) {
+      if (moment(date).isAfter(moment(startDate), 'day')) setHoverStatus('end');
+      else if (moment(date).isBefore(moment(startDate), 'day')) setHoverStatus('start');
+      else setHoverStatus(null);
+    } else {
+      setHoverStatus('start');
+    }
+  };
+
+  const handleChangeStartHour = (val) => {
+    setStartHour(+val);
+    setStartDate(
+      moment(startDate || moment())
+        .set('hour', +val)
+        .toDate()
     );
-
-    const doBlur = (type, e) => {
-        const executor = type === 'start' ? setIsStartFocused : setIsEndFocused;
-        e.target.blur();
-        executor(false);
-    };
-
-    const handleStartDateFocus = e => {
-        setIsStartFocused(true);
-        setStartDateInput(moment(startDate).format('L'));
-        setTimeout(() => e.target.select(), 0);
-    };
-
-    const handleStartDateBlur = e => {
-        let newDate;
-
-        if(!moment(startDateInput).isValid()){
-          newDate = startDate;
-        } else {
-          if(minDate && !moment(startDateInput).isSameOrAfter(minDate)){
-            newDate = minDate;
-          } else if(maxDate && !moment(startDateInput).isSameOrBefore(maxDate)){
-            newDate = maxDate;
-          } else {
-            newDate = moment(startDateInput);
-          }
-        }
-
-        setStartDateInput(newDate);
-        setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
-
-        doBlur('start', e);
-        setDate1(
-            moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate),
-        );
-    };
-
-    const handleEndDateFocus = e => {
-        setIsEndFocused(true);
-        setEndDateInput(moment(subtractDay(endDateInput)).format('L'));
-        setTimeout(() => e.target.select(), 0);
-    };
-
-    const handleEndDateBlur = e => {
-        let newDate;
-
-        if(!moment(endDateInput).isValid()){
-          newDate = endDate;
-        } else {
-          if(minDate && !moment(endDateInput).isSameOrAfter(minDate)){
-            newDate = minDate;
-          } else if(maxDate && !moment(endDateInput).isSameOrBefore(maxDate)){
-            newDate = maxDate;
-          } else {
-            newDate = moment(endDateInput);
-          }
+  };
+
+  const handleChangeEndHour = (val) => {
+    const newHour = +val;
+    setEndHour(newHour);
+    let newEndDate = moment();
+
+    if (endDate) {
+      if (prevEndHour.current === 0 && newHour !== 0) {
+        newEndDate = moment(endDate).subtract(1, 'days');
+      } else if (prevEndHour.current !== 0 && newHour === 0) {
+        newEndDate = moment(endDate).add(1, 'days');
+      }
+    }
+
+    prevEndHour.current = newHour;
+    setEndDate(moment(newEndDate).set('hour', newHour).toDate());
+  };
+
+  const renderButtons = () => (
+    <>
+      <Btn className="date-picker__button" onClick={() => onCancel()} variant={buttonsTypes?.cancel}>
+        {txt?.buttons?.cancel || 'cancel'}
+      </Btn>
+      <Btn
+        className="date-picker__button"
+        variant={buttonsTypes?.apply}
+        disabled={!startDate || !endDate}
+        onClick={() =>
+          onChange({
+            start: startDate,
+            end: endDate,
+            startPrevDate,
+            endPrevDate,
+            compare: isCompare,
+          })
         }
-
-        setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
-        setEndDateInput(newDate);
-
-        doBlur('end', e);
-        setDate2(newDate);
-    };
-
-    const handleKeyPressed = (code, e, type) => {
-        if (code === 13) (type === 'start' ? handleStartDateBlur : handleEndDateBlur)(e);
-        if (code === 27) doBlur(type, e);
-    };
-
-    const startDateValue = startDate ? moment(startDate).format('ll') : '';
-    const endDateValue = endDate ? moment(endDate).subtract(1, 'm').format('ll') : '';
-
-    return (
-        <div className={cn('date-picker', className)}>
-            <div className="date-picker__header">
-                <div className="date-picker__inputs-block">
-                    <TextInput
-                        dataTest="datepicker_start-date-input"
-                        className={cn( { 'date-picker__date-input_active': hoverStatus === 'start' })}
-                        value={isStartFocused ? startDateInput : startDateValue}
-                        onChange={value => setStartDateInput(handleDateInputOnChange(value))}
-                        onFocus={handleStartDateFocus}
-                        disabled={!startDate}
-                        onBlur={handleStartDateBlur}
-                        onKeyUp={(code, e) => handleKeyPressed(code, e, 'start')}
-                        //ref={startDateInputRef}
-                        // mask={moment(startDate).format('L').replace(/[0-9]/g, '9')}
-                    />
-                    <SelectInput
-                        dataTest="datepicker_start-hour-select-input"
-                        className={cn('date-picker__hour-select-input')}
-                        onChange={value => handleChangeStartHour(value)}
-                        value={startHour}
-                        options={getStartHourItems()}
-                        disabled={!startDate}
-                        short
-                    />
-                    <div className="date-picker__inputs-separator date-picker__header--gray">—</div>
-                    <TextInput
-                        dataTest="datepicker_end-date-input"
-                        className={cn({ 'date-picker__date-input_active': hoverStatus === 'end' })}
-                        value={isEndFocused ? endDateInput : endDateValue}
-                        disabled={!endDate}
-                        onChange={value => setEndDateInput(handleDateInputOnChange(value))}
-                        onFocus={handleEndDateFocus}
-                        onBlur={handleEndDateBlur}
-                        onKeyUp={(code, e) => handleKeyPressed(code, e, 'end')}
-                        //ref={endDateInputRef}
-                    />
-                    <SelectInput
-                        dataTest="datepicker_end-hour-select-input"
-                        className={cn('date-picker__hour-select-input')}
-                        onChange={value => handleChangeEndHour(value)}
-                        value={endHour}
-                        options={getEndHourItems()}
-                        disabled={!endDate}
-                        short
-                    />
-                </div>
-                {isCompare && !isCompareHidden && startDate && endDate && (
-                    <div className="date-picker__previous-period">
-                        {renderPreviousPeriod()}
-                    </div>
-                )}
-            </div>
-
-
-            <div className="date-picker__calendars">
-                <div className="date-picker__calendars-wrapper">
-                    <Calendar
-                        className="date-picker__calendar"
-                        date={date1}
-                        setDate={setDate1}
-                        allowNext={!isNearby}
-                        startDate={startDate}
-                        endDate={endDate}
-                        startPrevDate={startPrevDate}
-                        endPrevDate={endPrevDate}
-                        onClick={handleClick}
-                        onHover={handleHover}
-                        limitRange={limitRange}
-                        isShortWeekNames={isShortWeekNames}
-                    />
-                    <Calendar
-                        className="date-picker__calendar"
-                        date={date2}
-                        setDate={setDate2}
-                        allowPrev={!isNearby}
-                        startDate={startDate}
-                        endDate={endDate}
-                        startPrevDate={startPrevDate}
-                        endPrevDate={endPrevDate}
-                        onClick={handleClick}
-                        onHover={handleHover}
-                        isShortWeekNames={isShortWeekNames}
-                    />
-                </div>
-            </div>
-            <div className={cn('date-picker__footer', {
-                'date-picker__footer_once-element': isCompareHidden
-            })}>
-                {/* {!isCompareHidden ? (
+      >
+        {txt?.buttons?.apply || 'apply'}
+      </Btn>
+    </>
+  );
+
+  const renderPreviousPeriod = () => (
+    <>
+      {txt.labels.previousPeriod}: <span className="date-picker__previous-period-interval">{title}</span>
+    </>
+  );
+
+  const doBlur = (type, e) => {
+    const executor = type === 'start' ? setIsStartFocused : setIsEndFocused;
+    e.target.blur();
+    executor(false);
+  };
+
+  const handleStartDateFocus = (e) => {
+    setIsStartFocused(true);
+    setStartDateInput(moment(startDate).format('L'));
+    setTimeout(() => e.target.select(), 0);
+  };
+
+  const handleStartDateBlur = (e) => {
+    let newDate;
+
+    if (!moment(startDateInput).isValid()) {
+      newDate = moment(startDate);
+    } else {
+      if (minDate && moment(startDateInput).isBefore(minDate)) newDate = momentMinDate;
+      else if (!isDontLimitFuture) {
+        const edge = maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day');
+        if (moment(startDateInput).isAfter(edge)) newDate = edge;
+        else newDate = moment(startDateInput);
+      } else newDate = moment(startDateInput);
+    }
+
+    setStartDateInput(newDate.format(format));
+    setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
+
+    doBlur('start', e);
+    setDate1(moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate));
+  };
+
+  const handleEndDateFocus = (e) => {
+    setIsEndFocused(true);
+    setEndDateInput(moment(subtractDay(endDateInput)).format('L'));
+    setTimeout(() => e.target.select(), 0);
+  };
+
+  const handleEndDateBlur = (e) => {
+    let newDate;
+
+    if (!moment(endDateInput).isValid()) {
+      newDate = moment(endDate);
+    } else {
+      if (minDate && moment(endDateInput).isBefore(minDate)) newDate = momentMinDate;
+      else if (!isDontLimitFuture) {
+        const edge = maxDate ? momentMaxDate : moment().endOf('day');
+        if (moment(endDateInput).isAfter(edge)) newDate = maxDate ? edge : edge.startOf('day');
+        else newDate = moment(startDateInput);
+      } else newDate = moment(startDateInput);
+    }
+
+    setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
+    setEndDateInput(newDate.format(format));
+
+    doBlur('end', e);
+    setDate2(newDate);
+  };
+
+  const handleKeyPressed = (code, e, type) => {
+    if (code === 13) (type === 'start' ? handleStartDateBlur : handleEndDateBlur)(e);
+    if (code === 27) doBlur(type, e);
+  };
+
+  const startDateValue = startDate ? moment(startDate).format('ll') : '';
+  const endDateValue = endDate ? moment(endDate).subtract(1, 'm').format('ll') : '';
+
+  return (
+    <div className={cn('date-picker', className)}>
+      <div className="date-picker__header">
+        <div className="date-picker__inputs-block">
+          <TextInput
+            dataTest="datepicker_start-date-input"
+            className={cn({ 'date-picker__date-input_active': hoverStatus === 'start' })}
+            value={isStartFocused ? startDateInput : startDateValue}
+            onChange={(value) => setStartDateInput(handleDateInputOnChange(value))}
+            onFocus={handleStartDateFocus}
+            disabled={!startDate}
+            onBlur={handleStartDateBlur}
+            onKeyUp={(code, e) => handleKeyPressed(code, e, 'start')}
+            //ref={startDateInputRef}
+            // mask={moment(startDate).format('L').replace(/[0-9]/g, '9')}
+          />
+          <SelectInput
+            dataTest="datepicker_start-hour-select-input"
+            className={cn('date-picker__hour-select-input')}
+            onChange={(value) => handleChangeStartHour(value)}
+            value={startHour}
+            options={getStartHourItems()}
+            disabled={!startDate}
+            short
+          />
+          <div className="date-picker__inputs-separator date-picker__header--gray">—</div>
+          <TextInput
+            dataTest="datepicker_end-date-input"
+            className={cn({ 'date-picker__date-input_active': hoverStatus === 'end' })}
+            value={isEndFocused ? endDateInput : endDateValue}
+            disabled={!endDate}
+            onChange={(value) => setEndDateInput(handleDateInputOnChange(value))}
+            onFocus={handleEndDateFocus}
+            onBlur={handleEndDateBlur}
+            onKeyUp={(code, e) => handleKeyPressed(code, e, 'end')}
+            //ref={endDateInputRef}
+          />
+          <SelectInput
+            dataTest="datepicker_end-hour-select-input"
+            className={cn('date-picker__hour-select-input')}
+            onChange={(value) => handleChangeEndHour(value)}
+            value={endHour}
+            options={getEndHourItems()}
+            disabled={!endDate}
+            short
+          />
+        </div>
+        {isCompare && !isCompareHidden && startDate && endDate && <div className="date-picker__previous-period">{renderPreviousPeriod()}</div>}
+      </div>
+
+      <div className="date-picker__calendars">
+        <div className="date-picker__calendars-wrapper">
+          <Calendar
+            className="date-picker__calendar"
+            date={date1}
+            setDate={setDate1}
+            allowNext={!isNearby}
+            startDate={startDate}
+            endDate={endDate}
+            startPrevDate={startPrevDate}
+            endPrevDate={endPrevDate}
+            onClick={handleClick}
+            onHover={handleHover}
+            limitRange={limitRange}
+            isShortWeekNames={isShortWeekNames}
+            minDate={minDate}
+            maxDate={maxDate}
+            momentMinDate={momentMinDate}
+            momentMaxDate={momentMaxDate}
+          />
+          <Calendar
+            className="date-picker__calendar"
+            date={date2}
+            setDate={setDate2}
+            allowPrev={!isNearby}
+            startDate={startDate}
+            endDate={endDate}
+            startPrevDate={startPrevDate}
+            endPrevDate={endPrevDate}
+            onClick={handleClick}
+            onHover={handleHover}
+            isShortWeekNames={isShortWeekNames}
+            minDate={minDate}
+            maxDate={maxDate}
+            momentMinDate={momentMinDate}
+            momentMaxDate={momentMaxDate}
+            isDontLimitFuture={isDontLimitFuture}
+          />
+        </div>
+      </div>
+      <div
+        className={cn('date-picker__footer', {
+          'date-picker__footer_once-element': isCompareHidden,
+        })}
+      >
+        {/* {!isCompareHidden ? (
                     <div className="date-picker__compare-block">
                         <div className="mr5">
                             <Switcher
@@ -424,10 +423,10 @@ const Datepicker = props => {
                 ) : (
                     <div />
                 )} */}
-                <div className="date-picker__buttons-block">{renderButtons()}</div>
-            </div>
-        </div>
-    );
+        <div className="date-picker__buttons-block">{renderButtons()}</div>
+      </div>
+    </div>
+  );
 };
 
 export default Datepicker;