Merge pull request #10 from n3wstar/module6-task2

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"
   }
 }

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();
+  };
+}

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({