@ncds/ui-admin 1.5.1 → 1.5.2

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

@@ -46,7 +46,8 @@ export var DatePicker = /** @class */function () {
     var buttons = (_a = options.buttons, _a === void 0 ? [] : _a),
       size = options.size,
       autoComplete = (_b = options.autoComplete, _b === void 0 ? 'off' : _b),
-      datePickerOptions = options.datePickerOptions;
+      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++;
@@ -57,6 +58,7 @@ export var DatePicker = /** @class */function () {
     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) {
@@ -211,82 +213,409 @@ export var DatePicker = /** @class */function () {
         return '';
       });
     };
-    this.flatpickrInstances = createFlatpickrInstances(datePickerOptions);
+    this.flatpickrInstances = createFlatpickrInstances(this.datePickerOptions);
     var dates = calcInitDates(datePickerOptions);
     this.setMultipleDates(dates);
   };
   DatePicker.prototype.initializeFlatpickr = function (input, options, wrapper) {
-    var _a, _b;
+    var _this = this;
+    var _a;
     // 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 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;
     }
-    var onInputHandler = function (e) {
+  };
+  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) return;
-      target.value = formattedInput;
+      // 포맷팅만 수행
+      if (formattedInput !== input) {
+        target.value = formattedInput;
+        return;
+      }
+      // 완전한 날짜 형식이지만 유효하지 않은 경우 처리
+      if (formattedInput && formattedInput.length >= 10) {
+        var parsedDate = moment(formattedInput);
+        if (!parsedDate.isValid()) {
+          _this.restorePreviousDate(target, instance);
+        }
+      }
     };
-    var onHourInputHandler = function (e) {
+  };
+  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;
     };
-    var onMinuteInputHandler = function (e) {
+  };
+  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;
     };
-    // 외부 클릭 시 시간 입력 강제 blur 처리
-    var handleMouseDown = function (e) {
+  };
+  DatePicker.prototype.createMouseDownHandler = function (wrapper) {
+    return function (e) {
       var flatpickrCalendar = wrapper.querySelector('.flatpickr-calendar.open');
-      if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
-        var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
-        timeInputs.forEach(function (input) {
-          if (document.activeElement === input) {
-            input.blur();
+      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);
       }
     };
-    document.addEventListener('mousedown', handleMouseDown, true);
-    return flatpickr(input, __assign(__assign({}, options), {
-      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;
+  };
+  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 || !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);
-        document.removeEventListener('mousedown', handleMouseDown, true);
+        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;
@@ -338,48 +667,6 @@ export var DatePicker = /** @class */function () {
       return hasTime ? moment().endOf('day').format(_this.dateFormat) : moment().format(_this.dateFormat);
     });
   };
-  DatePicker.prototype.setDate = function (dates) {
-    var _this = this;
-    var startDate = dates[0],
-      endDate = dates[1];
-    var datesToSet = this.datePickerOptions.map(function (option, index) {
-      var _a, _b;
-      var date = index === 0 ? startDate : endDate;
-      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');
-      // dateFormat이 설정되어 있지 않을 때만 hasTime에 따라 기본값 설정
-      // dateFormat이 설정되어 있으면 그 형식을 그대로 사용 (enableTime과 무관하게)
-      var momentFormat = _this.convertFlatpickrFormatToMoment(flatpickrFormat);
-      var momentDate;
-      if (hasTime && !date.includes(':')) {
-        // 시간이 없는 날짜 형식으로 파싱
-        momentDate = moment(date);
-        if (!momentDate.isValid()) return '';
-        return index === 0 ? momentDate.startOf('day').format(momentFormat) : momentDate.endOf('day').format(momentFormat);
-      }
-      if (hasTime && date.includes(':')) {
-        momentDate = moment(date);
-        if (!momentDate.isValid()) return '';
-        return momentDate.format(momentFormat);
-      }
-      // 시간이 없는 경우 (hasTime이 false이거나 date에 시간이 없는 경우)
-      momentDate = moment(date);
-      if (!momentDate.isValid()) {
-        momentDate = moment(date, momentFormat, true);
-      }
-      // 둘 다 실패하면 다른 일반적인 형식들로 시도
-      if (!momentDate.isValid()) {
-        momentDate = moment(date, [momentFormat, 'YYYY-MM-DD', 'YYYY/MM/DD', 'MM/DD/YYYY'], true);
-      }
-      if (!momentDate.isValid()) return '';
-      // dateFormat 형식으로 포맷팅하여 반환 (flatpickr가 표시하는 형식과 일치)
-      return momentDate.format(momentFormat);
-    });
-    var period = datesToSet[0] && datesToSet[1] ? moment(datesToSet[1]).diff(moment(datesToSet[0]), 'days') : null;
-    this.updateButtonsByPeriod(period);
-    this.setMultipleDates(datesToSet);
-  };
   // flatpickr 형식을 moment 형식으로 변환하는 헬퍼 메서드
   DatePicker.prototype.convertFlatpickrFormatToMoment = function (flatpickrFormat) {
     var map = {