@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -1,19 +1,9 @@
-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 '@ncds/ui-admin/src/utils/date-picker';
+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 = {
+const CONSTANTS = {
   ICON_SIZES: {
     xs: '14',
     sm: '16'
@@ -38,18 +28,19 @@ var CONSTANTS = {
     MOMENT_NOT_LOADED: 'moment 라이브러리가 로드되지 않았습니다.'
   }
 };
-export var DatePicker = /** @class */function () {
-  function DatePicker(wrapper, options) {
-    var _a, _b;
+class DatePicker {
+  constructor(wrapper, options) {
     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;
+    const {
+      buttons = [],
+      size,
+      autoComplete = 'off',
+      datePickerOptions,
+      onValidationError
+    } = options;
     this.validateWrapper(wrapper);
-    this.validationDependencies((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0);
+    this.validationDependencies(buttons?.length > 0);
     this.instanceId = DatePicker.instanceCounter++;
     this.contentWrapper = wrapper;
     this.datePickerOptions = datePickerOptions;
@@ -61,195 +52,188 @@ export var DatePicker = /** @class */function () {
     this.onValidationError = onValidationError;
     this.init();
   }
-  DatePicker.prototype.validateWrapper = function (wrapper) {
+  validateWrapper(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.");
+      throw new Error(`이미 사용 중인 DOM 요소입니다. ` + `같은 DOM 요소에는 하나의 DatePicker 인스턴스만 생성할 수 있습니다. ` + `다른 DOM 요소를 사용하거나 기존 인스턴스를 먼저 제거해주세요.`);
     }
     DatePicker.usedWrappers.add(wrapper);
-  };
-  DatePicker.prototype.init = function () {
+  }
+  init() {
     this.contentWrapper.innerHTML = '';
     this.initializeWrapper();
     this.initButtonGroup();
     this.initDatePicker();
-  };
-  DatePicker.prototype.validationDependencies = function (hasButtons) {
+  }
+  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);
     }
-  };
-  DatePicker.prototype.initializeWrapper = function () {
+  }
+  initializeWrapper() {
     if (this.datePickerOptions.length < 2) return;
     this.contentWrapper.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER);
-  };
-  DatePicker.prototype.initButtonGroup = function () {
-    var _this = this;
+  }
+  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);
-    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);
+    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;
     };
-    var appendButtons = function (wrapper) {
-      _this.buttons.forEach(function (button) {
-        var buttonElement = _this.createButtonElement(button);
+    const appendButtons = wrapper => {
+      this.buttons.forEach(button => {
+        const buttonElement = this.createButtonElement(button);
         wrapper.appendChild(buttonElement);
       });
     };
-    var wrapper = createButtonWrapperElement();
+    const wrapper = createButtonWrapperElement();
     appendButtons(wrapper);
     wrapper.addEventListener('click', this.updateDateWithButton.bind(this));
     this.contentWrapper.appendChild(wrapper);
-  };
-  DatePicker.prototype.createButtonElement = function (button) {
+  }
+  createButtonElement(button) {
     if (button.isCurrent) {
       this.currentButton = button;
     }
-    var buttonElement = document.createElement('button');
-    buttonElement.className = "".concat(CONSTANTS.CLASS_NAMES.BUTTON, " ").concat(button.isCurrent ? 'is-current' : '');
+    const buttonElement = document.createElement('button');
+    buttonElement.className = `${CONSTANTS.CLASS_NAMES.BUTTON} ${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));
+  }
+  reRenderButtonGroup(buttons) {
+    const buttonGroup = this.contentWrapper.querySelector(`.${CONSTANTS.CLASS_NAMES.BUTTON_GROUP}`);
     if (!buttonGroup) return;
     buttonGroup.innerHTML = '';
-    buttons.forEach(function (button) {
+    buttons.forEach(button => {
       if (button.isCurrent) {
-        _this.currentButton = button;
+        this.currentButton = button;
       }
-      buttonGroup.appendChild(_this.createButtonElement(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 : '');
+  }
+  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;
     };
-    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');
+    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 = (_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.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;
+      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>");
+    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>`;
       };
-      var ico = document.createElement('label');
-      ico.htmlFor = "datepicker-".concat(_this.instanceId, "-").concat(elementId, "-").concat(index);
+      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;
     };
-    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]);
+    const insertSeparator = () => {
+      const span = document.createElement('span');
+      span.textContent = this.separator;
+      this.contentWrapper.insertBefore(span, this.contentWrapper.querySelectorAll(`.${CONSTANTS.CLASS_NAMES.DATE_PICKER}`)[1]);
     };
