@ncds/ui-admin 1.3.0 → 1.4.1

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

@@ -0,0 +1,257 @@
+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);
+};
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { UnifiedSelectBox } from './utils/selectbox/UnifiedSelectBox';
+var ComboBox = /** @class */function () {
+  function ComboBox(element, config) {
+    if (config === void 0) {
+      config = {};
+    }
+    var _this = this;
+    var _a, _b, _c, _d, _e, _f;
+    this.targetSelect = null;
+    this.isInitializing = true;
+    this.lastValue = '';
+    this.element = element;
+    // 타겟 select 요소 찾기
+    this.targetSelect = this.findTargetSelect(element);
+    // HTML에서 옵션 파싱 (config.options가 없을 경우)
+    var htmlOptions = this.parseOptionsFromHTML();
+    // JavaScript 옵션을 DropdownOption 형식으로 변환 (이제 구조가 동일하므로 단순 복사)
+    var normalizedOptions = config.options ? __spreadArray([], config.options, true) : htmlOptions;
+    var finalOptions = normalizedOptions;
+    // HTML에서 속성 파싱
+    var htmlAttributes = this.parseAttributesFromHTML();
+    // 기존 API를 새 API로 변환
+    var unifiedConfig = __assign(__assign({}, config), {
+      type: 'combobox',
+      multiple: (_a = config.multiple) !== null && _a !== void 0 ? _a : false,
+      showFooterButtons: (_b = config.showFooterButtons) !== null && _b !== void 0 ? _b : false,
+      onSelectAll: config.onSelectAll,
+      onSearchAll: config.onSearchAll,
+      onComplete: config.onComplete,
+      onScrollBottom: config.onScrollBottom,
+      searchDebounceMs: config.searchDebounceMs,
+      options: finalOptions,
+      placeholder: config.placeholder || htmlAttributes.placeholder || '검색하고 선택하세요',
+      value: (_d = (_c = config.value) !== null && _c !== void 0 ? _c : htmlAttributes.value) !== null && _d !== void 0 ? _d : config.multiple ? [] : '',
+      disabled: (_f = (_e = config.disabled) !== null && _e !== void 0 ? _e : htmlAttributes.disabled) !== null && _f !== void 0 ? _f : false,
+      size: config.size || htmlAttributes.size || 'md',
+      onChange: function (value) {
+        var _a;
+        // 초기화 중에는 동기화하지 않음 (무한 루프 방지)
+        if (_this.isInitializing) {
+          _this.lastValue = value;
+          return;
+        }
+        // 값이 실제로 변경되지 않았으면 동기화 생략 (무한 루프 방지)
+        if (JSON.stringify(_this.lastValue) === JSON.stringify(value)) {
+          return;
+        }
+        _this.lastValue = value;
+        // 타겟 select와 동기화
+        if (config.multiple) {
+          _this.syncWithTargetSelectMultiple(value);
+        } else {
+          _this.syncWithTargetSelect(value);
+        }
+        (_a = config.onChange) === null || _a === void 0 ? void 0 : _a.call(config, value);
+      }
+    });
+    this.unifiedSelectBox = new UnifiedSelectBox(element, unifiedConfig);
+    // 초기화 완료 (다음 이벤트 루프에서 실행)
+    setTimeout(function () {
+      _this.isInitializing = false;
+    }, 0);
+  }
+  /**
+   * 타겟 select 요소 찾기
+   */
+  ComboBox.prototype.findTargetSelect = function (element) {
+    // 1. 직접 select 태그인 경우
+    if (element.tagName === 'SELECT') {
+      return element;
+    }
+    // 2. 자식으로 select 태그가 있는 경우
+    var selectChild = element.querySelector('select');
+    if (selectChild) {
+      return selectChild;
+    }
+    // 3. data-target 속성으로 지정된 경우
+    var targetId = element.getAttribute('data-target');
+    if (targetId) {
+      var targetElement = document.getElementById(targetId);
+      if (targetElement && targetElement.tagName === 'SELECT') {
+        return targetElement;
+      }
+    }
+    return null;
+  };
+  /**
+   * HTML select에서 옵션 파싱
+   */
+  ComboBox.prototype.parseOptionsFromHTML = function () {
+    if (!this.targetSelect) return [];
+    var options = [];
+    var optionElements = this.targetSelect.querySelectorAll('option');
+    optionElements.forEach(function (optionElement) {
+      if (optionElement.value) {
+        // value가 있는 옵션만 추가
+        options.push({
+          id: optionElement.value,
+          label: optionElement.textContent || optionElement.value,
+          disabled: optionElement.disabled
+        });
+      }
+    });
+    return options;
+  };
+  /**
+   * HTML에서 속성 파싱
+   */
+  ComboBox.prototype.parseAttributesFromHTML = function () {
+    var attributes = {};
+    if (this.targetSelect) {
+      // select 요소의 속성들
+      if (this.targetSelect.disabled) attributes.disabled = true;
+      if (this.targetSelect.value) attributes.value = this.targetSelect.value;
+      // placeholder는 첫 번째 빈 option에서 가져오기
+      var firstOption = this.targetSelect.querySelector('option[value=""], option:not([value])');
+      if (firstOption) {
+        attributes.placeholder = firstOption.textContent || '검색하고 선택하세요';
+      }
+    }
+    // 컨테이너 요소의 data 속성들
+    var containerAttributes = this.element.dataset;
+    if (containerAttributes.placeholder) attributes.placeholder = containerAttributes.placeholder;
+    if (containerAttributes.size) attributes.size = containerAttributes.size;
+    if (containerAttributes.disabled === 'true') attributes.disabled = true;
+    return attributes;
+  };
+  /**
+   * 타겟 select와 동기화 (Single 모드)
+   */
+  ComboBox.prototype.syncWithTargetSelect = function (value) {
+    if (this.targetSelect) {
+      this.targetSelect.value = String(value);
+      // select 요소의 change 이벤트 발생
+      var event_1 = new Event('change', {
+        bubbles: true
+      });
+      this.targetSelect.dispatchEvent(event_1);
+    }
+  };
+  /**
+   * 타겟 select와 동기화 (Multiple 모드)
+   */
+  ComboBox.prototype.syncWithTargetSelectMultiple = function (values) {
+    var _this = this;
+    if (this.targetSelect && this.targetSelect.multiple) {
+      // 모든 옵션 선택 해제
+      Array.from(this.targetSelect.options).forEach(function (option) {
+        option.selected = false;
+      });
+      // 선택된 값들에 해당하는 옵션들 선택
+      values.forEach(function (value) {
+        var option = _this.targetSelect.querySelector("option[value=\"".concat(value, "\"]"));
+        if (option) {
+          option.selected = true;
+        }
+      });
+      // select 요소의 change 이벤트 발생
+      var event_2 = new Event('change', {
+        bubbles: true
+      });
+      this.targetSelect.dispatchEvent(event_2);
+    }
+  };
+  // 기존 API 호환성 메서드들
+  ComboBox.prototype.getValues = function () {
+    return this.unifiedSelectBox.getValues();
+  };
+  ComboBox.prototype.getOptions = function () {
+    return this.unifiedSelectBox.getOptions();
+  };
+  ComboBox.prototype.setValues = function (value) {
+    // 옵션 객체 배열에서 id 배열로 변환하여 lastValue 비교
+    var ids = value.map(function (option) {
+      return option.id;
+    });
+    var valueForComparison = this.unifiedSelectBox.isMultiple() ? ids : ids[0] || '';
+    // 값이 변경되지 않았으면 무시
+    if (JSON.stringify(this.lastValue) === JSON.stringify(valueForComparison)) {
+      return;
+    }
+    this.lastValue = valueForComparison;
+    this.unifiedSelectBox.setValues(value);
+    // setValues 호출 시에도 타겟 select와 동기화
+    if (this.targetSelect) {
+      if (this.unifiedSelectBox.isMultiple()) {
+        this.syncWithTargetSelectMultiple(ids);
+      } else {
+        this.syncWithTargetSelect(ids[0] || '');
+      }
+    }
+  };
+  ComboBox.prototype.updateOptions = function (newOptions) {
+    this.unifiedSelectBox.updateOptions(newOptions);
+  };
+  ComboBox.prototype.setDisabled = function (disabled) {
+    this.unifiedSelectBox.setDisabled(disabled);
+  };
+  ComboBox.prototype.open = function () {
+    this.unifiedSelectBox.open();
+  };
+  ComboBox.prototype.close = function () {
+    this.unifiedSelectBox.close();
+  };
+  ComboBox.prototype.focus = function () {
+    this.unifiedSelectBox.focus();
+  };
+  ComboBox.prototype.destroy = function () {
+    this.unifiedSelectBox.destroy();
+  };
+  // ComboBox 특화 메서드들
+  ComboBox.prototype.clearInput = function () {
+    // UnifiedSelectBox의 handleClearInput과 동일한 로직
+    this.unifiedSelectBox.close();
+  };
+  ComboBox.prototype.getDebugInfo = function () {
+    return this.unifiedSelectBox.getDebugInfo();
+  };
+  // Multiple 모드 전용 메서드들
+  ComboBox.prototype.selectAll = function () {
+    this.unifiedSelectBox.selectAll();
+  };
+  ComboBox.prototype.deselectAll = function () {
+    this.unifiedSelectBox.deselectAll();
+  };
+  ComboBox.prototype.getSelectedCount = function () {
+    var value = this.getValues();
+    return Array.isArray(value) ? value.length : value ? 1 : 0;
+  };
+  ComboBox.prototype.isMultiple = function () {
+    return this.unifiedSelectBox.isMultiple();
+  };
+  ComboBox.prototype.toggleSelectAll = function () {
+    this.unifiedSelectBox.toggleSelectAll();
+  };
+  return ComboBox;
+}();
+export { ComboBox };

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

