Улучшение календаря фильтра дат: выбранные даты теперь всегда видны на экране
This commit is contained in:
@@ -40,11 +40,18 @@ class DateCarousel {
|
|||||||
this.today.setHours(0, 0, 0, 0);
|
this.today.setHours(0, 0, 0, 0);
|
||||||
this.daysCount = 0; // Будет рассчитано динамически
|
this.daysCount = 0; // Будет рассчитано динамически
|
||||||
|
|
||||||
// Загружаем сохранённую дату из localStorage или устанавливаем сегодня
|
// Проверяем, есть ли выбранная дата в фильтрах
|
||||||
// Но для нового поведения всегда устанавливаем сегодняшнюю дату как центральную
|
const selectedDate = this.getSelectedDateFromInputs();
|
||||||
|
if (selectedDate && this.isDateInRange(selectedDate)) {
|
||||||
|
// Если выбранная дата в пределах разумного диапазона, используем её как центр
|
||||||
|
this.centerDate = new Date(selectedDate);
|
||||||
|
this.centerDate.setHours(0, 0, 0, 0);
|
||||||
|
} else {
|
||||||
|
// Иначе устанавливаем сегодняшнюю дату как центральную
|
||||||
this.centerDate = new Date();
|
this.centerDate = new Date();
|
||||||
this.centerDate.setHours(0, 0, 0, 0); // Сбрасываем время!
|
this.centerDate.setHours(0, 0, 0, 0); // Сбрасываем время!
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Инициализация календарной ленты
|
* Инициализация календарной ленты
|
||||||
@@ -56,6 +63,37 @@ class DateCarousel {
|
|||||||
this.attachTodayHandler();
|
this.attachTodayHandler();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Получение выбранной даты из input полей
|
||||||
|
*/
|
||||||
|
getSelectedDateFromInputs() {
|
||||||
|
// Проверяем, совпадают ли даты "от" и "до" - это означает, что выбран конкретный день
|
||||||
|
if (this.minInput.value && this.maxInput.value && this.minInput.value === this.maxInput.value) {
|
||||||
|
const selectedDate = new Date(this.minInput.value);
|
||||||
|
if (!isNaN(selectedDate.getTime())) {
|
||||||
|
return selectedDate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Проверка, находится ли дата в разумном диапазоне (не слишком далеко от сегодня)
|
||||||
|
*/
|
||||||
|
isDateInRange(date) {
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
// Проверяем, находится ли дата в пределах примерно 1 года от сегодня
|
||||||
|
const minDate = new Date(today);
|
||||||
|
minDate.setFullYear(today.getFullYear() - 1);
|
||||||
|
|
||||||
|
const maxDate = new Date(today);
|
||||||
|
maxDate.setFullYear(today.getFullYear() + 1);
|
||||||
|
|
||||||
|
return date >= minDate && date <= maxDate;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Расчёт количества дней на основе доступной ширины
|
* Расчёт количества дней на основе доступной ширины
|
||||||
*/
|
*/
|
||||||
@@ -271,6 +309,9 @@ class DateCarousel {
|
|||||||
|
|
||||||
console.log(`Selected date: ${formattedDate}, center stays at: ${this.formatDate(this.centerDate)}`);
|
console.log(`Selected date: ${formattedDate}, center stays at: ${this.formatDate(this.centerDate)}`);
|
||||||
|
|
||||||
|
// Сохраняем текущую позицию карусели на время сессии
|
||||||
|
this.saveCenterDate();
|
||||||
|
|
||||||
// Автоматическая отправка формы
|
// Автоматическая отправка формы
|
||||||
const form = this.minInput.closest('form');
|
const form = this.minInput.closest('form');
|
||||||
if (form) {
|
if (form) {
|
||||||
@@ -359,21 +400,21 @@ class DateCarousel {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Сохранение центральной даты в localStorage
|
* Сохранение центральной даты в sessionStorage (только на время сессии)
|
||||||
*/
|
*/
|
||||||
saveCenterDate() {
|
saveCenterDate() {
|
||||||
const key = `date_carousel_center_${this.minInputId}`;
|
const key = `date_carousel_center_${this.minInputId}`;
|
||||||
// Используем formatDate вместо toISOString для избежания проблем с часовыми поясами
|
// Используем formatDate вместо toISOString для избежания проблем с часовыми поясами
|
||||||
const centerDateStr = this.formatDate(this.centerDate);
|
const centerDateStr = this.formatDate(this.centerDate);
|
||||||
localStorage.setItem(key, centerDateStr);
|
sessionStorage.setItem(key, centerDateStr);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Загрузка центральной даты из localStorage
|
* Загрузка центральной даты из sessionStorage
|
||||||
*/
|
*/
|
||||||
loadSavedCenterDate() {
|
loadSavedCenterDate() {
|
||||||
const key = `date_carousel_center_${this.minInputId}`;
|
const key = `date_carousel_center_${this.minInputId}`;
|
||||||
const savedDateStr = localStorage.getItem(key);
|
const savedDateStr = sessionStorage.getItem(key);
|
||||||
|
|
||||||
if (savedDateStr) {
|
if (savedDateStr) {
|
||||||
const savedDate = new Date(savedDateStr);
|
const savedDate = new Date(savedDateStr);
|
||||||
|
|||||||
Reference in New Issue
Block a user