From b8d0758de57e0c7273f6194c5f0fd47f487cd733 Mon Sep 17 00:00:00 2001
From: Boris <glimah481@gmail.com>
Date: Sun, 26 Jan 2025 12:45:41 +0300
Subject: [PATCH] 6.2

---
 package-lock.json             |  7 ++++++
 package.json                  |  1 +
 src/view/editing-form-view.js | 43 +++++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 6a665da..16751f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "22.0.0",
       "dependencies": {
         "dayjs": "1.11.13",
+        "flatpickr": "4.6.13",
         "style-loader": "^3.3.2"
       },
       "devDependencies": {
@@ -4371,6 +4372,12 @@
         "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==",
+      "license": "MIT"
+    },
     "node_modules/flatted": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
diff --git a/package.json b/package.json
index 27a0e2c..ef03ad5 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "dayjs": "1.11.13",
+    "flatpickr": "4.6.13",
     "style-loader": "^3.3.2"
   }
 }
diff --git a/src/view/editing-form-view.js b/src/view/editing-form-view.js
index 6220096..187a499 100644
--- a/src/view/editing-form-view.js
+++ b/src/view/editing-form-view.js
@@ -1,5 +1,7 @@
 import { humanizeDueTime, capitalize } from '../utils.js';
 import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
+import flatpickr from 'flatpickr';
+import 'flatpickr/dist/flatpickr.min.css';
 
 function createEventTypeTemplate(eventTypes, eventId, type) {
   return eventTypes.map((eventType) => (
@@ -127,6 +129,8 @@ export default class EditingFormView extends AbstractStatefulView {
   #offers = [];
   #onSubmit = null;
   #onClick = null;
+  #flatpickrStart = null;
+  #flatpickrEnd = null;
 
   constructor({ event, destinations, offers, onSubmit, onClick, events }) {
     super();
@@ -154,6 +158,7 @@ export default class EditingFormView extends AbstractStatefulView {
       input.addEventListener('change', this.#onEventTypeChange)
     );
     this.element.querySelector('.event__input--destination')?.addEventListener('change', this.#onDestinationChange);
+    this.#setFlatpickr();
   }
 
   #onSubmitClick = (evt) => {
@@ -193,5 +198,43 @@ export default class EditingFormView extends AbstractStatefulView {
       ...state
     };
   }
+
+  #setFlatpickr() {
+    const { dateFrom, dateTo } = this._state;
+
+    if (this.#flatpickrStart) {
+      this.#flatpickrStart.destroy();
+      this.#flatpickrStart = null;
+    }
+
+    if (this.#flatpickrEnd) {
+      this.#flatpickrEnd.destroy();
+      this.#flatpickrEnd = null;
+    }
+
+    this.#flatpickrStart = flatpickr(
+      this.element.querySelector(`#event-start-time-${this._state.id}`),
+      {
+        enableTime: true,
+        dateFormat: 'd/m/y H:i',
+        defaultDate: dateFrom,
+        onChange: ([selectedDate]) => {
+          this.updateElement({ dateFrom: selectedDate });
+        }
+      }
+    );
+
+    this.#flatpickrEnd = flatpickr(
+      this.element.querySelector(`#event-end-time-${this._state.id}`),
+      {
+        enableTime: true,
+        dateFormat: 'd/m/y H:i',
+        defaultDate: dateTo,
+        onChange: ([selectedDate]) => {
+          this.updateElement({ dateTo: selectedDate });
+        }
+      }
+    );
+  }
 }