diff --git a/package-lock.json b/package-lock.json
index 62fa5b8..bd94b73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "babel-loader": "^9.1.3",
         "copy-webpack-plugin": "^12.0.2",
         "dayjs": "1.11.6",
-        "flatpickr": "4.6.13",
+        "flatpickr": "^4.6.13",
         "he": "1.2.0",
         "html-webpack-plugin": "^5.6.0",
         "webpack-dev-server": "^5.0.2"
diff --git a/package.json b/package.json
index a559f77..58e69ab 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^12.0.2",
     "dayjs": "1.11.6",
-    "flatpickr": "4.6.13",
+    "flatpickr": "^4.6.13",
     "he": "1.2.0",
     "html-webpack-plugin": "^5.6.0",
     "webpack-dev-server": "^5.0.2"
diff --git a/src/view/calendar-view.js b/src/view/calendar-view.js
new file mode 100644
index 0000000..5bd18a2
--- /dev/null
+++ b/src/view/calendar-view.js
@@ -0,0 +1,36 @@
+import flatpickr from 'flatpickr';
+import 'flatpickr/dist/flatpickr.min.css';
+
+export default class CalendarView {
+  #config = {
+    dateFormat: 'd/m/y H:i',
+    enableTime: true,
+    locale: {
+      firstDayOfWeek: 1,
+    },
+    'time_24hr': true
+  };
+
+  constructor ({element,defaultDate,minDate = null,maxDate = null,onClose}) {
+    this.#calendar = flatpickr(element, {
+      ...this.#config,
+      defaultDate,
+      minDate,
+      maxDate,
+      onClose,
+    });
+  }
+
+  #calendar;
+
+  destroy = () => {
+    this.#calendar.destroy();
+  };
+
+  set = (dateType, date) => {
+    if(dateType === 'minDate' || dateType === 'maxDate'){
+      this.#calendar.set(dateType, date);
+    }
+  };
+
+}
diff --git a/src/view/point-edit-view.js b/src/view/point-edit-view.js
index 72731ed..bee48d9 100644
--- a/src/view/point-edit-view.js
+++ b/src/view/point-edit-view.js
@@ -1,6 +1,7 @@
 import { POINT_EMPTY, TYPES } from '../const.js';
 import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
 import {formatToSlashDate} from '../utils.js';
+import CalendarView from './calendar-view.js';
 
 function createTypesElements(typeArray){
 
@@ -131,6 +132,8 @@ export default class EditPointView extends AbstractStatefulView{
   #offers;
   #onCloseEditPoint;
   #onSubmiClick;
+  #datepickerFrom;
+  #datepickerTo;
 
   constructor({point = POINT_EMPTY, destinations, offers, onCloseEditPoint, onSubmiClick}) {
     super();
@@ -163,6 +166,8 @@ export default class EditPointView extends AbstractStatefulView{
     this.element
       .querySelector('.event__type-group')
       .addEventListener('change', this.#typeChangeHandler);
+
+    this.#setDatapickers();
   };
 
   get template() {
@@ -173,6 +178,20 @@ export default class EditPointView extends AbstractStatefulView{
     });
   }
 
+  removeElement = () =>{
+    super.removeElement();
+
+    if(this.#datepickerFrom){
+      this.#datepickerFrom.destroy();
+      this.#datepickerFrom = null;
+    }
+
+    if(this.#datepickerTo){
+      this.#datepickerTo.destroy();
+      this.#datepickerTo = null;
+    }
+  };
+
   reset = (point) => this.updateElement({ point });
 
   #submitEditPoint = () =>{
@@ -235,6 +254,45 @@ export default class EditPointView extends AbstractStatefulView{
     this.#onSubmiClick();
   };
 
+  #setDatapickers = () =>{
+    const [dateFromElement, dateToElement] = this.element.querySelectorAll('.event__input--time');
+    this.#datepickerFrom = new CalendarView(
+      {
+        element: dateFromElement,
+        defaultDate: this._state.point.dateFrom,
+        maxDate: this._state.point.dateTo,
+        onClose: this.#dateFromCloseHandler
+      });
+
+    this.#datepickerTo = new CalendarView(
+      {
+        element: dateToElement,
+        defaultDate: this._state.point.dateTo,
+        minDate: this._state.point.dateFrom,
+        onClose: this.#dateToCloseHandler
+      });
+  };
+
+  #dateToCloseHandler = ([userDate]) =>{
+    this._setState({
+      point: {
+        ...this._state.point,
+        dateTo: userDate
+      }});
+
+    this.#datepickerFrom.set('maxDate', this._state.point.dateTo);
+  };
+
+  #dateFromCloseHandler = ([userDate]) =>{
+    this._setState({
+      point: {
+        ...this._state.point,
+        dateFrom: userDate
+      }});
+
+    this.#datepickerTo.set('minDate', this._state.point.dateTo);
+  };
+
   static parsePointToState = ({ point }) => ({ point });
   static parseStateToPoint = (state) => state.point;
 }