cabinet/assets/controllers/datePicker_controller.js

import { Controller } from 'stimulus';

import daterangepicker from 'daterangepicker'
import 'daterangepicker/daterangepicker.css'

/*
 * This is an example Stimulus controller!
 *
 * Any element with a data-controller="datePicker" attribute will cause
 * this controller to be executed. The name "hello" comes from the filename:
 * datePicker_controller.js -> "datePicker"
 *
 * Delete this file or adapt it for your use!
 */
export default class extends Controller {
    connect() {
        var locale = {
            format: 'DD.MM.YYYY',
            "applyLabel": "Ок",
            "cancelLabel": "Отмена",
            "fromLabel": "От",
            "toLabel": "До",
            "customRangeLabel": "Произвольный",
            "daysOfWeek": [
                "Вс",
                "Пн",
                "Вт",
                "Ср",
                "Чт",
                "Пт",
                "Сб"
            ],
            "monthNames": [
                "Январь",
                "Февраль",
                "Март",
                "Апрель",
                "Май",
                "Июнь",
                "Июль",
                "Август",
                "Сентябрь",
                "Октябрь",
                "Ноябрь",
                "Декабрь"
            ],
            firstDay: 1
        };

        var date = new Date();
        var lastDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7);
        
        // Получаем значение даты из URL параметра или из атрибута value элемента
        let currentDateValue = this.element.value || this.element.getAttribute('value');
        
        // Если значение не установлено, пробуем получить из URL
        if (!currentDateValue || currentDateValue.trim() === '') {
            const urlParams = new URLSearchParams(window.location.search);
            currentDateValue = urlParams.get('specialist_search[current_date]') || 
                             urlParams.get('specialist_search%5Bcurrent_date%5D') ||
                             decodeURIComponent(urlParams.get('specialist_search%5Bcurrent_date%5D') || '');
        }

        if (this.element.getAttribute('range') == 'true') {
            let startDate = date;
            let endDate = lastDate;
            
            // Если есть значение из URL или value, парсим его
            if (currentDateValue && currentDateValue.trim() !== '') {
                const dateRange = this.parseDateRange(currentDateValue);
                if (dateRange && dateRange.start && dateRange.end) {
                    startDate = dateRange.start;
                    endDate = dateRange.end;
                }
            }
            
            // Форматируем даты для daterangepicker (формат DD.MM.YYYY)
            const formattedStart = window.dateFormat(startDate, 'd.m.Y');
            const formattedEnd = window.dateFormat(endDate, 'd.m.Y');
            
            const picker = jQuery(this.element).daterangepicker({
                locale: locale,
                "startDate": formattedStart,
                "endDate": formattedEnd
            }, function(start, end, label) {
                // Callback при изменении даты
            });
            
            // Устанавливаем значение в поле после инициализации
            // daterangepicker автоматически форматирует значение согласно locale.format
            // Используем setTimeout чтобы дать время daterangepicker инициализироваться
            setTimeout(() => {
                if (currentDateValue && currentDateValue.trim() !== '') {
                    this.element.value = currentDateValue.trim();
                } else {
                    this.element.value = `${formattedStart} - ${formattedEnd}`;
                }
            }, 100);
        } else {
            let selectedDate = date;
            
            // Если есть значение, парсим его
            if (currentDateValue && currentDateValue.trim() !== '') {
                const parsedDate = this.parseSingleDate(currentDateValue);
                if (parsedDate) {
                    selectedDate = parsedDate;
                    this.element.value = currentDateValue;
                }
            }
            
            jQuery(this.element).daterangepicker({
                singleDatePicker: true,
                autoApply: true,
                showDropdowns: true,
                minYear: 1930,
                maxYear: new Date(),
                locale: locale,
                "startDate": window.dateFormat(selectedDate, 'd-m-Y')
            });
        }
    }
    
    parseDateRange(dateString) {
        if (!dateString) return null;
        
        // Парсим формат "13.01.2026 - 20.01.2026" или "13.01.2026+-+20.01.2026"
        const match = dateString.match(/^(.+?)\s*[-+]\s*(.+)$/);
        if (!match) return null;
        
        const startStr = match[1].trim();
        const endStr = match[2].trim();
        
        const startDate = this.parseDateString(startStr);
        const endDate = this.parseDateString(endStr);
        
        if (!startDate || !endDate) return null;
        
        return { start: startDate, end: endDate };
    }
    
    parseSingleDate(dateString) {
        if (!dateString) return null;
        return this.parseDateString(dateString.trim());
    }
    
    parseDateString(dateStr) {
        if (!dateStr) return null;
        
        // Формат "dd.mm.yyyy"
        const match = dateStr.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
        if (match) {
            const day = parseInt(match[1], 10);
            const month = parseInt(match[2], 10) - 1; // месяцы в JS начинаются с 0
            const year = parseInt(match[3], 10);
            return new Date(year, month, day);
        }
        
        // Формат "yyyy-mm-dd"
        const match2 = dateStr.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
        if (match2) {
            const year = parseInt(match2[1], 10);
            const month = parseInt(match2[2], 10) - 1;
            const day = parseInt(match2[3], 10);
            return new Date(year, month, day);
        }
        
        // Пробуем стандартный парсинг
        const parsed = new Date(dateStr);
        if (!isNaN(parsed.getTime())) {
            return parsed;
        }
        
        return null;
    }
}