@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/temp/assets/scripts/datePicker.js

@@ -0,0 +1,699 @@
+import { formatDateInput, formatHourInput, formatMinuteInput } from '../../src/utils/date-picker';
+import flatpickr from 'flatpickr';
+import { Korean } from 'flatpickr/dist/l10n/ko';
+import moment from 'moment';
+// Constants
+const CONSTANTS = {
+    ICON_SIZES: {
+        xs: '14',
+        sm: '16',
+    },
+    CLASS_NAMES: {
+        RANGE_WRAPPER: 'ncua-range-date-picker',
+        RANGE_WITH_BUTTONS: 'ncua-range-date-picker-with-buttons',
+        DATE_PICKER: 'ncua-date-picker',
+        DATE_PICKER_INPUT: 'ncua-date-picker__input',
+        DATE_PICKER_ICO: 'ncua-date-picker__ico',
+        BUTTON_GROUP: 'ncua-button-group',
+        BUTTON_GROUP_HAS_BORDER: 'has-border',
+        BUTTON: 'ncua-button-group__item',
+        HAS_TIME: 'ncua-date-picker--has-time',
+    },
+    FORMATS: {
+        DATE: 'YYYY-MM-DD',
+        DATE_TIME: 'YYYY-MM-DD HH:mm',
+    },
+    ERROR_MESSAGES: {
+        FLATPICKR_NOT_LOADED: 'flatpickr 라이브러리가 로드되지 않았습니다.',
+        MOMENT_NOT_LOADED: 'moment 라이브러리가 로드되지 않았습니다.',
+    },
+};
+class DatePicker {
+    constructor(wrapper, options) {
+        this.flatpickrInstances = [];
+        this.currentButton = null;
+        const { buttons = [], size, autoComplete = 'off', datePickerOptions, onValidationError } = options;
+        this.validateWrapper(wrapper);
+        this.validationDependencies(buttons?.length > 0);
+        this.instanceId = DatePicker.instanceCounter++;
+        this.contentWrapper = wrapper;
+        this.datePickerOptions = datePickerOptions;
+        this.buttons = buttons;
+        this.size = size;
+        this.separator = '~';
+        this.autoComplete = autoComplete;
+        this.dateFormat = datePickerOptions[0].options.enableTime ? CONSTANTS.FORMATS.DATE_TIME : CONSTANTS.FORMATS.DATE;
+        this.onValidationError = onValidationError;
+        this.init();
+    }
+    validateWrapper(wrapper) {
+        if (DatePicker.usedWrappers.has(wrapper)) {
+            throw new Error(`이미 사용 중인 DOM 요소입니다. ` +
+                `같은 DOM 요소에는 하나의 DatePicker 인스턴스만 생성할 수 있습니다. ` +
+                `다른 DOM 요소를 사용하거나 기존 인스턴스를 먼저 제거해주세요.`);
+        }
+        DatePicker.usedWrappers.add(wrapper);
+    }
+    init() {
+        this.contentWrapper.innerHTML = '';
+        this.initializeWrapper();
+        this.initButtonGroup();
+        this.initDatePicker();
+    }
+    validationDependencies(hasButtons) {
+        if (typeof flatpickr === 'undefined') {
+            throw new Error(CONSTANTS.ERROR_MESSAGES.FLATPICKR_NOT_LOADED);
+        }
+        if (hasButtons && typeof moment === 'undefined') {
+            throw new Error(CONSTANTS.ERROR_MESSAGES.MOMENT_NOT_LOADED);
+        }
+    }
+    initializeWrapper() {
+        if (this.datePickerOptions.length < 2)
+            return;
+        this.contentWrapper.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER);
+    }
+    initButtonGroup() {
+        if (this.buttons.length === 0)
+            return;
+        if (this.contentWrapper.classList.contains(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER)) {
+            this.contentWrapper.classList.replace(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER, CONSTANTS.CLASS_NAMES.RANGE_WITH_BUTTONS);
+        }
+        this.contentWrapper.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WITH_BUTTONS);
+        const createButtonWrapperElement = () => {
+            const wrapper = document.createElement('div');
+            wrapper.className = `${CONSTANTS.CLASS_NAMES.BUTTON_GROUP} ${CONSTANTS.CLASS_NAMES.BUTTON_GROUP_HAS_BORDER} ${CONSTANTS.CLASS_NAMES.BUTTON_GROUP}--${this.size}`;
+            return wrapper;
+        };
+        const appendButtons = (wrapper) => {
+            this.buttons.forEach((button) => {
+                const buttonElement = this.createButtonElement(button);
+                wrapper.appendChild(buttonElement);
+            });
+        };
+        const wrapper = createButtonWrapperElement();
+        appendButtons(wrapper);
+        wrapper.addEventListener('click', this.updateDateWithButton.bind(this));
+        this.contentWrapper.appendChild(wrapper);
+    }
+    createButtonElement(button) {
+        if (button.isCurrent) {
+            this.currentButton = button;
+        }
+        const buttonElement = document.createElement('button');
+        buttonElement.className = `${CONSTANTS.CLASS_NAMES.BUTTON} ${button.isCurrent ? 'is-current' : ''}`;
+        buttonElement.textContent = button.text;
+        buttonElement.type = 'button';
+        return buttonElement;
+    }
+    reRenderButtonGroup(buttons) {
+        const buttonGroup = this.contentWrapper.querySelector(`.${CONSTANTS.CLASS_NAMES.BUTTON_GROUP}`);
+        if (!buttonGroup)
+            return;
+        buttonGroup.innerHTML = '';
+        buttons.forEach((button) => {
+            if (button.isCurrent) {
+                this.currentButton = button;
+            }
+            buttonGroup.appendChild(this.createButtonElement(button));
+        });
+        this.buttons = buttons;
+    }
+    initDatePicker() {
+        const datePickerOptions = this.datePickerOptions;
+        const createInputWrapperElement = (size) => {
+            const wrapper = document.createElement('div');
+            wrapper.className = `${CONSTANTS.CLASS_NAMES.DATE_PICKER} ${CONSTANTS.CLASS_NAMES.DATE_PICKER}--${size} ${this.datePickerOptions.some((option) => option.options.enableTime) ? CONSTANTS.CLASS_NAMES.HAS_TIME : ''}`;
+            return wrapper;
+        };
+        const createInput = (datePickerOption, index) => {
+            const defaultPlaceHolder = datePickerOption.options.enableTime
+                ? CONSTANTS.FORMATS.DATE_TIME
+                : CONSTANTS.FORMATS.DATE;
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.placeholder = datePickerOption.placeholder ?? defaultPlaceHolder;
+            input.name = datePickerOption.attrName ?? '';
+            input.id = `datepicker-${this.instanceId}-${datePickerOption.element}-${index}`;
+            input.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_INPUT;
+            input.autocomplete = this.autoComplete;
+            return input;
+        };
+        const createIcon = (size, elementId, index) => {
+            const getCalendarIconSvg = (size) => {
+                return `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 16 16" fill="none">
+        <path
+          d="M14 6.66671H2M10.6667 1.33337V4.00004M5.33333 1.33337V4.00004M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.257 13.5903 13.951 13.782 13.5747C14 13.1469 14 12.5868 14 11.4667V5.86671C14 4.7466 14 4.18655 13.782 3.75873C13.5903 3.3824 13.2843 3.07644 12.908 2.88469C12.4802 2.66671 11.9201 2.66671 10.8 2.66671H5.2C4.0799 2.66671 3.51984 2.66671 3.09202 2.88469C2.71569 3.07644 2.40973 3.3824 2.21799 3.75873C2 4.18655 2 4.7466 2 5.86671V11.4667C2 12.5868 2 13.1469 2.21799 13.5747C2.40973 13.951 2.71569 14.257 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z"
+          stroke="black"
+          stroke-width="1.33333"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </svg>`;
+            };
+            const ico = document.createElement('label');
+            ico.htmlFor = `datepicker-${this.instanceId}-${elementId}-${index}`;
+            ico.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_ICO;
+            ico.innerHTML = getCalendarIconSvg(CONSTANTS.ICON_SIZES[size]);
+            return ico;
+        };
+        const insertSeparator = () => {
+            const span = document.createElement('span');
+            span.textContent = this.separator;
+            this.contentWrapper.insertBefore(span, this.contentWrapper.querySelectorAll(`.${CONSTANTS.CLASS_NAMES.DATE_PICKER}`)[1]);
+        };
+        const createDatePickerElement = (datePickerOption, index) => {
+            const inputWrapper = createInputWrapperElement(this.size);
+            const input = createInput(datePickerOption, index);
+            inputWrapper.appendChild(input);
+            inputWrapper.appendChild(createIcon(this.size, datePickerOption.element, index));
+            inputWrapper.addEventListener('click', () => {
+                // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
+                // biome-ignore lint/suspicious/useIterableCallbackReturn: <explanation>
+                this.buttons.forEach((button) => (button.isCurrent = false));
+                this.currentButton = null;
+                this.reRenderButtonGroup(this.buttons);
+            });
+            this.contentWrapper.appendChild(inputWrapper);
+            if (index > 0) {
+                insertSeparator();
+            }
+            return this.initializeFlatpickr(input, datePickerOption.options, inputWrapper);
+        };
+        const createFlatpickrInstances = (datePickerOptions) => {
+            return datePickerOptions.map((datePickerOption, index) => createDatePickerElement(datePickerOption, index));
+        };
+        const calcInitDates = (datePickerOptions) => {
+            if (this.buttons.length > 0) {
+                const currentButton = this.buttons.find((button) => button.isCurrent);
+                if (!currentButton) {
+                    return datePickerOptions.map(() => '');
+                }
+                return this.calculateDatesFromButton(currentButton);
+            }
+            return datePickerOptions.map((datePickerOption) => {
+                if (datePickerOption.options?.defaultDate) {
+                    return moment(datePickerOption.options.defaultDate.toString()).format(this.dateFormat);
+                }
+                return '';
+            });
+        };
+        this.flatpickrInstances = createFlatpickrInstances(this.datePickerOptions);
+        const dates = calcInitDates(datePickerOptions);
+        this.setMultipleDates(dates);
+    }
+    initializeFlatpickr(input, options, wrapper) {
+        // flatpickr locale 설정 확인
+        const locale = typeof options.locale === 'string' ? options.locale : 'ko';
+        this.setupFlatpickrLocale(locale, options);
+        const onInputHandler = this.createInputHandler();
+        const onHourInputHandler = this.createHourInputHandler();
+        const onMinuteInputHandler = this.createMinuteInputHandler();
+        const onMouseDown = this.createMouseDownHandler(wrapper);
+        // onBlur 핸들러 추가하여 입력 전 날짜 저장
+        const onBlurHandler = this.createBlurHandler();
+        document.addEventListener('mousedown', onMouseDown, true);
+        return flatpickr(input, {
+            ...options,
+            allowInput: options.allowInput ?? true,
+            appendTo: wrapper,
+            time_24hr: true,
+            defaultHour: options.defaultHour || 0,
+            defaultMinute: options.defaultMinute || 0,
+            locale,
+            formatDate: (date, format, locale) => {
+                try {
+                    // 유효한 날짜인지 확인
+                    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+                        return '';
+                    }
+                    // moment로 포맷팅
+                    const momentDate = moment(date);
+                    if (!momentDate.isValid()) {
+                        return '';
+                    }
+                    // format을 moment 형식으로 변환
+                    const momentFormat = this.convertFlatpickrFormatToMoment(format);
+                    return momentDate.format(momentFormat);
+                }
+                catch (error) {
+                    // 오류 발생 시 빈 문자열 반환 (232-23 같은 잘못된 날짜 처리)
+                    return '';
+                }
+            },
+            onChange: this.createOnChangeHandler(options),
+            onReady: this.createOnReadyHandler(onInputHandler, onHourInputHandler, onMinuteInputHandler, onBlurHandler),
+            onDestroy: this.createOnDestroyHandler(onInputHandler, onHourInputHandler, onMinuteInputHandler, onMouseDown, onBlurHandler),
+        });
+    }
+    createBlurHandler() {
+        return (e) => {
+            const target = e.target;
+            const inputIndex = this.findFlatpickrInstanceIndexByInput(target);
+            if (inputIndex < 0)
+                return;
+            // blur 시점에 현재 selectedDates를 저장 (입력 전 상태)
+            const instance = this.flatpickrInstances[inputIndex];
+            if (instance && instance.selectedDates.length > 0) {
+                // 이전 날짜를 별도로 저장 (onChange에서 사용)
+                instance._previousDateBeforeInput = instance.selectedDates[0];
+            }
+        };
+    }
+    setupFlatpickrLocale(locale, options) {
+        if (flatpickr?.l10ns?.[locale]) {
+            return;
+        }
+        console.warn(`flatpickr locale '${locale}' is not loaded. Available locales:`, Object.keys(flatpickr?.l10ns || {}));
+        if (locale === 'ko') {
+            flatpickr.l10ns.ko = Korean;
+        }
+        else {
+            options.locale = undefined;
+        }
+    }
+    createInputHandler() {
+        return (e) => {
+            const target = e.target;
+            const input = target.value;
+            const instance = this.findFlatpickrInstanceByInput(target);
+            if (!instance)
+                return;
+            // 빈 입력 처리
+            if (!input || input.trim() === '') {
+                this.clearInputValue(target, instance);
+                return;
+            }
+            // 숫자나 하이픈이 없는 경우 처리
+            if (!/[0-9]/.test(input)) {
+                this.restorePreviousDate(target, instance);
+                return;
+            }
+            const formattedInput = formatDateInput(input);
+            // 포맷팅만 수행
+            if (formattedInput !== input) {
+                target.value = formattedInput;
+                return;
+            }
+            // 완전한 날짜 형식이지만 유효하지 않은 경우 처리
+            if (formattedInput && formattedInput.length >= 10) {
+                const parsedDate = moment(formattedInput);
+                if (!parsedDate.isValid()) {
+                    this.restorePreviousDate(target, instance);
+                }
+            }
+        };
+    }
+    findFlatpickrInstanceByInput(input) {
+        const index = this.findFlatpickrInstanceIndexByInput(input);
+        return index >= 0 ? this.flatpickrInstances[index] : null;
+    }
+    clearInputValue(target, instance) {
+        target.value = '';
+        instance.setDate('', false);
+    }
+    restorePreviousDate(target, instance) {
+        const hasPreviousDate = instance.selectedDates.length > 0;
+        if (!hasPreviousDate) {
+            this.clearInputValue(target, instance);
+            return;
+        }
+        const previousDate = instance.selectedDates[0];
+        const isValidDate = previousDate instanceof Date && !isNaN(previousDate.getTime());
+        if (isValidDate) {
+            target.value = moment(previousDate).format(this.dateFormat);
+            instance.setDate(previousDate, false);
+        }
+        else {
+            this.clearInputValue(target, instance);
+        }
+    }
+    createHourInputHandler() {
+        return (e) => {
+            const target = e.target;
+            const input = target.value;
+            const formattedInput = formatHourInput(input);
+            if (formattedInput === input)
+                return;
+            target.value = formattedInput;
+        };
+    }
+    createMinuteInputHandler() {
+        return (e) => {
+            const target = e.target;
+            const input = target.value;
+            const formattedInput = formatMinuteInput(input);
+            if (formattedInput === input)
+                return;
+            target.value = formattedInput;
+        };
+    }
+    createMouseDownHandler(wrapper) {
+        return (e) => {
+            const flatpickrCalendar = wrapper.querySelector('.flatpickr-calendar.open');
+            if (!flatpickrCalendar)
+                return;
+            if (flatpickrCalendar.contains(e.target))
+                return;
+            const timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+            timeInputs.forEach((input) => {
+                if (document.activeElement === input) {
+                    input.blur();
+                }
+            });
+        };
+    }
+    createOnChangeHandler(options) {
+        return (selectedDates, dateStr, instance) => {
+            try {
+                const inputIndex = this.findFlatpickrInstanceIndexByInput(instance.input);
+                if (inputIndex < 0)
+                    return;
+                // blur 시 저장한 이전 날짜 사용
+                const previousDate = instance._previousDateBeforeInput;
+                // selectedDates가 비어있거나 첫 번째 날짜가 유효하지 않은 경우 처리
+                if (!selectedDates ||
+                    selectedDates.length === 0 ||
+                    !selectedDates[0] ||
+                    !(selectedDates[0] instanceof Date) ||
+                    !this.isValidDate(selectedDates[0])) {
+                    // 유효하지 않은 날짜는 이전 값으로 복원하거나 빈 값으로 처리
+                    if (previousDate && this.isValidDate(previousDate)) {
+                        // 이전 값이 있으면 이전 값으로 복원
+                        instance.selectedDates = [previousDate];
+                        instance.setDate(previousDate, false);
+                    }
+                    else {
+                        // 이전 값이 없으면 빈 값으로 처리
+                        instance.selectedDates = [];
+                        instance.setDate('', false);
+                    }
+                    // 원본 onChange는 호출하지 않음
+                    return;
+                }
+                // 유효한 날짜인 경우에만 원본 onChange 호출
+                this.invokeOriginalOnChange(options.onChange, selectedDates, dateStr, instance);
+                const selectedDate = selectedDates[0];
+                // minDate/maxDate 검증
+                this.validateAndRestoreIfNeeded(selectedDate, instance, inputIndex, previousDate);
+                // 검증 후 현재 날짜를 이전 날짜로 업데이트
+                if (this.isValidDate(selectedDate)) {
+                    instance._previousDateBeforeInput = selectedDate;
+                    this.flatpickrInstances[inputIndex].selectedDates = [selectedDate];
+                }
+            }
+            catch (error) {
+                // 오류 발생 시 이전 값으로 복원
+                const previousDate = instance._previousDateBeforeInput;
+                if (previousDate && this.isValidDate(previousDate)) {
+                    instance.selectedDates = [previousDate];
+                }
+                else {
+                    instance.selectedDates = [];
+                }
+                this.restoreDateToInstance(instance, previousDate);
+            }
+        };
+    }
+    invokeOriginalOnChange(onChange, selectedDates, dateStr, instance) {
+        if (!onChange)
+            return;
+        if (Array.isArray(onChange)) {
+            onChange.forEach((hook) => {
+                void hook(selectedDates, dateStr, instance);
+            });
+        }
+        else {
+            onChange(selectedDates, dateStr, instance);
+        }
+    }
+    isValidDate(date) {
+        return date instanceof Date && !isNaN(date.getTime());
+    }
+    validateAndRestoreIfNeeded(selectedDate, instance, inputIndex, previousDate) {
+        try {
+            const isValid = this.validateDate(selectedDate, inputIndex, previousDate);
+            if (!isValid) {
+                this.restoreDateToInstance(instance, previousDate);
+            }
+            else {
+                // 유효한 경우에만 업데이트
+                instance._previousDateBeforeInput = selectedDate;
+                this.flatpickrInstances[inputIndex].selectedDates = [selectedDate];
+            }
+        }
+        catch (error) {
+            // 오류 발생 시 이전 값으로 복원
+            this.restoreDateToInstance(instance, previousDate);
+        }
+    }
+    findFlatpickrInstanceIndexByInput(input) {
+        return this.flatpickrInstances.findIndex((inst) => inst.input === input);
+    }
+    restoreDateToInstance(instance, previousDate) {
+        try {
+            // setDate 호출 전에 날짜 유효성 확인
+            if (previousDate && this.isValidDate(previousDate)) {
+                // selectedDates 배열을 정리하여 formatting.js에서 오류가 발생하지 않도록 함
+                instance.selectedDates = [previousDate];
+                instance.setDate(previousDate, false);
+            }
+            else {
+                // 빈 값으로 설정할 때도 selectedDates를 정리
+                instance.selectedDates = [];
+                instance.setDate('', false);
+            }
+        }
+        catch (error) {
+            // setDate에서 오류 발생 시 selectedDates를 빈 배열로 설정
+            try {
+                instance.selectedDates = [];
+                instance.setDate('', false);
+            }
+            catch {
+                // 최종 실패 시 무시
+            }
+        }
+    }
+    createOnReadyHandler(onInputHandler, onHourInputHandler, onMinuteInputHandler, onBlurHandler) {
+        return (selectedDates, dateStr, instance) => {
+            const input = instance.input;
+            if (!input)
+                return;
+            input.addEventListener('input', onInputHandler);
+            input.addEventListener('blur', onBlurHandler);
+            const timeInputWrapper = input.parentElement?.querySelector('.flatpickr-time');
+            if (!timeInputWrapper)
+                return;
+            const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+            const minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+            if (!hourInput || !minuteInput)
+                return;
+            hourInput.addEventListener('input', onHourInputHandler);
+            minuteInput.addEventListener('input', onMinuteInputHandler);
+        };
+    }
+    createOnDestroyHandler(onInputHandler, onHourInputHandler, onMinuteInputHandler, onMouseDown, onBlurHandler) {
+        return (selectedDates, dateStr, instance) => {
+            const input = instance.input;
+            if (!input)
+                return;
+            input.removeEventListener('input', onInputHandler);
+            input.removeEventListener('blur', onBlurHandler);
+            // hourInput과 minuteInput에서 이벤트 리스너 제거 (input이 아님)
+            const timeInputWrapper = input.parentElement?.querySelector('.flatpickr-time');
+            if (timeInputWrapper) {
+                const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+                const minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+                if (hourInput) {
+                    hourInput.removeEventListener('input', onHourInputHandler);
+                }
+                if (minuteInput) {
+                    minuteInput.removeEventListener('input', onMinuteInputHandler);
+                }
+            }
+            document.removeEventListener('mousedown', onMouseDown, true);
+        };
+    }
+    convertDateOption(dateOption) {
+        if (!dateOption)
+            return undefined;
+        if (typeof dateOption === 'string' || dateOption instanceof Date) {
+            return dateOption;
+        }
+        if (typeof dateOption === 'number') {
+            return new Date(dateOption);
+        }
+        if (Array.isArray(dateOption) && dateOption.length > 0) {
+            return dateOption[0] instanceof Date ? dateOption[0] : new Date(dateOption[0]);
+        }
+        return undefined;
+    }
+    validateDate(date, index, previousDate) {
+        const option = this.datePickerOptions[index];
+        if (!option)
+            return true;
+        const { minDate, maxDate } = option.options;
+        if (!minDate && !maxDate)
+            return true;
+        const inputDate = moment(date);
+        if (!inputDate.isValid())
+            return true;
+        const violations = this.checkDateViolations(inputDate, minDate, maxDate);
+        if (violations.length === 0)
+            return true;
+        if (this.onValidationError) {
+            const error = {
+                index,
+                date,
+                minDate: this.convertDateOption(minDate),
+                maxDate: this.convertDateOption(maxDate),
+                violations,
+                previousDate,
+            };
+            this.onValidationError(error);
+        }
+        return false;
+    }
+    checkDateViolations(inputDate, minDate, maxDate) {
+        const violations = [];
+        if (minDate) {
+            const min = moment(minDate);
+            if (min.isValid() && inputDate.isBefore(min, 'day')) {
+                violations.push('minDate');
+            }
+        }
+        if (maxDate) {
+            const max = moment(maxDate);
+            if (max.isValid() && inputDate.isAfter(max, 'day')) {
+                violations.push('maxDate');
+            }
+        }
+        return violations;
+    }
+    setDate(dates) {
+        const [startDate, endDate] = dates;
+        const datesToSet = this.datePickerOptions.map((option, index) => {
+            const date = index === 0 ? startDate : endDate;
+            return this.formatDateForOption(date, option, index);
+        });
+        const period = this.calculatePeriod(datesToSet);
+        this.updateButtonsByPeriod(period);
+        this.setMultipleDates(datesToSet);
+    }
+    formatDateForOption(date, option, index) {
+        if (!date || date === '0000-00-00')
+            return '';
+        const hasTime = option.options?.enableTime;
+        const flatpickrFormat = option.options?.dateFormat || (hasTime ? 'Y-m-d H:i' : 'Y-m-d');
+        const momentFormat = this.convertFlatpickrFormatToMoment(flatpickrFormat);
+        const momentDate = this.parseDateWithMultipleFormats(date, hasTime, momentFormat);
+        if (!momentDate || !momentDate.isValid())
+            return '';
+        const isValid = this.validateDate(momentDate.toDate(), index);
+        if (!isValid)
+            return '';
+        return this.formatMomentDate(momentDate, date, hasTime, index, momentFormat);
+    }
+    parseDateWithMultipleFormats(date, hasTime, momentFormat) {
+        // hasTime이 true인 경우 (시간 포함 여부와 무관하게 moment로 파싱)
+        if (hasTime) {
+            const momentDate = moment(date);
+            return momentDate.isValid() ? momentDate : null;
+        }
+        // hasTime이 false인 경우 - 여러 형식으로 시도
+        let momentDate = moment(date);
+        if (momentDate.isValid()) {
+            return momentDate;
+        }
+        momentDate = moment(date, momentFormat, true);
+        if (momentDate.isValid()) {
+            return momentDate;
+        }
+        momentDate = moment(date, [momentFormat, 'YYYY-MM-DD', 'YYYY/MM/DD', 'MM/DD/YYYY'], true);
+        return momentDate.isValid() ? momentDate : null;
+    }
+    formatMomentDate(momentDate, originalDate, hasTime, index, momentFormat) {
+        // hasTime이 true이고 원본 날짜에 시간이 없는 경우
+        if (hasTime && !originalDate.includes(':')) {
+            return index === 0
+                ? momentDate.startOf('day').format(momentFormat)
+                : momentDate.endOf('day').format(momentFormat);
+        }
+        return momentDate.format(momentFormat);
+    }
+    calculatePeriod(datesToSet) {
+        if (!datesToSet[0] || !datesToSet[1])
+            return null;
+        return moment(datesToSet[1]).diff(moment(datesToSet[0]), 'days');
+    }
+    updateDateWithButton(e) {
+        const target = e.target;
+        if (!target.classList.contains(CONSTANTS.CLASS_NAMES.BUTTON))
+            return;
+        const clickedButton = this.buttons.find((button) => button.text === target.textContent);
+        if (!clickedButton || clickedButton === this.currentButton)
+            return;
+        const updateButtonState = () => {
+            return this.buttons.map((button) => ({
+                ...button,
+                isCurrent: button.text === clickedButton?.text,
+            }));
+        };
+        this.currentButton = clickedButton;
+        this.reRenderButtonGroup(updateButtonState());
+        this.setMultipleDates(this.calculateDatesFromButton(clickedButton));
+    }
+    setMultipleDates(dates) {
+        dates.forEach((date, index) => {
+            const shouldTriggerChange = index === dates.length - 1;
+            this.flatpickrInstances[index]?.setDate(date, shouldTriggerChange);
+            this.flatpickrInstances[index]?.redraw();
+        });
+    }
+    updateButtonsByPeriod(period) {
+        const newButtons = this.buttons.map((button) => ({
+            ...button,
+            isCurrent: period !== null && button.period === period,
+        }));
+        this.reRenderButtonGroup(newButtons);
+    }
+    calculateDatesFromButton(button) {
+        const { period, unit } = button;
+        return this.datePickerOptions.map((option, index) => {
+            const hasTime = option.options?.enableTime;
+            if (index === 0) {
+                const startMoment = period ? moment().subtract(period, unit) : moment();
+                return hasTime ? startMoment.startOf('day').format(this.dateFormat) : startMoment.format(this.dateFormat);
+            }
+            return hasTime ? moment().endOf('day').format(this.dateFormat) : moment().format(this.dateFormat);
+        });
+    }
+    // flatpickr 형식을 moment 형식으로 변환하는 헬퍼 메서드
+    convertFlatpickrFormatToMoment(flatpickrFormat) {
+        const map = {
+            Y: 'YYYY',
+            y: 'YY',
+            m: 'MM',
+            d: 'DD',
+            H: 'HH',
+            i: 'mm',
+            S: 'ss',
+        };
+        return flatpickrFormat.replace(/[YymdHiS]/g, (matched) => map[matched] || matched);
+    }
+    getDates() {
+        return this.flatpickrInstances.map((instance) => {
+            const selectedDates = instance.selectedDates;
+            if (selectedDates.length > 0) {
+                return moment(selectedDates[0]).format(this.dateFormat);
+            }
+            return '';
+        });
+    }
+}
+DatePicker.instanceCounter = 0;
+DatePicker.usedWrappers = new Set(); // 사용된 wrapper 요소 추적용
+export { DatePicker };
+window.DatePicker = DatePicker;