Fix 'Today' button functionality to properly set date filters and submit form

myproject/orders/static/orders/js/date_filter.js

@@ -39,14 +39,14 @@ class DateCarousel {
         this.today = new Date();
         this.today.setHours(0, 0, 0, 0);
         this.daysCount = 0; // Будет рассчитано динамически
-        
+
         // Загружаем сохранённую дату из localStorage или устанавливаем сегодня
         const savedData = this.loadSavedCenterDate();
         if (savedData) {
             // Если есть смещение, это означает, что дата была выбрана пользователем
             if (savedData.offset !== 0) {
                 // Проверяем, есть ли выбранная дата в фильтрах
-                if (this.minInput && this.minInput.value && this.maxInput.value && 
+                if (this.minInput && this.minInput.value && this.maxInput.value &&
                     this.minInput.value === this.maxInput.value) {
                     // Получаем выбранную дату из фильтра
                     const parts = this.minInput.value.split('-');
@@ -57,7 +57,7 @@ class DateCarousel {
                             parseInt(parts[2])
                         );
                         selectedDate.setHours(0, 0, 0, 0);
-                        
+
                         // Вычисляем центральную дату: выбранная дата минус смещение
                         this.centerDate = new Date(selectedDate);
                         this.centerDate.setDate(this.centerDate.getDate() - savedData.offset);
@@ -84,14 +84,14 @@ class DateCarousel {
     init() {
         this.calculateDaysCount();
         this.loadSelectedDate(); // Загрузить выбранную дату из фильтра
-        
+
         // Если в localStorage есть сохраненные данные
         const savedData = this.loadSavedCenterDate();
         if (savedData) {
             // Если есть смещение, это означает, что дата была выбрана пользователем
             if (savedData.offset !== 0) {
                 // Проверяем, есть ли выбранная дата в фильтрах
-                if (this.minInput.value && this.maxInput.value && 
+                if (this.minInput.value && this.maxInput.value &&
                     this.minInput.value === this.maxInput.value) {
                     // Получаем выбранную дату из фильтра
                     const parts = this.minInput.value.split('-');
@@ -102,9 +102,9 @@ class DateCarousel {
                             parseInt(parts[2])
                         );
                         selectedDate.setHours(0, 0, 0, 0);
-                        
+
                         // Вычисляем центральную дату: выбранная дата минус смещение
-                        // (т.к. смещение показывает, на сколько дней выбранная дата 
+                        // (т.к. смещение показывает, на сколько дней выбранная дата
                         // смещена вправо от центра)
                         this.centerDate = new Date(selectedDate);
                         this.centerDate.setDate(this.centerDate.getDate() - savedData.offset);
@@ -121,9 +121,10 @@ class DateCarousel {
                 this.centerDate = savedData.centerDate;
             }
         }
-        
+
         this.render();
         this.attachNavHandlers();
+        this.attachTodayHandler();
     }
 
     /**
@@ -187,6 +188,7 @@ class DateCarousel {
         // Перерисовываем только если количество дней изменилось
         if (oldDaysCount !== this.daysCount) {
             this.render();
+            this.attachTodayHandler(); // Восстанавливаем обработчик кнопки "Сегодня" после рендеринга
         }
     }
 
@@ -361,7 +363,6 @@ class DateCarousel {
     attachNavHandlers() {
         const prevBtn = this.container.parentElement.querySelector('.carousel-prev');
         const nextBtn = this.container.parentElement.querySelector('.carousel-next');
-        const todayBtn = this.container.parentElement.querySelector('.today-btn');
 
         if (prevBtn) {
             prevBtn.addEventListener('click', () => this.shiftDays(-1));
@@ -370,16 +371,37 @@ class DateCarousel {
         if (nextBtn) {
             nextBtn.addEventListener('click', () => this.shiftDays(1));
         }
-        
+    }
+
+    /**
+     * Подключение обработчика для кнопки "Сегодня"
+     * Вынесено в отдельный метод, чтобы можно было вызывать после полной отрисовки компонента
+     */
+    attachTodayHandler() {
+        const todayBtn = this.container.parentElement.querySelector('.today-btn');
+
         if (todayBtn) {
-            todayBtn.addEventListener('click', () => this.goToToday());
+            todayBtn.removeEventListener('click', this.boundGoToToday); // Удаляем предыдущий обработчик, если был
+            this.boundGoToToday = this.goToToday.bind(this);
+            todayBtn.addEventListener('click', this.boundGoToToday);
+            console.log('Today button handler attached');
+        } else {
+            console.error('Today button not found when trying to attach handler');
         }
     }
-    
+
     /**
      * Переход к сегодняшней дате
      */
     goToToday() {
+        console.log('Today button clicked');
+        
+        // Проверяем существование элементов
+        if (!this.minInput || !this.maxInput) {
+            console.error('minInput or maxInput not found!');
+            return;
+        }
+        
         const today = new Date();
         today.setHours(0, 0, 0, 0);
         
@@ -387,25 +409,34 @@ class DateCarousel {
         const formattedDate = this.formatDate(today);
         this.minInput.value = formattedDate;
         this.maxInput.value = formattedDate;
+        
+        console.log(`Set values - Min: ${this.minInput.value}, Max: ${this.maxInput.value}`);
 
         // Устанавливаем сегодняшнюю дату как центральную
         this.centerDate = today;
         
-        // Сохраняем новую центральную дату без смещения
+        // При нажатии на "Сегодня" устанавливаем центральную дату на сегодня без смещения
-        this.saveCenterDate();
+        // и сохраняем без смещения, чтобы календарь центрировался на сегодня
+        this.saveCenterDate(0);
         
         // Очищаем выделение с других кнопок и обновляем визуальное состояние
         this.render();
         
+        // Обновляем обработчик после перерисовки
+        this.attachTodayHandler();
+        
         console.log(`Navigated to today: ${formattedDate}`);
 
         // Автоматическая отправка формы
         const form = this.minInput.closest('form');
         if (form) {
+            console.log('Submitting form');
             form.submit();
+        } else {
+            console.error('Form not found!');
         }
     }
-    
+
     /**
      * Сохранение центральной даты и смещения в localStorage
      */
@@ -418,14 +449,14 @@ class DateCarousel {
         };
         localStorage.setItem(key, JSON.stringify(saveData));
     }
-    
+
     /**
      * Загрузка центральной даты из localStorage
      */
     loadSavedCenterDate() {
         const key = `date_carousel_center_${this.minInputId}`;
         const savedDataStr = localStorage.getItem(key);
-        
+
         if (savedDataStr) {
             try {
                 const savedData = JSON.parse(savedDataStr);
@@ -450,10 +481,10 @@ class DateCarousel {
                 return null;
             }
         }
-        
+
         return null;
     }
-    
+
     /**
      * Вычисление смещения выбранной даты от центральной
      */
@@ -461,17 +492,17 @@ class DateCarousel {
         // Генерируем дни с текущей центральной датой
         const days = this.generateDays();
         // Находим индекс выбранной даты
-        const selectedIndex = days.findIndex(day => 
+        const selectedIndex = days.findIndex(day =>
             day.date.getTime() === selectedDate.getTime()
         );
-        
+
         if (selectedIndex !== -1) {
             // Находим центральный индекс
             const centerIndex = Math.floor(this.daysCount / 2);
             // Вычисляем смещение от центра
             return selectedIndex - centerIndex;
         }
-        
+
         return 0; // Если дата не найдена, возвращаем 0
     }
 
@@ -483,4 +514,4 @@ class DateCarousel {
         this.saveCenterDate(); // Сохраняем новую центральную дату (без смещения для прокрутки)
         this.render();
     }
-}
+}