@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

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

@@ -0,0 +1,706 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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
+var 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 라이브러리가 로드되지 않았습니다.',
+    },
+};
+export var DatePicker = /** @class */ (function () {
+    function DatePicker(wrapper, options) {
+        var _a, _b;
+        this.flatpickrInstances = [];
+        this.currentButton = null;
+        var buttons = (_a = options.buttons, _a === void 0 ? [] : _a), size = options.size, autoComplete = (_b = options.autoComplete, _b === void 0 ? 'off' : _b), datePickerOptions = options.datePickerOptions, onValidationError = options.onValidationError;
+        this.validateWrapper(wrapper);
+        this.validationDependencies((buttons === null || buttons === void 0 ? void 0 : 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();
+    }
+    DatePicker.prototype.validateWrapper = function (wrapper) {
+        if (DatePicker.usedWrappers.has(wrapper)) {
+            throw new Error("\uC774\uBBF8 \uC0AC\uC6A9 \uC911\uC778 DOM \uC694\uC18C\uC785\uB2C8\uB2E4. " +
+                "\uAC19\uC740 DOM \uC694\uC18C\uC5D0\uB294 \uD558\uB098\uC758 DatePicker \uC778\uC2A4\uD134\uC2A4\uB9CC \uC0DD\uC131\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. " +
+                "\uB2E4\uB978 DOM \uC694\uC18C\uB97C \uC0AC\uC6A9\uD558\uAC70\uB098 \uAE30\uC874 \uC778\uC2A4\uD134\uC2A4\uB97C \uBA3C\uC800 \uC81C\uAC70\uD574\uC8FC\uC138\uC694.");
+        }
+        DatePicker.usedWrappers.add(wrapper);
+    };
+    DatePicker.prototype.init = function () {
+        this.contentWrapper.innerHTML = '';
+        this.initializeWrapper();
+        this.initButtonGroup();
+        this.initDatePicker();
+    };
+    DatePicker.prototype.validationDependencies = function (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);
+        }
+    };
+    DatePicker.prototype.initializeWrapper = function () {
+        if (this.datePickerOptions.length < 2)
+            return;
+        this.contentWrapper.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER);
+    };
+    DatePicker.prototype.initButtonGroup = function () {
+        var _this = this;
+        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);
+        var createButtonWrapperElement = function () {
+            var wrapper = document.createElement('div');
+            wrapper.className = "".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP, " ").concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP_HAS_BORDER, " ").concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP, "--").concat(_this.size);
+            return wrapper;
+        };
+        var appendButtons = function (wrapper) {
+            _this.buttons.forEach(function (button) {
+                var buttonElement = _this.createButtonElement(button);
+                wrapper.appendChild(buttonElement);
+            });
+        };
+        var wrapper = createButtonWrapperElement();
+        appendButtons(wrapper);
+        wrapper.addEventListener('click', this.updateDateWithButton.bind(this));
+        this.contentWrapper.appendChild(wrapper);
+    };
+    DatePicker.prototype.createButtonElement = function (button) {
+        if (button.isCurrent) {
+            this.currentButton = button;
+        }
+        var buttonElement = document.createElement('button');
+        buttonElement.className = "".concat(CONSTANTS.CLASS_NAMES.BUTTON, " ").concat(button.isCurrent ? 'is-current' : '');
+        buttonElement.textContent = button.text;
+        buttonElement.type = 'button';
+        return buttonElement;
+    };
+    DatePicker.prototype.reRenderButtonGroup = function (buttons) {
+        var _this = this;
+        var buttonGroup = this.contentWrapper.querySelector(".".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP));
+        if (!buttonGroup)
+            return;
+        buttonGroup.innerHTML = '';
+        buttons.forEach(function (button) {
+            if (button.isCurrent) {
+                _this.currentButton = button;
+            }
+            buttonGroup.appendChild(_this.createButtonElement(button));
+        });
+        this.buttons = buttons;
+    };
+    DatePicker.prototype.initDatePicker = function () {
+        var _this = this;
+        var datePickerOptions = this.datePickerOptions;
+        var createInputWrapperElement = function (size) {
+            var wrapper = document.createElement('div');
+            wrapper.className = "".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, " ").concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, "--").concat(size, " ").concat(_this.datePickerOptions.some(function (option) { return option.options.enableTime; }) ? CONSTANTS.CLASS_NAMES.HAS_TIME : '');
+            return wrapper;
+        };
+        var createInput = function (datePickerOption, index) {
+            var _a, _b;
+            var defaultPlaceHolder = datePickerOption.options.enableTime
+                ? CONSTANTS.FORMATS.DATE_TIME
+                : CONSTANTS.FORMATS.DATE;
+            var input = document.createElement('input');
+            input.type = 'text';
+            input.placeholder = (_a = datePickerOption.placeholder) !== null && _a !== void 0 ? _a : defaultPlaceHolder;
+            input.name = (_b = datePickerOption.attrName) !== null && _b !== void 0 ? _b : '';
+            input.id = "datepicker-".concat(_this.instanceId, "-").concat(datePickerOption.element, "-").concat(index);
+            input.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_INPUT;
+            input.autocomplete = _this.autoComplete;
+            return input;
+        };
+        var createIcon = function (size, elementId, index) {
+            var getCalendarIconSvg = function (size) {
+                return "\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 16 16\" fill=\"none\">\n        <path\n          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\"\n          stroke=\"black\"\n          stroke-width=\"1.33333\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>");
+            };
+            var ico = document.createElement('label');
+            ico.htmlFor = "datepicker-".concat(_this.instanceId, "-").concat(elementId, "-").concat(index);
+            ico.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_ICO;
+            ico.innerHTML = getCalendarIconSvg(CONSTANTS.ICON_SIZES[size]);
+            return ico;
+        };
+        var insertSeparator = function () {
+            var span = document.createElement('span');
+            span.textContent = _this.separator;
+            _this.contentWrapper.insertBefore(span, _this.contentWrapper.querySelectorAll(".".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER))[1]);
+        };
+        var createDatePickerElement = function (datePickerOption, index) {
+            var inputWrapper = createInputWrapperElement(_this.size);
+            var input = createInput(datePickerOption, index);
+            inputWrapper.appendChild(input);
+            inputWrapper.appendChild(createIcon(_this.size, datePickerOption.element, index));
+            inputWrapper.addEventListener('click', function () {
+                // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
+                // biome-ignore lint/suspicious/useIterableCallbackReturn: <explanation>
+                _this.buttons.forEach(function (button) { return (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);
+        };
+        var createFlatpickrInstances = function (datePickerOptions) {
+            return datePickerOptions.map(function (datePickerOption, index) { return createDatePickerElement(datePickerOption, index); });
+        };
+        var calcInitDates = function (datePickerOptions) {
+            if (_this.buttons.length > 0) {
+                var currentButton = _this.buttons.find(function (button) { return button.isCurrent; });
+                if (!currentButton) {
+                    return datePickerOptions.map(function () { return ''; });
+                }
+                return _this.calculateDatesFromButton(currentButton);
+            }
+            return datePickerOptions.map(function (datePickerOption) {
+                var _a;
+                if ((_a = datePickerOption.options) === null || _a === void 0 ? void 0 : _a.defaultDate) {
+                    return moment(datePickerOption.options.defaultDate.toString()).format(_this.dateFormat);
+                }
+                return '';
+            });
+        };
+        this.flatpickrInstances = createFlatpickrInstances(this.datePickerOptions);
+        var dates = calcInitDates(datePickerOptions);
+        this.setMultipleDates(dates);
+    };
+    DatePicker.prototype.initializeFlatpickr = function (input, options, wrapper) {
+        var _this = this;
+        var _a;
+        // flatpickr locale 설정 확인
+        var locale = typeof options.locale === 'string' ? options.locale : 'ko';
+        this.setupFlatpickrLocale(locale, options);
+        var onInputHandler = this.createInputHandler();
+        var onHourInputHandler = this.createHourInputHandler();
+        var onMinuteInputHandler = this.createMinuteInputHandler();
+        var onMouseDown = this.createMouseDownHandler(wrapper);
+        // onBlur 핸들러 추가하여 입력 전 날짜 저장
+        var onBlurHandler = this.createBlurHandler();
+        document.addEventListener('mousedown', onMouseDown, true);
+        return flatpickr(input, __assign(__assign({}, options), { allowInput: (_a = options.allowInput) !== null && _a !== void 0 ? _a : true, appendTo: wrapper, time_24hr: true, defaultHour: options.defaultHour || 0, defaultMinute: options.defaultMinute || 0, locale: locale, formatDate: function (date, format, locale) {
+                try {
+                    // 유효한 날짜인지 확인
+                    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+                        return '';
+                    }
+                    // moment로 포맷팅
+                    var momentDate = moment(date);
+                    if (!momentDate.isValid()) {
+                        return '';
+                    }
+                    // format을 moment 형식으로 변환
+                    var 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) }));
+    };
+    DatePicker.prototype.createBlurHandler = function () {
+        var _this = this;
+        return function (e) {
+            var target = e.target;
+            var inputIndex = _this.findFlatpickrInstanceIndexByInput(target);
+            if (inputIndex < 0)
+                return;
+            // blur 시점에 현재 selectedDates를 저장 (입력 전 상태)
+            var instance = _this.flatpickrInstances[inputIndex];
+            if (instance && instance.selectedDates.length > 0) {
+                // 이전 날짜를 별도로 저장 (onChange에서 사용)
+                instance._previousDateBeforeInput = instance.selectedDates[0];
+            }
+        };
+    };
+    DatePicker.prototype.setupFlatpickrLocale = function (locale, options) {
+        var _a;
+        if ((_a = flatpickr === null || flatpickr === void 0 ? void 0 : flatpickr.l10ns) === null || _a === void 0 ? void 0 : _a[locale]) {
+            return;
+        }
+        console.warn("flatpickr locale '".concat(locale, "' is not loaded. Available locales:"), Object.keys((flatpickr === null || flatpickr === void 0 ? void 0 : flatpickr.l10ns) || {}));
+        if (locale === 'ko') {
+            flatpickr.l10ns.ko = Korean;
+        }
+        else {
+            options.locale = undefined;
+        }
+    };
+    DatePicker.prototype.createInputHandler = function () {
+        var _this = this;
+        return function (e) {
+            var target = e.target;
+            var input = target.value;
+            var 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;
+            }
+            var formattedInput = formatDateInput(input);
+            // 포맷팅만 수행
+            if (formattedInput !== input) {
+                target.value = formattedInput;
+                return;
+            }
+            // 완전한 날짜 형식이지만 유효하지 않은 경우 처리
+            if (formattedInput && formattedInput.length >= 10) {
+                var parsedDate = moment(formattedInput);
+                if (!parsedDate.isValid()) {
+                    _this.restorePreviousDate(target, instance);
+                }
+            }
+        };
+    };
+    DatePicker.prototype.findFlatpickrInstanceByInput = function (input) {
+        var index = this.findFlatpickrInstanceIndexByInput(input);
+        return index >= 0 ? this.flatpickrInstances[index] : null;
+    };
+    DatePicker.prototype.clearInputValue = function (target, instance) {
+        target.value = '';
+        instance.setDate('', false);
+    };
+    DatePicker.prototype.restorePreviousDate = function (target, instance) {
+        var hasPreviousDate = instance.selectedDates.length > 0;
+        if (!hasPreviousDate) {
+            this.clearInputValue(target, instance);
+            return;
+        }
+        var previousDate = instance.selectedDates[0];
+        var 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);
+        }
+    };
+    DatePicker.prototype.createHourInputHandler = function () {
+        return function (e) {
+            var target = e.target;
+            var input = target.value;
+            var formattedInput = formatHourInput(input);
+            if (formattedInput === input)
+                return;
+            target.value = formattedInput;
+        };
+    };
+    DatePicker.prototype.createMinuteInputHandler = function () {
+        return function (e) {
+            var target = e.target;
+            var input = target.value;
+            var formattedInput = formatMinuteInput(input);
+            if (formattedInput === input)
+                return;
+            target.value = formattedInput;
+        };
+    };
+    DatePicker.prototype.createMouseDownHandler = function (wrapper) {
+        return function (e) {
+            var flatpickrCalendar = wrapper.querySelector('.flatpickr-calendar.open');
+            if (!flatpickrCalendar)
+                return;
+            if (flatpickrCalendar.contains(e.target))
+                return;
+            var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+            timeInputs.forEach(function (input) {
+                if (document.activeElement === input) {
+                    input.blur();
+                }
+            });
+        };
+    };
+    DatePicker.prototype.createOnChangeHandler = function (options) {
+        var _this = this;
+        return function (selectedDates, dateStr, instance) {
+            try {
+                var inputIndex = _this.findFlatpickrInstanceIndexByInput(instance.input);
+                if (inputIndex < 0)
+                    return;
+                // blur 시 저장한 이전 날짜 사용
+                var 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);
+                var 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) {
+                // 오류 발생 시 이전 값으로 복원
+                var previousDate = instance._previousDateBeforeInput;
+                if (previousDate && _this.isValidDate(previousDate)) {
+                    instance.selectedDates = [previousDate];
+                }
+                else {
+                    instance.selectedDates = [];
+                }
+                _this.restoreDateToInstance(instance, previousDate);
+            }
+        };
+    };
+    DatePicker.prototype.invokeOriginalOnChange = function (onChange, selectedDates, dateStr, instance) {
+        if (!onChange)
+            return;
+        if (Array.isArray(onChange)) {
+            onChange.forEach(function (hook) {
+                void hook(selectedDates, dateStr, instance);
+            });
+        }
+        else {
+            onChange(selectedDates, dateStr, instance);
+        }
+    };
+    DatePicker.prototype.isValidDate = function (date) {
+        return date instanceof Date && !isNaN(date.getTime());
+    };
+    DatePicker.prototype.validateAndRestoreIfNeeded = function (selectedDate, instance, inputIndex, previousDate) {
+        try {
+            var 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);
+        }
+    };
+    DatePicker.prototype.findFlatpickrInstanceIndexByInput = function (input) {
+        return this.flatpickrInstances.findIndex(function (inst) { return inst.input === input; });
+    };
+    DatePicker.prototype.restoreDateToInstance = function (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 (_a) {
+                // 최종 실패 시 무시
+            }
+        }
+    };
+    DatePicker.prototype.createOnReadyHandler = function (onInputHandler, onHourInputHandler, onMinuteInputHandler, onBlurHandler) {
+        return function (selectedDates, dateStr, instance) {
+            var _a;
+            var input = instance.input;
+            if (!input)
+                return;
+            input.addEventListener('input', onInputHandler);
+            input.addEventListener('blur', onBlurHandler);
+            var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
+            if (!timeInputWrapper)
+                return;
+            var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+            var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+            if (!hourInput || !minuteInput)
+                return;
+            hourInput.addEventListener('input', onHourInputHandler);
+            minuteInput.addEventListener('input', onMinuteInputHandler);
+        };
+    };
+    DatePicker.prototype.createOnDestroyHandler = function (onInputHandler, onHourInputHandler, onMinuteInputHandler, onMouseDown, onBlurHandler) {
+        return function (selectedDates, dateStr, instance) {
+            var _a;
+            var input = instance.input;
+            if (!input)
+                return;
+            input.removeEventListener('input', onInputHandler);
+            input.removeEventListener('blur', onBlurHandler);
+            // hourInput과 minuteInput에서 이벤트 리스너 제거 (input이 아님)
+            var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
+            if (timeInputWrapper) {
+                var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+                var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+                if (hourInput) {
+                    hourInput.removeEventListener('input', onHourInputHandler);
+                }
+                if (minuteInput) {
+                    minuteInput.removeEventListener('input', onMinuteInputHandler);
+                }
+            }
+            document.removeEventListener('mousedown', onMouseDown, true);
+        };
+    };
+    DatePicker.prototype.convertDateOption = function (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;
+    };
+    DatePicker.prototype.validateDate = function (date, index, previousDate) {
+        var _a;
+        var option = this.datePickerOptions[index];
+        if (!option)
+            return true;
+        var minDate = (_a = option.options, _a.minDate), maxDate = _a.maxDate;
+        if (!minDate && !maxDate)
+            return true;
+        var inputDate = moment(date);
+        if (!inputDate.isValid())
+            return true;
+        var violations = this.checkDateViolations(inputDate, minDate, maxDate);
+        if (violations.length === 0)
+            return true;
+        if (this.onValidationError) {
+            var error = {
+                index: index,
+                date: date,
+                minDate: this.convertDateOption(minDate),
+                maxDate: this.convertDateOption(maxDate),
+                violations: violations,
+                previousDate: previousDate,
+            };
+            this.onValidationError(error);
+        }
+        return false;
+    };
+    DatePicker.prototype.checkDateViolations = function (inputDate, minDate, maxDate) {
+        var violations = [];
+        if (minDate) {
+            var min = moment(minDate);
+            if (min.isValid() && inputDate.isBefore(min, 'day')) {
+                violations.push('minDate');
+            }
+        }
+        if (maxDate) {
+            var max = moment(maxDate);
+            if (max.isValid() && inputDate.isAfter(max, 'day')) {
+                violations.push('maxDate');
+            }
+        }
+        return violations;
+    };
+    DatePicker.prototype.setDate = function (dates) {
+        var _this = this;
+        var startDate = dates[0], endDate = dates[1];
+        var datesToSet = this.datePickerOptions.map(function (option, index) {
+            var date = index === 0 ? startDate : endDate;
+            return _this.formatDateForOption(date, option, index);
+        });
+        var period = this.calculatePeriod(datesToSet);
+        this.updateButtonsByPeriod(period);
+        this.setMultipleDates(datesToSet);
+    };
+    DatePicker.prototype.formatDateForOption = function (date, option, index) {
+        var _a, _b;
+        if (!date || date === '0000-00-00')
+            return '';
+        var hasTime = (_a = option.options) === null || _a === void 0 ? void 0 : _a.enableTime;
+        var flatpickrFormat = ((_b = option.options) === null || _b === void 0 ? void 0 : _b.dateFormat) || (hasTime ? 'Y-m-d H:i' : 'Y-m-d');
+        var momentFormat = this.convertFlatpickrFormatToMoment(flatpickrFormat);
+        var momentDate = this.parseDateWithMultipleFormats(date, hasTime, momentFormat);
+        if (!momentDate || !momentDate.isValid())
+            return '';
+        var isValid = this.validateDate(momentDate.toDate(), index);
+        if (!isValid)
+            return '';
+        return this.formatMomentDate(momentDate, date, hasTime, index, momentFormat);
+    };
+    DatePicker.prototype.parseDateWithMultipleFormats = function (date, hasTime, momentFormat) {
+        // hasTime이 true인 경우 (시간 포함 여부와 무관하게 moment로 파싱)
+        if (hasTime) {
+            var momentDate_1 = moment(date);
+            return momentDate_1.isValid() ? momentDate_1 : null;
+        }
+        // hasTime이 false인 경우 - 여러 형식으로 시도
+        var 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;
+    };
+    DatePicker.prototype.formatMomentDate = function (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);
+    };
+    DatePicker.prototype.calculatePeriod = function (datesToSet) {
+        if (!datesToSet[0] || !datesToSet[1])
+            return null;
+        return moment(datesToSet[1]).diff(moment(datesToSet[0]), 'days');
+    };
+    DatePicker.prototype.updateDateWithButton = function (e) {
+        var _this = this;
+        var target = e.target;
+        if (!target.classList.contains(CONSTANTS.CLASS_NAMES.BUTTON))
+            return;
+        var clickedButton = this.buttons.find(function (button) { return button.text === target.textContent; });
+        if (!clickedButton || clickedButton === this.currentButton)
+            return;
+        var updateButtonState = function () {
+            return _this.buttons.map(function (button) { return (__assign(__assign({}, button), { isCurrent: button.text === (clickedButton === null || clickedButton === void 0 ? void 0 : clickedButton.text) })); });
+        };
+        this.currentButton = clickedButton;
+        this.reRenderButtonGroup(updateButtonState());
+        this.setMultipleDates(this.calculateDatesFromButton(clickedButton));
+    };
+    DatePicker.prototype.setMultipleDates = function (dates) {
+        var _this = this;
+        dates.forEach(function (date, index) {
+            var _a, _b;
+            var shouldTriggerChange = index === dates.length - 1;
+            (_a = _this.flatpickrInstances[index]) === null || _a === void 0 ? void 0 : _a.setDate(date, shouldTriggerChange);
+            (_b = _this.flatpickrInstances[index]) === null || _b === void 0 ? void 0 : _b.redraw();
+        });
+    };
+    DatePicker.prototype.updateButtonsByPeriod = function (period) {
+        var newButtons = this.buttons.map(function (button) { return (__assign(__assign({}, button), { isCurrent: period !== null && button.period === period })); });
+        this.reRenderButtonGroup(newButtons);
+    };
+    DatePicker.prototype.calculateDatesFromButton = function (button) {
+        var _this = this;
+        var period = button.period, unit = button.unit;
+        return this.datePickerOptions.map(function (option, index) {
+            var _a;
+            var hasTime = (_a = option.options) === null || _a === void 0 ? void 0 : _a.enableTime;
+            if (index === 0) {
+                var 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 형식으로 변환하는 헬퍼 메서드
+    DatePicker.prototype.convertFlatpickrFormatToMoment = function (flatpickrFormat) {
+        var map = {
+            Y: 'YYYY',
+            y: 'YY',
+            m: 'MM',
+            d: 'DD',
+            H: 'HH',
+            i: 'mm',
+            S: 'ss',
+        };
+        return flatpickrFormat.replace(/[YymdHiS]/g, function (matched) { return map[matched] || matched; });
+    };
+    DatePicker.prototype.getDates = function () {
+        var _this = this;
+        return this.flatpickrInstances.map(function (instance) {
+            var selectedDates = instance.selectedDates;
+            if (selectedDates.length > 0) {
+                return moment(selectedDates[0]).format(_this.dateFormat);
+            }
+            return '';
+        });
+    };
+    DatePicker.instanceCounter = 0;
+    DatePicker.usedWrappers = new Set(); // 사용된 wrapper 요소 추적용
+    return DatePicker;
+}());
+window.DatePicker = DatePicker;