-    var createDatePickerElement = function (datePickerOption, index) {
-      var inputWrapper = createInputWrapperElement(_this.size);
-      var input = createInput(datePickerOption, index);
+    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', function () {
+      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(function (button) {
-          return button.isCurrent = false;
-        });
-        _this.currentButton = null;
-        _this.reRenderButtonGroup(_this.buttons);
+        this.buttons.forEach(button => button.isCurrent = false);
+        this.currentButton = null;
+        this.reRenderButtonGroup(this.buttons);
       });
-      _this.contentWrapper.appendChild(inputWrapper);
+      this.contentWrapper.appendChild(inputWrapper);
       if (index > 0) {
         insertSeparator();
       }
-      return _this.initializeFlatpickr(input, datePickerOption.options, inputWrapper);
+      return this.initializeFlatpickr(input, datePickerOption.options, inputWrapper);
     };
-    var createFlatpickrInstances = function (datePickerOptions) {
-      return datePickerOptions.map(function (datePickerOption, index) {
-        return createDatePickerElement(datePickerOption, index);
-      });
+    const createFlatpickrInstances = datePickerOptions => {
+      return datePickerOptions.map((datePickerOption, index) => createDatePickerElement(datePickerOption, index));
     };
-    var calcInitDates = function (datePickerOptions) {
-      if (_this.buttons.length > 0) {
-        var currentButton = _this.buttons.find(function (button) {
-          return button.isCurrent;
-        });
+    const calcInitDates = datePickerOptions => {
+      if (this.buttons.length > 0) {
+        const currentButton = this.buttons.find(button => button.isCurrent);
         if (!currentButton) {
-          return datePickerOptions.map(function () {
-            return '';
-          });
+          return datePickerOptions.map(() => '');
         }
-        return _this.calculateDatesFromButton(currentButton);
+        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 datePickerOptions.map(datePickerOption => {
+        if (datePickerOption.options?.defaultDate) {
+          return moment(datePickerOption.options.defaultDate.toString()).format(this.dateFormat);
         }
         return '';
       });
     };
     this.flatpickrInstances = createFlatpickrInstances(this.datePickerOptions);
-    var dates = calcInitDates(datePickerOptions);
+    const dates = calcInitDates(datePickerOptions);
     this.setMultipleDates(dates);
-  };
-  DatePicker.prototype.initializeFlatpickr = function (input, options, wrapper) {
-    var _this = this;
-    var _a;
+  }
+  initializeFlatpickr(input, options, wrapper) {
     // flatpickr locale 설정 확인
-    var locale = typeof options.locale === 'string' ? options.locale : 'ko';
+    const 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);
+    const onInputHandler = this.createInputHandler();
+    const onHourInputHandler = this.createHourInputHandler();
+    const onMinuteInputHandler = this.createMinuteInputHandler();
+    const onMouseDown = this.createMouseDownHandler(wrapper);
     // onBlur 핸들러 추가하여 입력 전 날짜 저장
-    var onBlurHandler = this.createBlurHandler();
+    const onBlurHandler = this.createBlurHandler();
     document.addEventListener('mousedown', onMouseDown, true);
-    return flatpickr(input, __assign(__assign({}, options), {
-      allowInput: (_a = options.allowInput) !== null && _a !== void 0 ? _a : true,
+    return flatpickr(input, {
+      ...options,
+      allowInput: options.allowInput ?? true,
       appendTo: wrapper,
       time_24hr: true,
       defaultHour: options.defaultHour || 0,
       defaultMinute: options.defaultMinute || 0,
-      locale: locale,
-      formatDate: function (date, format, locale) {
+      locale,
+      formatDate: (date, format, locale) => {
         try {
           // 유효한 날짜인지 확인
           if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
             return '';
           }
           // moment로 포맷팅
-          var momentDate = moment(date);
+          const momentDate = moment(date);
           if (!momentDate.isValid()) {
             return '';
           }
           // format을 moment 형식으로 변환
-          var momentFormat = _this.convertFlatpickrFormatToMoment(format);
+          const momentFormat = this.convertFlatpickrFormatToMoment(format);
           return momentDate.format(momentFormat);
         } catch (error) {
           // 오류 발생 시 빈 문자열 반환 (232-23 같은 잘못된 날짜 처리)
@@ -259,52 +243,49 @@ export var DatePicker = /** @class */function () {
       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);
+    });
+  }
+  createBlurHandler() {
+    return e => {
+      const target = e.target;
+      const inputIndex = this.findFlatpickrInstanceIndexByInput(target);
       if (inputIndex < 0) return;
       // blur 시점에 현재 selectedDates를 저장 (입력 전 상태)
-      var instance = _this.flatpickrInstances[inputIndex];
+      const 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]) {
+  }
+  setupFlatpickrLocale(locale, options) {
+    if (flatpickr?.l10ns?.[locale]) {
       return;
     }
-    console.warn("flatpickr locale '".concat(locale, "' is not loaded. Available locales:"), Object.keys((flatpickr === null || flatpickr === void 0 ? void 0 : flatpickr.l10ns) || {}));
+    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;
     }
-  };
-  DatePicker.prototype.createInputHandler = function () {
-    var _this = this;
-    return function (e) {
-      var target = e.target;
-      var input = target.value;
-      var instance = _this.findFlatpickrInstanceByInput(target);
+  }
+  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);
+        this.clearInputValue(target, instance);
         return;
       }
       // 숫자나 하이픈이 없는 경우 처리
       if (!/[0-9]/.test(input)) {
-        _this.restorePreviousDate(target, instance);
+        this.restorePreviousDate(target, instance);
         return;
       }
-      var formattedInput = formatDateInput(input);
+      const formattedInput = formatDateInput(input);
       // 포맷팅만 수행
       if (formattedInput !== input) {
         target.value = formattedInput;
@@ -312,79 +293,78 @@ export var DatePicker = /** @class */function () {
       }
       // 완전한 날짜 형식이지만 유효하지 않은 경우 처리
       if (formattedInput && formattedInput.length >= 10) {
-        var parsedDate = moment(formattedInput);
+        const parsedDate = moment(formattedInput);
         if (!parsedDate.isValid()) {
-          _this.restorePreviousDate(target, instance);
+          this.restorePreviousDate(target, instance);
         }
       }
     };
-  };
-  DatePicker.prototype.findFlatpickrInstanceByInput = function (input) {
-    var index = this.findFlatpickrInstanceIndexByInput(input);
+  }
+  findFlatpickrInstanceByInput(input) {
+    const index = this.findFlatpickrInstanceIndexByInput(input);
     return index >= 0 ? this.flatpickrInstances[index] : null;
-  };
-  DatePicker.prototype.clearInputValue = function (target, instance) {
+  }
+  clearInputValue(target, instance) {
     target.value = '';
     instance.setDate('', false);
-  };
-  DatePicker.prototype.restorePreviousDate = function (target, instance) {
-    var hasPreviousDate = instance.selectedDates.length > 0;
+  }
+  restorePreviousDate(target, instance) {
+    const 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());
+    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);
     }
-  };
-  DatePicker.prototype.createHourInputHandler = function () {
-    return function (e) {
-      var target = e.target;
-      var input = target.value;
-      var formattedInput = formatHourInput(input);
+  }
+  createHourInputHandler() {
+    return e => {
+      const target = e.target;
+      const input = target.value;
+      const 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);
+  }
+  createMinuteInputHandler() {
+    return e => {
+      const target = e.target;
+      const input = target.value;
+      const 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');
+  }
+  createMouseDownHandler(wrapper) {
+    return e => {
+      const 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) {
+      const timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+      timeInputs.forEach(input => {
         if (document.activeElement === input) {
           input.blur();
         }
       });
     };
-  };
-  DatePicker.prototype.createOnChangeHandler = function (options) {
-    var _this = this;
-    return function (selectedDates, dateStr, instance) {
+  }
+  createOnChangeHandler(options) {
+    return (selectedDates, dateStr, instance) => {
       try {
-        var inputIndex = _this.findFlatpickrInstanceIndexByInput(instance.input);
+        const inputIndex = this.findFlatpickrInstanceIndexByInput(instance.input);
         if (inputIndex < 0) return;
         // blur 시 저장한 이전 날짜 사용
-        var previousDate = instance._previousDateBeforeInput;
+        const previousDate = instance._previousDateBeforeInput;
         // selectedDates가 비어있거나 첫 번째 날짜가 유효하지 않은 경우 처리
-        if (!selectedDates || selectedDates.length === 0 || !selectedDates[0] || !(selectedDates[0] instanceof Date) || !_this.isValidDate(selectedDates[0])) {
+        if (!selectedDates || selectedDates.length === 0 || !selectedDates[0] || !(selectedDates[0] instanceof Date) || !this.isValidDate(selectedDates[0])) {
           // 유효하지 않은 날짜는 이전 값으로 복원하거나 빈 값으로 처리
-          if (previousDate && _this.isValidDate(previousDate)) {
+          if (previousDate && this.isValidDate(previousDate)) {
             // 이전 값이 있으면 이전 값으로 복원
             instance.selectedDates = [previousDate];
             instance.setDate(previousDate, false);
@@ -397,43 +377,43 @@ export var DatePicker = /** @class */function () {
           return;
         }
         // 유효한 날짜인 경우에만 원본 onChange 호출
-        _this.invokeOriginalOnChange(options.onChange, selectedDates, dateStr, instance);
-        var selectedDate = selectedDates[0];
+        this.invokeOriginalOnChange(options.onChange, selectedDates, dateStr, instance);
+        const selectedDate = selectedDates[0];
         // minDate/maxDate 검증
-        _this.validateAndRestoreIfNeeded(selectedDate, instance, inputIndex, previousDate);
+        this.validateAndRestoreIfNeeded(selectedDate, instance, inputIndex, previousDate);
         // 검증 후 현재 날짜를 이전 날짜로 업데이트
-        if (_this.isValidDate(selectedDate)) {
+        if (this.isValidDate(selectedDate)) {
           instance._previousDateBeforeInput = selectedDate;
-          _this.flatpickrInstances[inputIndex].selectedDates = [selectedDate];
+          this.flatpickrInstances[inputIndex].selectedDates = [selectedDate];
         }
       } catch (error) {
         // 오류 발생 시 이전 값으로 복원
-        var previousDate = instance._previousDateBeforeInput;
-        if (previousDate && _this.isValidDate(previousDate)) {
+        const previousDate = instance._previousDateBeforeInput;
+        if (previousDate && this.isValidDate(previousDate)) {
           instance.selectedDates = [previousDate];
         } else {
           instance.selectedDates = [];
         }
-        _this.restoreDateToInstance(instance, previousDate);
+        this.restoreDateToInstance(instance, previousDate);
       }
     };
-  };
-  DatePicker.prototype.invokeOriginalOnChange = function (onChange, selectedDates, dateStr, instance) {
+  }
+  invokeOriginalOnChange(onChange, selectedDates, dateStr, instance) {
     if (!onChange) return;
     if (Array.isArray(onChange)) {
-      onChange.forEach(function (hook) {
+      onChange.forEach(hook => {
         void hook(selectedDates, dateStr, instance);
       });
     } else {
       onChange(selectedDates, dateStr, instance);
     }
-  };
-  DatePicker.prototype.isValidDate = function (date) {
+  }
+  isValidDate(date) {
     return date instanceof Date && !isNaN(date.getTime());
-  };
-  DatePicker.prototype.validateAndRestoreIfNeeded = function (selectedDate, instance, inputIndex, previousDate) {
+  }
+  validateAndRestoreIfNeeded(selectedDate, instance, inputIndex, previousDate) {
     try {
-      var isValid = this.validateDate(selectedDate, inputIndex, previousDate);
+      const isValid = this.validateDate(selectedDate, inputIndex, previousDate);
       if (!isValid) {
         this.restoreDateToInstance(instance, previousDate);
       } else {
@@ -445,13 +425,11 @@ export var DatePicker = /** @class */function () {
       // 오류 발생 시 이전 값으로 복원
       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) {
+  }
+  findFlatpickrInstanceIndexByInput(input) {
+    return this.flatpickrInstances.findIndex(inst => inst.input === input);
+  }
+  restoreDateToInstance(instance, previousDate) {
     try {
       // setDate 호출 전에 날짜 유효성 확인
       if (previousDate && this.isValidDate(previousDate)) {
@@ -468,39 +446,37 @@ export var DatePicker = /** @class */function () {
       try {
         instance.selectedDates = [];
         instance.setDate('', false);
-      } catch (_a) {
+      } catch {
         // 최종 실패 시 무시
       }
     }
-  };
-  DatePicker.prototype.createOnReadyHandler = function (onInputHandler, onHourInputHandler, onMinuteInputHandler, onBlurHandler) {
-    return function (selectedDates, dateStr, instance) {
-      var _a;
-      var input = instance.input;
+  }
+  createOnReadyHandler(onInputHandler, onHourInputHandler, onMinuteInputHandler, onBlurHandler) {
+    return (selectedDates, dateStr, instance) => {
+      const 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');
+      const timeInputWrapper = input.parentElement?.querySelector('.flatpickr-time');
       if (!timeInputWrapper) return;
-      var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
-      var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+      const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+      const 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;
+  }
+  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이 아님)
-      var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
+      const timeInputWrapper = input.parentElement?.querySelector('.flatpickr-time');
       if (timeInputWrapper) {
-        var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
-        var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+        const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+        const minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
         if (hourInput) {
           hourInput.removeEventListener('input', onHourInputHandler);
         }
@@ -510,8 +486,8 @@ export var DatePicker = /** @class */function () {
       }
       document.removeEventListener('mousedown', onMouseDown, true);
     };
-  };
-  DatePicker.prototype.convertDateOption = function (dateOption) {
+  }
+  convertDateOption(dateOption) {
     if (!dateOption) return undefined;
     if (typeof dateOption === 'string' || dateOption instanceof Date) {
       return dateOption;
@@ -523,79 +499,77 @@ export var DatePicker = /** @class */function () {
       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];
+  }
+  validateDate(date, index, previousDate) {
+    const option = this.datePickerOptions[index];
     if (!option) return true;
-    var minDate = (_a = option.options, _a.minDate),
-      maxDate = _a.maxDate;
+    const {
+      minDate,
+      maxDate
+    } = option.options;
     if (!minDate && !maxDate) return true;
-    var inputDate = moment(date);
+    const inputDate = moment(date);
     if (!inputDate.isValid()) return true;
-    var violations = this.checkDateViolations(inputDate, minDate, maxDate);
+    const violations = this.checkDateViolations(inputDate, minDate, maxDate);
     if (violations.length === 0) return true;
     if (this.onValidationError) {
-      var error = {
-        index: index,
-        date: date,
+      const error = {
+        index,
+        date,
         minDate: this.convertDateOption(minDate),
         maxDate: this.convertDateOption(maxDate),
-        violations: violations,
-        previousDate: previousDate
+        violations,
+        previousDate
       };
       this.onValidationError(error);
     }
     return false;
-  };
-  DatePicker.prototype.checkDateViolations = function (inputDate, minDate, maxDate) {
-    var violations = [];
+  }
+  checkDateViolations(inputDate, minDate, maxDate) {
+    const violations = [];
     if (minDate) {
-      var min = moment(minDate);
+      const min = moment(minDate);
       if (min.isValid() && inputDate.isBefore(min, 'day')) {
         violations.push('minDate');
       }
     }
     if (maxDate) {
-      var max = moment(maxDate);
+      const 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);
+  }
+  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);
     });
-    var period = this.calculatePeriod(datesToSet);
+    const period = this.calculatePeriod(datesToSet);
     this.updateButtonsByPeriod(period);
     this.setMultipleDates(datesToSet);
-  };
-  DatePicker.prototype.formatDateForOption = function (date, option, index) {
-    var _a, _b;
+  }
+  formatDateForOption(date, option, index) {
     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);
+    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 '';
-    var isValid = this.validateDate(momentDate.toDate(), index);
+    const isValid = this.validateDate(momentDate.toDate(), index);
     if (!isValid) return '';
     return this.formatMomentDate(momentDate, date, hasTime, index, momentFormat);
-  };
-  DatePicker.prototype.parseDateWithMultipleFormats = function (date, hasTime, momentFormat) {
+  }
+  parseDateWithMultipleFormats(date, hasTime, momentFormat) {
     // hasTime이 true인 경우 (시간 포함 여부와 무관하게 moment로 파싱)
     if (hasTime) {
-      var momentDate_1 = moment(date);
-      return momentDate_1.isValid() ? momentDate_1 : null;
+      const momentDate = moment(date);
+      return momentDate.isValid() ? momentDate : null;
     }
     // hasTime이 false인 경우 - 여러 형식으로 시도
-    var momentDate = moment(date);
+    let momentDate = moment(date);
     if (momentDate.isValid()) {
       return momentDate;
     }
@@ -605,71 +579,64 @@ export var DatePicker = /** @class */function () {
     }
     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) {
+  }
+  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);
-  };
-  DatePicker.prototype.calculatePeriod = function (datesToSet) {
+  }
+  calculatePeriod(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;
+  }
+  updateDateWithButton(e) {
+    const target = e.target;
     if (!target.classList.contains(CONSTANTS.CLASS_NAMES.BUTTON)) return;
-    var clickedButton = this.buttons.find(function (button) {
-      return button.text === target.textContent;
-    });
+    const clickedButton = this.buttons.find(button => 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)
-        });
-      });
+    const updateButtonState = () => {
+      return this.buttons.map(button => ({
+        ...button,
+        isCurrent: button.text === 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
-      });
+  }
+  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);
-  };
-  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;
+  }
+  calculateDatesFromButton(button) {
+    const {
+      period,
+      unit
+    } = button;
+    return this.datePickerOptions.map((option, index) => {
+      const hasTime = option.options?.enableTime;
       if (index === 0) {
-        var startMoment = period ? moment().subtract(period, unit) : moment();
-        return hasTime ? startMoment.startOf('day').format(_this.dateFormat) : startMoment.format(_this.dateFormat);
+        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);
+      return hasTime ? moment().endOf('day').format(this.dateFormat) : moment().format(this.dateFormat);
     });
-  };
+  }
   // flatpickr 형식을 moment 형식으로 변환하는 헬퍼 메서드
-  DatePicker.prototype.convertFlatpickrFormatToMoment = function (flatpickrFormat) {
-    var map = {
+  convertFlatpickrFormatToMoment(flatpickrFormat) {
+    const map = {
       Y: 'YYYY',
       y: 'YY',
       m: 'MM',
@@ -678,22 +645,19 @@ export var DatePicker = /** @class */function () {
       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;
+    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 moment(selectedDates[0]).format(this.dateFormat);
       }
       return '';
     });
-  };
-  DatePicker.instanceCounter = 0;
-  DatePicker.usedWrappers = new Set(); // 사용된 wrapper 요소 추적용
-  return DatePicker;
-}();
+  }
+}
+DatePicker.instanceCounter = 0;
+DatePicker.usedWrappers = new Set(); // 사용된 wrapper 요소 추적용
+export { DatePicker };
 window.DatePicker = DatePicker;