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

This commit is contained in:
2025-11-07 20:54:04 +03:00
parent efeb396204
commit 8e1b6fc157

View File

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