intelicoreact 1.6.22 → 1.6.24

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

@@ -1 +1,693 @@
-function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,r=Array(e);a<e;a++)r[a]=t[a];return r}function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var a,r,n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i=[],o=!0,d=!1;try{for(n=n.call(t);!(o=(a=n.next()).done)&&(i.push(a.value),!e||i.length!==e);o=!0);}catch(t){d=!0,r=t}finally{try{o||null==n.return||n.return()}finally{if(d)throw r}}return i}}(t,e)||r(t,e)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(e)||r(e)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,a){if(e){if("string"==typeof e)return t(e,a);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return t(e,a)}}import{jsx as n,jsxs as i,Fragment as o}from"react/jsx-runtime";import{useEffect as d,useMemo as u,useRef as c,useState as s}from"react";import l from"classnames";import m from"moment-timezone";import p from"../../../UI/Button/Button";import f from"../../Dropdown/Dropdown";import h from"../../RangeCalendar/RangeCalendar";import v from"../../Switcher/Switcher";import{MAIN_FORMAT as _,MAIN_TIME_FORMAT as y,getActualDateRange as D,getIsDateValid as b}from"../dependencies";import k from"./DateInput";var I={handleHoverTimerId:null},N=function(t){return"".concat(t.toString().padStart(2,"0"),":00")};export default function(t){var r,g,S,C=t.txt,O=t.className,A=t.buttonsTypes,w=void 0===A?{}:A,M=t.values,x=void 0===M?{}:M,P=t.onChange,T=t.onChangeMobile,B=t.onChangeCompare,L=t.onCancel,j=t.getSelectedMode,F=t.onChangeInterval,H=t.isCompareHidden,R=t.limitRange,U=(t.handleItemClick,t.setActiveInterval),Y=t.isShortWeekNames,K=t.minDate,W=t.maxDate,E=t.momentMinDate,z=t.momentMaxDate,V=t.isDontLimitFuture,$=t.testId,q=t.mainId,G=t.withMobileLogic,J=t.isDoNotPullOutListOfMainContainer,Q=x.start,X=void 0===Q?null:Q,Z=x.end,tt=void 0===Z?null:Z,te=x.compare,ta=c(null),tr=c(null),tn=e(s(b(X)?m(X):""),2),ti=tn[0],to=tn[1],td=e(s(b(tt)?m(tt):""),2),tu=td[0],tc=td[1],ts=j({start:ti,end:tu}),tl=e(s(null),2),tm=tl[0],tp=tl[1],tf=e(s(null),2),th=tf[0],tv=tf[1],t_=e(s(!1),2),ty=t_[0],tD=t_[1],tb=e(s(!1),2),tk=tb[0],tI=tb[1],tN=e(s(X?m(X).hour():0),2),tg=tN[0],tS=tN[1],tC=e(s(tt?m(tt).hour():0),2),tO=tC[0],tA=tC[1],tw=e(s(void 0!==te&&te),2),tM=tw[0],tx=tw[1],tP=e(s(X?m(X):m().subtract(1,"month")),2),tT=tP[0],tB=tP[1],tL=e(s(tt?m(tt):m()),2),tj=tL[0],tF=tL[1],tH=e(s(null),2),tR=(tH[0],tH[1]),tU=u(function(){return m(tj).subtract(1,"month").isSame(m(tT),"month")},[tT,tj]),tY=u(function(){return tM&&!H&&ti&&tu},[ti,tu,tM]),tK=c(tO),tW=u(function(){if(!tY)return null;var t=m(tu).diff(ti,"hours");return m(ti).subtract(t,"hours").toDate()},[ti,tu,tM]),tE=u(function(){return tY?ti:null},[ti,tu,tM]),tz=u(function(){return tM&&!H&&ti&&tu?"".concat(m(tW).format("ll")," (").concat(m(tW).format(y),") - ").concat(m(tE).format("ll")," (").concat(m(tE).format(y),")"):""},[ti,tu,tM]),tV=function(t,e){var a;return"startDateInput"===t?m(e):(a=m(e),0===tO?m(a).subtract(1,"days"):m(a))},t$=function(){U(D({start:ti,end:tu}).intervalKey)},tq=function(t){tK.current=0,!ti||ti&&tu&&!(m(ti).add(1,"d").isSame(tu,"day")&&0===tO)?(to(m(t).startOf("day")),tc(m(t).add(1,"d").startOf("day")),tS(0),tA(0)):m(t).isBefore(m(ti),"day")?(tc(m(ti).add(1,"d").startOf("day")),to(m(t).set("hour",parseInt(tg,10)))):m(t).isAfter(m(ti),"day")&&tc(m(t).add(1,"d").startOf("day")),tR(null)},tG=function(t){if(I.handleHoverTimerId&&clearTimeout(I.handleHoverTimerId),!t){I.handleHoverTimerId=setTimeout(function(){tR(null)},400);return}m(ti).add(1,"d").isSame(tu,"day")&&0===tO?m(t).isAfter(m(ti),"day")?tR("end"):m(t).isBefore(m(ti),"day")?tR("start"):tR(null):tR("start")},tJ=function(t){tS(Number(t)),to(m(ti||m()).set("hour",Number(t)))},tQ=function(t){var e=Number(t);tA(e);var a=m();tu&&(0===tK.current&&0!==e?a=m(tu).subtract(1,"days"):0!==tK.current&&0===e&&(a=m(tu).add(1,"days"))),tK.current=e,tc(m(a).set("hour",e))},tX=function(t,e){var a="startDateInput"===t?tD:tI,r="startDateInput"===t?tp:tv,n="startDateInput"===t?ti:tu;a(!0),r(n?tV(t,n).format("L"):""),setTimeout(function(){var a,r="startDateInput"===t?ta.current:tr.current;(null!=(a=null==e?void 0:e.target)?a:r).select()},0)},tZ=function(t,e){e.target.blur(),("startDateInput"===t?tD:tI)(!1)},t0=function(t,e,a){var r=m(t,"MM/DD/YYYY");if(!r.isValid())return e;var n,i,o=m().endOf("day"),d="startDateInput"===a?tg:tO;return i=K&&r.isBefore(E)?E:W&&r.isAfter(z)?z:!V&&r.isAfter(o)?o.startOf("day"):r,"endDateInput"===a&&(n=i,i=0===tO?m(n).add(1,"days"):m(n)),i.set("hour",parseInt(d,10))},t1=function(t,e){var a,r,n="startDateInput"===t?tm:th,i="startDateInput"===t?ti:tu,o="startDateInput"===t?to:tc,d="startDateInput"===t?tB:tF,u=t0(null!=(r=null==e||null==(a=e.target)?void 0:a.value)?r:n,i,t);o(u),d("endDateInput"===t?u:m(u).isSameOrAfter(m(tj),"month")?m(tj).subtract(1,"month"):m(u)),tZ(t,e)},t2=function(t,e,a){13===t&&t1(a,e),27===t&&tZ(a,e)},t3=function(){var t;return i(o,{children:[(null==C||null==(t=C.labels)?void 0:t.previousPeriod)||"",":"," ",n("span",{className:"date-picker__previous-period-interval",children:tz})]})};d(function(){m(ti).isSameOrAfter(tu)&&(to(m(tu).subtract(1,"d")),tB(m(tu).subtract(1,"d")))},[ti]),d(function(){m(tu).isSameOrBefore(ti)&&(tc(m(ti).add(1,"d")),tF(m(ti).add(1,"d")))},[tu]),d(function(){m(ti).isBefore(m(tu),"month")&&(tB(m(ti)),tF(m(tu))),t$()},[ti,tu]),d(function(){m(tT).isSameOrAfter(m(tj),"month")&&!G&&tB(m(tj).subtract(1,"month"))},[tT,tj]),d(function(){F(ts)},[ts]),d(function(){"function"==typeof T&&T({start:m(ti).format(_),end:m(tu).format(_),startPrevDate:m(tW).format(_),endPrevDate:m(tE).format(_),compare:tM})},[ti,tu,tW,tE,tM]);var t4=function(){return i("div",{className:"date-picker__date-row",children:[n(k,{ref:ta,testId:"datepicker-".concat($,"_start-date-input"),RC:"date-picker__date-input",className:l("date-picker__date-input"),isFocused:ty,value:tm,date:tV("startDateInput",ti),disabled:!ti,onChange:tp,onFocus:function(t){return tX("startDateInput",t)},onBlur:function(t){return t1("startDateInput",t)},onKeyUp:function(t,e){return t2(t,e,"startDateInput")}}),n(f,{testId:$,id:"datepicker-id-".concat(q,"_start-hour-select-input"),dataTest:"datepicker_start-hour-select-input",className:l("date-picker__hour-select-input"),onChange:function(t){return tJ(t)},value:tg,options:a(Array(24).keys()).map(function(t){return{label:N(t),value:t,disabled:m(ti).isSame(tu,"day")&&tO<=t}}),disabled:!ti,isDoNotPullOutListOfMainContainer:J,short:!0,withMobileLogic:G})]})},t8=function(){return i("div",{className:"date-picker__date-row",children:[n(k,{ref:tr,testId:"datepicker-".concat($,"_start-date-input"),RC:"date-picker__date-input",className:l("date-picker__date-input"),isFocused:tk,value:th,date:tV("endDateInput",tu),disabled:!tu,onChange:tv,onFocus:function(t){return tX("endDateInput",t)},onBlur:function(t){return t1("endDateInput",t)},onKeyUp:function(t,e){return t2(t,e,"endDateInput")}}),n(f,{testId:$,id:"datepicker-id-".concat(q,"_end-hour-select-input"),dataTest:"datepicker_end-hour-select-input",className:l("date-picker__hour-select-input"),onChange:function(t){return tQ(t)},value:tO,options:a(Array(24).keys()).map(function(t){return{label:N(t+1),value:23===t?0:t+1,disabled:(m(ti).isSame(tu,"day")||m(ti).isSame(m(tu).subtract(1,"days"),"day")&&0===tO)&&t<tg}}),disabled:!tu,isDoNotPullOutListOfMainContainer:J,short:!0,withMobileLogic:G})]})},t5=function(){return n(h,{testId:$,className:"date-picker__calendar",date:tT,setDate:tB,allowNext:G?!m(tT).startOf("month").isSameOrAfter(m().startOf("day"),"months"):!tU,startDate:ti,endDate:tu,startPrevDate:tW,endPrevDate:tE,onClick:tq,onHover:tG,limitRange:R,isShortWeekNames:Y,minDate:K,maxDate:W,momentMinDate:E,momentMaxDate:z})};return G?i("div",{className:l("date-picker",O),children:[i("div",{className:"date-picker__header",children:[i("div",{className:"date-picker__inputs-block",children:[t4(),n("div",{className:"date-picker__inputs-separator date-picker__header--gray",children:"—"}),t8()]}),tM&&!H&&ti&&tu&&n("div",{className:"date-picker__previous-period",children:t3()})]}),n("div",{className:"date-picker__calendars",children:n("div",{className:"date-picker__calendars-wrapper",children:t5()})})]}):i("div",{className:l("date-picker",O),children:[i("div",{className:"date-picker__header",children:[i("div",{className:"date-picker__inputs-block",children:[t4(),n("div",{className:"date-picker__inputs-separator date-picker__header--gray",children:"—"}),t8()]}),tM&&!H&&ti&&tu&&n("div",{className:"date-picker__previous-period",children:t3()})]}),n("div",{className:"date-picker__calendars",children:i("div",{className:"date-picker__calendars-wrapper",children:[t5(),n(h,{className:"date-picker__calendar",date:tj,setDate:tF,allowPrev:!tU,startDate:ti,endDate:tu,startPrevDate:tW,endPrevDate:tE,onClick:tq,onHover:tG,isShortWeekNames:Y,minDate:K,maxDate:W,momentMinDate:E,momentMaxDate:z,isDontLimitFuture:V})]})}),i("div",{className:l("date-picker__footer",{"date-picker__footer_once-element":H}),children:[H?n("div",{}):n("div",{className:"date-picker__compare-block",children:n("div",{className:"mr5",children:n(v,{dataTest:"datepicker_compare",label:(null==C||null==(S=C.labels)?void 0:S.compare)||"Compare",isSwitchOn:tM,onChange:function(){B(!tM),tx(function(t){return!t})}})})}),n("div",{className:"date-picker__buttons-block",children:i(o,{children:[n(p,{className:"date-picker__button",onClick:function(){return L()},variant:null==w?void 0:w.cancel,children:(null==C||null==(r=C.buttons)?void 0:r.cancel)||"Cancel"}),n(p,{className:"date-picker__button",variant:null==w?void 0:w.apply,disabled:!ti||!tu,onClick:function(){return P({start:m(ti).format(_),end:m(tu).format(_),startPrevDate:m(tW).format(_),endPrevDate:m(tE).format(_),compare:tM})},children:(null==C||null==(g=C.buttons)?void 0:g.apply)||"apply"})]})})]})]})}
+// eslint-disable-next-line no-unused-vars
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import cn from "classnames";
+import moment from "moment-timezone";
+
+import Btn from "../../../UI/Button/Button";
+import SelectInput from "../../Dropdown/Dropdown";
+import Calendar from "../../RangeCalendar/RangeCalendar";
+import Switcher from "../../Switcher/Switcher";
+import {
+  MAIN_FORMAT,
+  MAIN_TIME_FORMAT,
+  getActualDateRange,
+  getIsDateValid,
+} from "../dependencies";
+
+import DateInput from "./DateInput";
+
+const outsideScope = {
+  handleHoverTimerId: null,
+};
+
+const DATE_INPUT_FORMAT = "MM/DD/YYYY";
+
+const padTime = (time) => {
+  return `${time.toString().padStart(2, "0")}:00`;
+};
+
+const Datepicker = (props) => {
+  const {
+    txt,
+    className,
+    buttonsTypes = {},
+    values = {},
+    onChange,
+    onChangeMobile,
+    onChangeCompare,
+    onCancel,
+    getSelectedMode,
+    onChangeInterval,
+    isCompareHidden,
+    limitRange,
+    handleItemClick,
+    setActiveInterval,
+    isShortWeekNames,
+    minDate,
+    maxDate,
+    momentMinDate,
+    momentMaxDate,
+    isDontLimitFuture,
+    testId,
+    mainId,
+    withMobileLogic,
+    isDoNotPullOutListOfMainContainer,
+  } = props;
+  const { start = null, end = null, compare = false } = values;
+  console.log('isDoNotPullOutListOfMainContainer', isDoNotPullOutListOfMainContainer)
+
+  const startDateInputRef = useRef(null);
+  const endDateInputRef = useRef(null);
+
+  const [startDate, setStartDate] = useState(
+    getIsDateValid(start) ? moment(start) : "",
+  );
+  const [endDate, setEndDate] = useState(
+    getIsDateValid(end) ? moment(end) : "",
+  );
+  const dateInterval = getSelectedMode({ start: startDate, end: endDate });
+
+  const [startDateInput, setStartDateInput] = useState(null);
+  const [endDateInput, setEndDateInput] = useState(null);
+  const [isStartFocused, setIsStartFocused] = useState(false);
+  const [isEndFocused, setIsEndFocused] = useState(false);
+
+  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) : moment().subtract(1, "month"),
+  );
+  const [date2, setDate2] = useState(end ? moment(end) : moment());
+
+  const [hoverStatus, setHoverStatus] = useState(null);
+
+  // ********************
+  // Constants
+  // ********************
+
+  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 prevEndHour = useRef(endHour);
+
+  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(MAIN_TIME_FORMAT)}) - ${moment(
+        endPrevDate,
+      ).format("ll")} (${moment(endPrevDate).format(MAIN_TIME_FORMAT)})`;
+    } else return "";
+  }, [startDate, endDate, isCompare]);
+
+  // ********************
+  // Methods
+  // ********************
+
+  const subtractDay = (date) =>
+    endHour === 0 ? moment(date).subtract(1, "days") : moment(date);
+  const addDay = (date) =>
+    endHour === 0 ? moment(date).add(1, "days") : moment(date);
+
+  const getCorrectedDateForDateInput = (key, date) => {
+    if (key === "startDateInput") return moment(date);
+    // return moment(date).subtract(1, 'm');
+    return subtractDay(moment(date));
+  };
+
+  const setInterval = () => {
+    setActiveInterval(
+      getActualDateRange({ start: startDate, end: endDate }).intervalKey,
+    );
+  };
+
+  // ********************
+  // Handlers
+  // ********************
+
+  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"));
+      setEndDate(moment(date).add(1, "d").startOf("day"));
+      setStartHour(0);
+      setEndHour(0);
+    } else if (moment(date).isBefore(moment(startDate), "day")) {
+      setEndDate(moment(startDate).add(1, "d").startOf("day"));
+      setStartDate(moment(date).set("hour", parseInt(startHour, 10)));
+    } else if (moment(date).isAfter(moment(startDate), "day")) {
+      setEndDate(moment(date).add(1, "d").startOf("day"));
+    }
+    setHoverStatus(null);
+  };
+
+  const handleHover = (date) => {
+    if (outsideScope.handleHoverTimerId)
+      clearTimeout(outsideScope.handleHoverTimerId);
+    if (!date) {
+      outsideScope.handleHoverTimerId = setTimeout(() => {
+        setHoverStatus(null);
+      }, 400);
+      return;
+    }
+    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(Number(val));
+    setStartDate(moment(startDate || moment()).set("hour", Number(val)));
+  };
+
+  const handleChangeEndHour = (val) => {
+    const newHour = Number(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));
+  };
+
+  // const doBlur = (type, e) => {
+  //   const executor = type === 'start' ? setIsStartFocused : setIsEndFocused;
+  //   e.target.blur();
+  //   executor(false);
+  // };
+
+  // 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 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 handleDateInputFocus = (key, e) => {
+    const changeFlag =
+      key === "startDateInput" ? setIsStartFocused : setIsEndFocused;
+    const set = key === "startDateInput" ? setStartDateInput : setEndDateInput;
+    const date = key === "startDateInput" ? startDate : endDate;
+
+    changeFlag(true);
+    set(date ? getCorrectedDateForDateInput(key, date).format("L") : "");
+    setTimeout(() => {
+      const defaultTarget =
+        key === "startDateInput"
+          ? startDateInputRef.current
+          : endDateInputRef.current;
+      const target = e?.target ?? defaultTarget;
+      target.select();
+
+      //? Для инпут-маск, почему-то нужно пропустить 2 эвентлупа
+      // setTimeout(() => {
+      //   target.select();
+      // }, 0);
+    }, 0);
+  };
+
+  const doBlur = (type, e) => {
+    const executor =
+      type === "startDateInput" ? setIsStartFocused : setIsEndFocused;
+
+    e.target.blur();
+    executor(false);
+  };
+
+  const processOverflow = (newDateAsString, valueForRollback, key) => {
+    const newDateAsMomentObj = moment(newDateAsString, DATE_INPUT_FORMAT);
+
+    // console.log('processOverflow - newDateAsString - ', newDateAsString);
+    // console.log('processOverflow - valueForRollback - ', valueForRollback);
+    // console.log('----------');
+    // console.log('processOverflow - minDate - ', minDate);
+    // console.log('processOverflow - maxDate - ', maxDate);
+    // console.log('----------');
+    // console.log('processOverflow - momentMinDate - ', momentMinDate);
+    // console.log('processOverflow - momentMaxDate - ', momentMaxDate);
+    // console.log('----------');
+    // console.log('processOverflow - newDateAsMomentObj - ', newDateAsMomentObj);
+    // console.log('*********');
+
+    //? Если значение не валидно...
+    if (!newDateAsMomentObj.isValid()) {
+      //? ... то откатываем к дате до набора руками
+      return valueForRollback;
+    } else {
+      const beforeOfFuture = moment().endOf("day");
+      const hour = key === "startDateInput" ? startHour : endHour;
+
+      let output;
+
+      //? Если есть минимальная дата и введенная меньше минимальной, то ставим минимальную
+      if (minDate && newDateAsMomentObj.isBefore(momentMinDate))
+        output = momentMinDate;
+      //? Если есть максимальная дата и введенная больше максимальной, то ставим максимальную
+      else if (maxDate && newDateAsMomentObj.isAfter(momentMaxDate))
+        output = momentMaxDate;
+      //? Если нет установки не ограничивать дату по будущему...
+      else if (
+        !isDontLimitFuture &&
+        newDateAsMomentObj.isAfter(beforeOfFuture)
+      ) {
+        output = beforeOfFuture.startOf("day");
+      } else output = newDateAsMomentObj;
+
+      // if (key === 'startDateInput') {
+      //   console.log('endDate - ', endDate.format('YYYY-MM-DDTHH:mm'));
+      //   console.log('endDate.subtract(1, d) - ', endDate.subtract(1, 'd').format('YYYY-MM-DDTHH:mm'));
+      //   if (output.isAfter(endDate.subtract(1, 'd'))) output = endDate.subtract(1, 'd');
+      // }
+
+      if (key === "endDateInput") {
+        // console.log('startDate - ', startDate.format('YYYY-MM-DDTHH:mm'));
+        // if (output.isBefore(startDate)) output = startDate.add(1, 'd');
+        output = addDay(output);
+      }
+
+      // console.log('output - ', output.format('YYYY-MM-DDTHH:mm'));
+      // console.log('************');
+
+      return output.set("hour", parseInt(hour, 10));
+    }
+  };
+
+  const handleDateInputBlur = (key, e) => {
+    const reserveValue =
+      key === "startDateInput" ? startDateInput : endDateInput;
+    const valueForRollback = key === "startDateInput" ? startDate : endDate;
+
+    const execute = key === "startDateInput" ? setStartDate : setEndDate;
+    const executeForCalendar = key === "startDateInput" ? setDate1 : setDate2;
+    const prepareValueForCalendar = (newDate) => {
+      if (key === "endDateInput") return newDate;
+      return moment(newDate).isSameOrAfter(moment(date2), "month")
+        ? moment(date2).subtract(1, "month")
+        : moment(newDate);
+    };
+
+    const newDateValue = e?.target?.value ?? reserveValue;
+    const processedNewDate = processOverflow(
+      newDateValue,
+      valueForRollback,
+      key,
+    );
+    execute(processedNewDate);
+    executeForCalendar(prepareValueForCalendar(processedNewDate));
+    doBlur(key, e);
+  };
+
+  const handleKeyPressed = (code, e, type) => {
+    if (code === 13) handleDateInputBlur(type, e);
+    if (code === 27) doBlur(type, e);
+  };
+
+  // ********************
+  // Render Functions
+  // ********************
+
+  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 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: moment(startDate).format(MAIN_FORMAT),
+            end: moment(endDate).format(MAIN_FORMAT),
+            startPrevDate: moment(startPrevDate).format(MAIN_FORMAT),
+            endPrevDate: moment(endPrevDate).format(MAIN_FORMAT),
+            compare: isCompare,
+          })
+        }
+      >
+        {txt?.buttons?.apply || "apply"}
+      </Btn>
+    </>
+  );
+
+  const renderPreviousPeriod = () => (
+    <>
+      {txt?.labels?.previousPeriod || ""}:{" "}
+      <span className="date-picker__previous-period-interval">{title}</span>
+    </>
+  );
+
+  // ********************
+  // useEffects
+  // ********************
+
+  useEffect(() => {
+    if (moment(startDate).isSameOrAfter(endDate)) {
+      setStartDate(moment(endDate).subtract(1, "d"));
+      setDate1(moment(endDate).subtract(1, "d"));
+    }
+  }, [startDate]);
+
+  useEffect(() => {
+    if (moment(endDate).isSameOrBefore(startDate)) {
+      setEndDate(moment(startDate).add(1, "d"));
+      setDate2(moment(startDate).add(1, "d"));
+    }
+  }, [endDate]);
+
+  useEffect(() => {
+    if (moment(startDate).isBefore(moment(endDate), "month")) {
+      setDate1(moment(startDate));
+      setDate2(moment(endDate));
+    }
+    setInterval();
+  }, [startDate, endDate]);
+
+  useEffect(() => {
+    if (
+      moment(date1).isSameOrAfter(moment(date2), "month") &&
+      !withMobileLogic
+    ) {
+      setDate1(moment(date2).subtract(1, "month"));
+    }
+  }, [date1, date2]);
+
+  useEffect(() => {
+    onChangeInterval(dateInterval);
+  }, [dateInterval]);
+
+  useEffect(() => {
+    if (typeof onChangeMobile === "function") {
+      onChangeMobile({
+        start: moment(startDate).format(MAIN_FORMAT),
+        end: moment(endDate).format(MAIN_FORMAT),
+        startPrevDate: moment(startPrevDate).format(MAIN_FORMAT),
+        endPrevDate: moment(endPrevDate).format(MAIN_FORMAT),
+        compare: isCompare,
+      });
+    }
+  }, [startDate, endDate, startPrevDate, endPrevDate, isCompare]);
+
+  const renderRowStart = () => {
+    return (
+      <div className="date-picker__date-row">
+        <DateInput
+          ref={startDateInputRef}
+          testId={`datepicker-${testId}_start-date-input`}
+          RC="date-picker__date-input"
+          className={cn("date-picker__date-input")}
+          isFocused={isStartFocused}
+          value={startDateInput}
+          date={getCorrectedDateForDateInput("startDateInput", startDate)}
+          disabled={!startDate}
+          onChange={setStartDateInput}
+          onFocus={(e) => handleDateInputFocus("startDateInput", e)}
+          onBlur={(e) => handleDateInputBlur("startDateInput", e)}
+          onKeyUp={(code, e) => handleKeyPressed(code, e, "startDateInput")}
+        />
+        <SelectInput
+          testId={testId}
+          id={`datepicker-id-${mainId}_start-hour-select-input`}
+          dataTest="datepicker_start-hour-select-input"
+          className={cn("date-picker__hour-select-input")}
+          onChange={(value) => handleChangeStartHour(value)}
+          value={startHour}
+          options={getStartHourItems()}
+          disabled={!startDate}
+          isDoNotPullOutListOfMainContainer={isDoNotPullOutListOfMainContainer}
+          short
+          withMobileLogic={withMobileLogic}
+        />
+      </div>
+    );
+  };
+  const renderRowEnd = () => {
+    return (
+      <div className="date-picker__date-row">
+        <DateInput
+          ref={endDateInputRef}
+          testId={`datepicker-${testId}_start-date-input`}
+          RC="date-picker__date-input"
+          className={cn("date-picker__date-input")}
+          isFocused={isEndFocused}
+          value={endDateInput}
+          date={getCorrectedDateForDateInput("endDateInput", endDate)}
+          disabled={!endDate}
+          onChange={setEndDateInput}
+          onFocus={(e) => handleDateInputFocus("endDateInput", e)}
+          onBlur={(e) => handleDateInputBlur("endDateInput", e)}
+          onKeyUp={(code, e) => handleKeyPressed(code, e, "endDateInput")}
+        />
+        <SelectInput
+          testId={testId}
+          id={`datepicker-id-${mainId}_end-hour-select-input`}
+          dataTest="datepicker_end-hour-select-input"
+          className={cn("date-picker__hour-select-input")}
+          onChange={(value) => handleChangeEndHour(value)}
+          value={endHour}
+          options={getEndHourItems()}
+          disabled={!endDate}
+          isDoNotPullOutListOfMainContainer={isDoNotPullOutListOfMainContainer}
+          short
+          withMobileLogic={withMobileLogic}
+        />
+      </div>
+    );
+  };
+
+  const renderCalendarStart = () => {
+    return (
+      <Calendar
+        testId={testId}
+        className="date-picker__calendar"
+        date={date1}
+        setDate={setDate1}
+        allowNext={
+          withMobileLogic
+            ? !moment(date1)
+                .startOf("month")
+                .isSameOrAfter(moment().startOf("day"), "months")
+            : !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}
+      />
+    );
+  };
+  const renderCalendarEnd = () => {
+    return (
+      <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}
+      />
+    );
+  };
+
+  const render = () => {
+    return (
+      <div className={cn("date-picker", className)}>
+        <div className="date-picker__header">
+          <div className="date-picker__inputs-block">
+            {renderRowStart()}
+            <div className="date-picker__inputs-separator date-picker__header--gray">
+              —
+            </div>
+            {renderRowEnd()}
+          </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">
+            {renderCalendarStart()}
+            {renderCalendarEnd()}
+          </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
+                  dataTest="datepicker_compare"
+                  label={txt?.labels?.compare || "Compare"}
+                  isSwitchOn={isCompare}
+                  onChange={() => {
+                    onChangeCompare(!isCompare);
+                    setIsCompare((state) => !state);
+                  }}
+                />
+              </div>
+            </div>
+          ) : (
+            <div />
+          )}
+          <div className="date-picker__buttons-block">{renderButtons()}</div>
+        </div>
+      </div>
+    );
+  };
+  const renderMobile = () => {
+    return (
+      <div className={cn("date-picker", className)}>
+        <div className="date-picker__header">
+          <div className="date-picker__inputs-block">
+            {renderRowStart()}
+            <div className="date-picker__inputs-separator date-picker__header--gray">
+              —
+            </div>
+            {renderRowEnd()}
+          </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">
+            {renderCalendarStart()}
+          </div>
+        </div>
+      </div>
+    );
+  };
+  return withMobileLogic ? renderMobile() : render();
+};
+
+export default Datepicker;