Fix 'Today' button functionality to properly set date filters and submit form
This commit is contained in:
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user