From 2ea64b110c2a37e34f140d614515ba5027c86a22 Mon Sep 17 00:00:00 2001
From: andrey <yagunov02@bk.ru>
Date: Tue, 28 May 2024 00:51:11 +0500
Subject: [PATCH] module6-task2

---
 package-lock.json          | 13 +++++++++-
 package.json               |  9 ++++---
 src/date-picker.js         | 40 ++++++++++++++++++++++++++++++
 src/view/form-edit-view.js | 51 +++++++++++++++++++++++++++++++++++++-
 4 files changed, 107 insertions(+), 6 deletions(-)
 create mode 100644 src/date-picker.js

diff --git a/package-lock.json b/package-lock.json
index 0af64a0..f63d125 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "big-trip",
       "version": "19.0.0",
       "dependencies": {
-        "dayjs": "^1.11.10"
+        "dayjs": "^1.11.10",
+        "flatpickr": "^4.6.13"
       },
       "devDependencies": {
         "@babel/core": "7.20.5",
@@ -4286,6 +4287,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw=="
+    },
     "node_modules/flatted": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
@@ -11080,6 +11086,11 @@
         "rimraf": "^3.0.2"
       }
     },
+    "flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw=="
+    },
     "flatted": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
diff --git a/package.json b/package.json
index 5fcf5a1..df66fb3 100644
--- a/package.json
+++ b/package.json
@@ -18,19 +18,20 @@
     "@babel/preset-env": "7.20.2",
     "babel-loader": "9.1.0",
     "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.2",
     "eslint": "8.28.0",
     "eslint-config-htmlacademy": "8.0.0",
     "html-webpack-plugin": "^5.5.1",
+    "style-loader": "3.3.1",
     "webpack": "^5.90.3",
     "webpack-cli": "5.0.0",
-    "webpack-dev-server": "4.11.1",
-    "css-loader" : "6.7.2",
-    "style-loader": "3.3.1"
+    "webpack-dev-server": "4.11.1"
   },
   "engines": {
     "node": "18"
   },
   "dependencies": {
-    "dayjs": "^1.11.10"
+    "dayjs": "^1.11.10",
+    "flatpickr": "^4.6.13"
   }
 }
diff --git a/src/date-picker.js b/src/date-picker.js
new file mode 100644
index 0000000..bd2c890
--- /dev/null
+++ b/src/date-picker.js
@@ -0,0 +1,40 @@
+import flatpickr from 'flatpickr';
+import 'flatpickr/dist/flatpickr.min.css';
+
+export default class DatePicker {
+  constructor({
+    dateItem,
+    defaultDate,
+    minDate = null,
+    maxDate = null,
+    onClose
+  })
+
+  {
+    this.datePicker = flatpickr(dateItem,
+      {
+        dateFormat: 'd/m/y H:i',
+        enableTime: true,
+        locale: {
+          firstDayOfWeek: 1,
+        },
+        'time_24hr': true,
+        defaultDate,
+        minDate,
+        maxDate,
+        onClose,
+      });
+  }
+
+  setMaxDate = (date) => {
+    this.datePicker.set('maxDate', date);
+  };
+
+  setMinDate = (date) => {
+    this.datePicker.set('minDate', date);
+  };
+
+  destroy = () => {
+    this.datePicker.destroy();
+  };
+}
diff --git a/src/view/form-edit-view.js b/src/view/form-edit-view.js
index 6fb949a..53da71b 100644
--- a/src/view/form-edit-view.js
+++ b/src/view/form-edit-view.js
@@ -1,7 +1,7 @@
 import { CreateFormEditMarkup } from '../template/form-edit-markup.js';
 import { EMPTY_POINT } from '../const.js';
 import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
-
+import DatePicker from '../date-picker.js';
 
 export default class FormEditView extends AbstractStatefulView {
   #point = null;
@@ -10,6 +10,8 @@ export default class FormEditView extends AbstractStatefulView {
   #onResetClick = null;
   #onSubmitClick = null;
   #onRollUpClick = null;
+  #pickDateFrom = null;
+  #pickDateTo = null;
 
   constructor({point = EMPTY_POINT, pointDestination, pointOffers, onResetClick, onSubmitClick, onRollUpClick }){
     super();
@@ -41,8 +43,55 @@ export default class FormEditView extends AbstractStatefulView {
     this.element.querySelector('.event__input--destination').addEventListener('change', this.#changeDestinationHandler);
     this.element.querySelector('.event__input--price').addEventListener('change', this.#changePriceHandler);
     this.element.querySelector('.event__available-offers')?.addEventListener('change', this.#changeOffersHandler);
+    this.#setDatePickers();
   }
 
+  #setDatePickers = () => {
+    this.#pickDateFrom = new DatePicker({
+      dateItem: this.element.querySelector('#event-start-time-1'),
+      defaultDate: this._state.dateFrom,
+      maxDate: this._state.dateTo,
+      onClose: this.#dateFromCloseHandler,
+    });
+
+    this.#pickDateTo = new DatePicker({
+      dateItem: this.element.querySelector('#event-end-time-1'),
+      defaultDate: this._state.dateTo,
+      minDate: this._state.dateFrom,
+      onClose: this.#dateToCloseHandler,
+    });
+  };
+
+  #dateFromCloseHandler = ([userDate]) => {
+    this._setState({
+      dateFrom: userDate
+    });
+
+    this.#pickDateTo.setMinDate(this._state.dateFrom);
+  };
+
+  #dateToCloseHandler = ([userDate]) => {
+    this._setState({
+      dateTo: userDate
+    });
+
+    this.#pickDateFrom.setMaxDate(this._state.dateTo);
+  };
+
+  removeElement = () => {
+    super.removeElement();
+
+    if (this.#pickDateFrom) {
+      this.#pickDateFrom.destroy();
+      this.#pickDateFrom = null;
+    }
+
+    if (this.#pickDateTo) {
+      this.#pickDateTo.destroy();
+      this.#pickDateTo = null;
+    }
+  };
+
   #changeTypeHandler = (event) => {
     event.preventDefault();
     this.updateElement({