@@ -8,6 +8,10 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+import { formatDateInput, formatHourInput, formatMinuteInput } from '@ncds/ui-admin/src/utils/date-picker';
+import flatpickr from 'flatpickr';
+import { Korean } from 'flatpickr/dist/l10n/ko';
+import moment from 'moment';
 // Constants
 var CONSTANTS = {
   ICON_SIZES: {
@@ -22,33 +26,47 @@ var CONSTANTS = {
     DATE_PICKER_ICO: 'ncua-date-picker__ico',
     BUTTON_GROUP: 'ncua-button-group',
     BUTTON_GROUP_HAS_BORDER: 'has-border',
-    BUTTON: 'ncua-button-group__item'
+    BUTTON: 'ncua-button-group__item',
+    HAS_TIME: 'ncua-date-picker--has-time'
   },
   FORMATS: {
-    DATE: 'YYYY-MM-DD'
+    DATE: 'YYYY-MM-DD',
+    DATE_TIME: 'YYYY-MM-DD HH:mm'
   },
   ERROR_MESSAGES: {
     FLATPICKR_NOT_LOADED: 'flatpickr 라이브러리가 로드되지 않았습니다.',
     MOMENT_NOT_LOADED: 'moment 라이브러리가 로드되지 않았습니다.'
   }
 };
-var DatePicker = /** @class */function () {
+export var DatePicker = /** @class */function () {
   function DatePicker(wrapper, options) {
+    var _a, _b;
     this.flatpickrInstances = [];
     this.currentButton = null;
-    var _a = options.buttons,
-      buttons = _a === void 0 ? [] : _a,
+    var buttons = (_a = options.buttons, _a === void 0 ? [] : _a),
       size = options.size,
+      autoComplete = (_b = options.autoComplete, _b === void 0 ? 'off' : _b),
       datePickerOptions = options.datePickerOptions;
+    this.validateWrapper(wrapper);
     this.validationDependencies((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0);
-    this.element = wrapper;
+    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.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.element.innerHTML = '';
+    this.contentWrapper.innerHTML = '';
     this.initializeWrapper();
     this.initButtonGroup();
     this.initDatePicker();
@@ -63,12 +81,15 @@ var DatePicker = /** @class */function () {
   };
   DatePicker.prototype.initializeWrapper = function () {
     if (this.datePickerOptions.length < 2) return;
-    this.element.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER);
+    this.contentWrapper.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER);
   };
   DatePicker.prototype.initButtonGroup = function () {
     var _this = this;
     if (this.buttons.length === 0) return;
-    this.element.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WITH_BUTTONS);
+    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);
@@ -83,7 +104,7 @@ var DatePicker = /** @class */function () {
     var wrapper = createButtonWrapperElement();
     appendButtons(wrapper);
     wrapper.addEventListener('click', this.updateDateWithButton.bind(this));
-    this.element.appendChild(wrapper);
+    this.contentWrapper.appendChild(wrapper);
   };
   DatePicker.prototype.createButtonElement = function (button) {
     if (button.isCurrent) {
@@ -97,7 +118,7 @@ var DatePicker = /** @class */function () {
   };
   DatePicker.prototype.reRenderButtonGroup = function (buttons) {
     var _this = this;
-    var buttonGroup = this.element.querySelector(".".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP));
+    var buttonGroup = this.contentWrapper.querySelector(".".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP));
     if (!buttonGroup) return;
     buttonGroup.innerHTML = '';
     buttons.forEach(function (button) {
@@ -111,49 +132,59 @@ var DatePicker = /** @class */function () {
   DatePicker.prototype.initDatePicker = function () {
     var _this = this;
     var datePickerOptions = this.datePickerOptions;
-    var createWrapperElement = function (size) {
+    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);
+      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 (elementId) {
+    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.id = elementId;
+      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) {
+    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('span');
+      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.element.insertBefore(span, _this.element.querySelectorAll(".".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER))[1]);
+      span.textContent = _this.separator;
+      _this.contentWrapper.insertBefore(span, _this.contentWrapper.querySelectorAll(".".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER))[1]);
     };
     var createDatePickerElement = function (datePickerOption, index) {
-      var wrapper = createWrapperElement(_this.size);
-      var input = createInput(datePickerOption.element);
-      wrapper.appendChild(input);
-      wrapper.appendChild(createIcon(_this.size));
-      wrapper.addEventListener('click', function () {
+      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.element.appendChild(wrapper);
+      _this.contentWrapper.appendChild(inputWrapper);
       if (index > 0) {
         insertSeparator();
       }
-      return _this.initializeFlatpickr(input, datePickerOption.options, wrapper);
+      return _this.initializeFlatpickr(input, datePickerOption.options, inputWrapper);
     };
     var createFlatpickrInstances = function (datePickerOptions) {
       return datePickerOptions.map(function (datePickerOption, index) {
@@ -161,24 +192,23 @@ var DatePicker = /** @class */function () {
       });
     };
     var calcInitDates = function (datePickerOptions) {
-      var _a;
       if (_this.buttons.length > 0) {
-        var _b = (_a = _this.buttons.find(function (button) {
-            return button.isCurrent;
-          })) !== null && _a !== void 0 ? _a : {
-            period: 0,
-            unit: 'days'
-          },
-          period = _b.period,
-          unit = _b.unit;
-        return [moment().subtract(period, unit).format(CONSTANTS.FORMATS.DATE), moment().format(CONSTANTS.FORMATS.DATE)];
+        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(CONSTANTS.FORMATS.DATE);
+          return moment(datePickerOption.options.defaultDate.toString()).format(_this.dateFormat);
         }
-        return moment().format(CONSTANTS.FORMATS.DATE);
+        return '';
       });
     };
     this.flatpickrInstances = createFlatpickrInstances(datePickerOptions);
@@ -186,8 +216,62 @@ var DatePicker = /** @class */function () {
     this.setMultipleDates(dates);
   };
   DatePicker.prototype.initializeFlatpickr = function (input, options, wrapper) {
+    var _a, _b;
+    // flatpickr locale 설정 확인
+    var locale = options.locale || 'ko';
+    // flatpickr locale이 로드되었는지 확인
+    if (!((_a = flatpickr === null || flatpickr === void 0 ? void 0 : flatpickr.l10ns) === null || _a === void 0 ? void 0 : _a[locale])) {
+      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;
+    }
+    var onInputHandler = function (e) {
+      var target = e.target;
+      var input = target.value;
+      var formattedInput = formatDateInput(input);
+      if (formattedInput === input) return;
+      target.value = formattedInput;
+    };
+    var onHourInputHandler = function (e) {
+      var target = e.target;
+      var input = target.value;
+      var formattedInput = formatHourInput(input);
+      if (formattedInput === input) return;
+      target.value = formattedInput;
+    };
+    var onMinuteInputHandler = function (e) {
+      var target = e.target;
+      var input = target.value;
+      var formattedInput = formatMinuteInput(input);
+      if (formattedInput === input) return;
+      target.value = formattedInput;
+    };
     return flatpickr(input, __assign(__assign({}, options), {
-      appendTo: wrapper
+      allowInput: (_b = options.allowInput) !== null && _b !== void 0 ? _b : true,
+      appendTo: wrapper,
+      time_24hr: true,
+      defaultHour: options.defaultHour || 0,
+      defaultMinute: options.defaultMinute || 0,
+      locale: locale,
+      onReady: function (selectedDates, dateStr, instance) {
+        var _a;
+        var input = instance.input;
+        if (!input) return;
+        var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
+        input.addEventListener('input', onInputHandler);
+        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);
+      },
+      onDestroy: function (selectedDates, dateStr, instance) {
+        var input = instance.input;
+        if (!input) return;
+        input.removeEventListener('input', onInputHandler);
+        input.removeEventListener('input', onHourInputHandler);
+        input.removeEventListener('input', onMinuteInputHandler);
+      }
     }));
   };
   DatePicker.prototype.updateDateWithButton = function (e) {
@@ -198,19 +282,6 @@ var DatePicker = /** @class */function () {
       return button.text === target.textContent;
     });
     if (!clickedButton || clickedButton === this.currentButton) return;
-    // 날짜 계산
-    var calculateDates = function () {
-      var period = clickedButton.period,
-        unit = clickedButton.unit;
-      var dates = [];
-      var startDate = period ? moment().subtract(period, unit).format(CONSTANTS.FORMATS.DATE) : moment().format(CONSTANTS.FORMATS.DATE);
-      dates.push(startDate);
-      if (_this.datePickerOptions.length > 1) {
-        var endDate = moment().format(CONSTANTS.FORMATS.DATE);
-        dates.push(endDate);
-      }
-      return dates;
-    };
     var updateButtonState = function () {
       return _this.buttons.map(function (button) {
         return __assign(__assign({}, button), {
@@ -220,24 +291,69 @@ var DatePicker = /** @class */function () {
     };
     this.currentButton = clickedButton;
     this.reRenderButtonGroup(updateButtonState());
-    this.setMultipleDates(calculateDates());
+    this.setMultipleDates(this.calculateDatesFromButton(clickedButton));
   };
   DatePicker.prototype.setMultipleDates = function (dates) {
     var _this = this;
     dates.forEach(function (date, index) {
-      _this.flatpickrInstances[index].setDate(date, true);
-      _this.flatpickrInstances[index].redraw();
+      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);
     });
   };
   DatePicker.prototype.setDate = function (dates) {
-    this.setMultipleDates(dates);
+    var _this = this;
+    var startDate = dates[0],
+      endDate = dates[1];
+    var datesToSet = this.datePickerOptions.map(function (option, index) {
+      var _a;
+      var date = index === 0 ? startDate : endDate;
+      if (!date) return '';
+      var hasTime = (_a = option.options) === null || _a === void 0 ? void 0 : _a.enableTime;
+      if (!hasTime) return date;
+      if (date.includes(':')) return date;
+      var momentDate = moment(date);
+      return index === 0 ? momentDate.startOf('day').format(_this.dateFormat) : momentDate.endOf('day').format(_this.dateFormat);
+    });
+    var period = moment(endDate).diff(moment(startDate), 'days');
+    this.updateButtonsByPeriod(period);
+    this.setMultipleDates(datesToSet);
   };
   DatePicker.prototype.getDates = function () {
-    return this.flatpickrInstances.flatMap(function (instance) {
-      return instance.selectedDates;
+    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;
 }();
-export { DatePicker };
 window.DatePicker = DatePicker;