6.9. Renewal of the Century (Part 2)

package.json

@@ -33,6 +33,7 @@
     "node": "20"
   },
   "dependencies": {
-    "dayjs": "1.11.13"
+    "dayjs": "1.11.13",
+    "flatpickr": "4.6.13"
   }
 }

src/constants.js

@@ -71,13 +71,14 @@ export const TRIP_SORT_ITEMS = [
   },
 ];
 
-export const DATE_TIME_FORMAT = {
+export const DateFormat = {
   SHORT_DATE: 'MMM D',
   DATE_AND_TIME: 'DD/MM/YY HH:mm',
   TIME: 'HH:mm',
   D_H_M_DURATION: 'DD[D] HH[H] mm[M]',
   H_M_DURATION: 'HH[H] mm[M]',
-  M_DURATION: 'mm[M]'
+  M_DURATION: 'mm[M]',
+  DATE_PICKED: 'd/m/y H:i'
 };
 
 export const EVENTS_MESSAGE = {

src/util/utils.js

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
-import { DATE_TIME_FORMAT } from '../constants.js';
+import { DateFormat } from '../constants.js';
 
 export const getRandomInteger = (min = 1, max = 100) => Math.round(Math.random() * Math.abs(max - min)) + min;
 
@@ -14,14 +14,14 @@ export const calculateDuration = (start, end) => dayjs.duration(dayjs(end).diff(
 
 export const convertDuration = (value) => {
   if (value.get('day')) {
-    return value.format(DATE_TIME_FORMAT.D_H_M_DURATION);
+    return value.format(DateFormat.D_H_M_DURATION);
   }
 
   if (!value.get('day') && value.get('hour')) {
-    return value.format(DATE_TIME_FORMAT.H_M_DURATION);
+    return value.format(DateFormat.H_M_DURATION);
   }
 
-  return value.format(DATE_TIME_FORMAT.M_DURATION);
+  return value.format(DateFormat.M_DURATION);
 };
 
 export const isDateFuture = (start) => dayjs().isBefore(start);

src/view/event-editor-view.js

@@ -1,6 +1,8 @@
 import AbstractStatefulView from '../framework/view/abstract-stateful-view';
 import { convertDate, getCapitalized } from '../util/utils.js';
-import { DATE_TIME_FORMAT, EVENT_TYPES } from '../constants.js';
+import { DateFormat, EVENT_TYPES } from '../constants.js';
+import flatpickr from 'flatpickr';
+import 'flatpickr/dist/flatpickr.min.css';
 
 const createEventTypeItemTemplate = (type, pointId) => `
   ${EVENT_TYPES.map((eventType) => (`
@@ -89,8 +91,8 @@ const createEventEditorTemplate = (point, offers, destinations)=> {
   const { description, name, pictures } = eventDestination || {};
   const pointId = point.id || 0;
 
-  const startTime = convertDate(dateFrom, DATE_TIME_FORMAT.DATE_AND_TIME);
-  const endTime = convertDate(dateTo, DATE_TIME_FORMAT.DATE_AND_TIME);
+  const startTime = convertDate(dateFrom, DateFormat.DATE_AND_TIME);
+  const endTime = convertDate(dateTo, DateFormat.DATE_AND_TIME);
 
   return `
     <li class="trip-events__item">
@@ -162,6 +164,8 @@ export default class EventEditorView extends AbstractStatefulView {
 
   #handleFormSubmit = null;
   #handleEditClick = null;
+  #dateFromPicker = null;
+  #dateToPicker = null;
 
   constructor({ point, offers, destinations, onEditClick, onFormSubmit }) {
     super();
@@ -197,6 +201,21 @@ export default class EventEditorView extends AbstractStatefulView {
     this.element.querySelector('.event__input--destination').addEventListener('change', this.#changeDestinationHandler);
     this.element.querySelector('.event__available-offers')?.addEventListener('change', this.#changeAvailableOffersHandler);
     this.element.querySelector('.event__field-group--price').addEventListener('input', this.#changePriceHandler);
+
+    this.#setDatePicker();
+  }
+
+  removeElement() {
+    super.removeElement();
+
+    if (this.#dateFromPicker) {
+      this.#dateFromPicker.destroy();
+      this.#dateFromPicker = null;
+    }
+    if (this.#dateToPicker) {
+      this.#dateToPicker.destroy();
+      this.#dateToPicker = null;
+    }
   }
 
   #formSubmitHandler = (event) => {
@@ -231,4 +250,41 @@ export default class EventEditorView extends AbstractStatefulView {
       basePrice: parseInt(event.target.value, 10)
     });
   };
+
+  #setDatePicker = () => {
+    const startTime = this.element.querySelector(`#event-start-time-${this._state.id}`);
+    const endTime = this.element.querySelector(`#event-end-time-${this._state.id}`);
+
+    const generalFlatpickrConfig = {
+      enableTime: true,
+      'time_24hr': true,
+      dateFormat: DateFormat.DATE_PICKED
+    };
+
+    this.#dateFromPicker = flatpickr(
+      startTime,
+      {
+        ...generalFlatpickrConfig,
+        maxDate: this._state.dateTo,
+        onChange: this.#changeDateHandler('dateFrom'),
+        onClose: (_, userDate) => this.#dateToPicker.set('minDate', userDate)
+      }
+    );
+
+    this.#dateToPicker = flatpickr(
+      endTime,
+      {
+        ...generalFlatpickrConfig,
+        maxDate: this._state.dateFrom,
+        onChange: this.#changeDateHandler('dateTo'),
+        onClose: (_, userDate) => this.#dateFromPicker.set('maxDate', userDate)
+      }
+    );
+  };
+
+  #changeDateHandler = (name) => ([userDate]) => {
+    this._setState({
+      [name]: userDate
+    });
+  };
 }

src/view/events-item-view.js

@@ -1,6 +1,6 @@
 import AbstractView from '../framework/view/abstract-view.js';
 import { calculateDuration, convertDate, convertDuration, getCapitalized } from '../util/utils.js';
-import { DATE_TIME_FORMAT } from '../constants.js';
+import { DateFormat } from '../constants.js';
 
 const createEventSelectedOffersTemplate = (selectedOffers) => {
   if (selectedOffers.length === 0) {
@@ -25,9 +25,9 @@ const createEventItemTemplate = (point, offers, destinations) => {
   const selectedOffers = defaultOffers.filter((defaultOffer) => point.offers.includes(defaultOffer.id));
   const destination = destinations.find((item) => item.id === point.destination);
 
-  const startDate = convertDate(dateFrom, DATE_TIME_FORMAT.SHORT_DATE);
-  const startTime = convertDate(dateFrom, DATE_TIME_FORMAT.TIME);
-  const endTime = convertDate(dateTo, DATE_TIME_FORMAT.TIME);
+  const startDate = convertDate(dateFrom, DateFormat.SHORT_DATE);
+  const startTime = convertDate(dateFrom, DateFormat.TIME);
+  const endTime = convertDate(dateTo, DateFormat.TIME);
   const duration = convertDuration(calculateDuration(dateFrom, dateTo));
   const favorite = isFavorite ? 'event__favorite-btn--active' : '';