feat: Реализована календарная лента из 9 дней для фильтрации заказов
Основные изменения: **Компонент date_range_filter.html:** - Заменены простые кнопки на горизонтальную ленту из 9 дней - Добавлены стрелки навигации влево/вправо - Скрытые поля дат для работы с django-filter **Стили date_filter.css:** - Дизайн календарной ленты с карточками дней - Выделение сегодняшнего дня синим цветом - Выделение выбранной даты зеленым цветом - Hover-эффекты и анимации - Адаптивность для мобильных устройств - Стили для стрелок навигации **Логика date_filter.js:** - Класс DateCarousel для управления лентой - Генерация 9 дней (±4 от центральной даты) - Определение "Вчера/Сегодня/Завтра" для центральных 3 кнопок - Отображение числа (01-31) и дня недели (ПН-ВС) - Навигация стрелками (сдвиг на 1 день) - Клик по дню устанавливает дату в оба поля фильтра - Визуальная индикация выбранной даты **Формат каждой кнопки:** ┌─────────┐ │ Сегодня │ ← Текст (если вчера/сегодня/завтра) │ 07 │ ← Число месяца │ ЧТ │ ← День недели └─────────┘ **Поведение:** - По умолчанию: сегодня в центре (5-я кнопка) - Сегодняшний день выделен синим - Клик по дню фильтрует заказы за эту конкретную дату - Стрелки сдвигают весь диапазон на 1 день вперед/назад 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
{% comment %}
|
||||
Переиспользуемый компонент для фильтрации по диапазону дат
|
||||
Переиспользуемый компонент для фильтрации по диапазону дат с календарной лентой
|
||||
|
||||
Параметры:
|
||||
- field_after: поле фильтра "от" (например, filter.form.delivery_date_after)
|
||||
@@ -19,39 +19,33 @@
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<label for="{{ field_after.id_for_label }}" class="form-label text-muted small">От</label>
|
||||
{{ field_after }}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="{{ field_before.id_for_label }}" class="form-label text-muted small">До</label>
|
||||
{{ field_before }}
|
||||
</div>
|
||||
<!-- Скрытые поля для хранения дат -->
|
||||
<div class="d-none">
|
||||
{{ field_after }}
|
||||
{{ field_before }}
|
||||
</div>
|
||||
|
||||
<!-- Быстрые фильтры -->
|
||||
<div class="quick-filters mt-2">
|
||||
<small class="text-muted d-block mb-1">Быстрый выбор:</small>
|
||||
<div class="btn-group btn-group-sm w-100" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary quick-date-btn"
|
||||
data-min-input="{{ field_after.id_for_label }}"
|
||||
data-max-input="{{ field_before.id_for_label }}"
|
||||
data-period="today">
|
||||
Сегодня
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary quick-date-btn"
|
||||
data-min-input="{{ field_after.id_for_label }}"
|
||||
data-max-input="{{ field_before.id_for_label }}"
|
||||
data-period="tomorrow">
|
||||
Завтра
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary quick-date-btn"
|
||||
data-min-input="{{ field_after.id_for_label }}"
|
||||
data-max-input="{{ field_before.id_for_label }}"
|
||||
data-period="week">
|
||||
Неделя
|
||||
</button>
|
||||
<!-- Календарная лента с 9 днями -->
|
||||
<div class="date-carousel">
|
||||
<button type="button" class="carousel-nav-btn carousel-prev"
|
||||
data-min-input="{{ field_after.id_for_label }}"
|
||||
data-max-input="{{ field_before.id_for_label }}"
|
||||
title="Предыдущий день">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
</button>
|
||||
|
||||
<div class="date-carousel-container"
|
||||
id="dateCarousel_{{ field_after.id_for_label }}"
|
||||
data-min-input="{{ field_after.id_for_label }}"
|
||||
data-max-input="{{ field_before.id_for_label }}">
|
||||
<!-- Дни генерируются через JavaScript -->
|
||||
</div>
|
||||
|
||||
<button type="button" class="carousel-nav-btn carousel-next"
|
||||
data-min-input="{{ field_after.id_for_label }}"
|
||||
data-max-input="{{ field_before.id_for_label }}"
|
||||
title="Следующий день">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user