@extclp/vexip-ui/es/components/date-picker/date-picker.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"date-picker.vue2.mjs","sources":["../../../components/date-picker/date-picker.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Icon } from '@/components/icon'\r\nimport { Popper } from '@/components/popper'\r\nimport { Renderer } from '@/components/renderer'\r\nimport { useFieldStore } from '@/components/form'\r\n\r\nimport { computed, nextTick, reactive, ref, toRef, watch } from 'vue'\r\n\r\nimport DateControl from './date-control.vue'\r\nimport DatePanel from './date-panel.vue'\r\nimport {\r\n  createIconProp,\r\n  createSizeProp,\r\n  createStateProp,\r\n  emitEvent,\r\n  makeSentence,\r\n  useIcons,\r\n  useLocale,\r\n  useNameHelper,\r\n  useProps,\r\n  useWordSpace,\r\n} from '@vexip-ui/config'\r\nimport {\r\n  placementWhileList,\r\n  useClickOutside,\r\n  useHover,\r\n  usePopper,\r\n  useSetTimeout,\r\n} from '@vexip-ui/hooks'\r\nimport {\r\n  boundRange,\r\n  differenceDays,\r\n  doubleDigits,\r\n  format,\r\n  getTime,\r\n  isLeapYear,\r\n  isObject,\r\n  mergeObjects,\r\n  startOfMonth,\r\n  toAttrValue,\r\n  toDate,\r\n  toFalse,\r\n} from '@vexip-ui/utils'\r\nimport { datePickerProps } from './props'\r\nimport { useColumn, useTimeBound } from './helper'\r\nimport { datePickerTypes, invalidDate } from './symbol'\r\n\r\nimport type { PopperExposed } from '@/components/popper'\r\nimport type { Dateable } from '@vexip-ui/utils'\r\nimport type {\r\n  DatePickerChangeEvent,\r\n  DatePickerFormatFn,\r\n  DatePickerSlots,\r\n  DateTimeType,\r\n  DateType,\r\n  TimeType,\r\n} from './symbol'\r\n\r\ndefineOptions({ name: 'DatePicker' })\r\n\r\nconst {\r\n  idFor,\r\n  labelId,\r\n  state,\r\n  disabled,\r\n  loading,\r\n  size,\r\n  validateField,\r\n  clearField,\r\n  getFieldValue,\r\n  setFieldValue,\r\n} = useFieldStore<Dateable | Dateable[]>(() => reference.value?.focus())\r\n\r\nconst nh = useNameHelper('date-picker')\r\n\r\nconst _props = defineProps(datePickerProps)\r\nconst props = useProps('datePicker', _props, {\r\n  size: createSizeProp(size),\r\n  state: createStateProp(state),\r\n  locale: null,\r\n  type: {\r\n    default: 'date',\r\n    validator: value => datePickerTypes.includes(value),\r\n  },\r\n  visible: false,\r\n  placement: {\r\n    default: 'bottom-start',\r\n    validator: value => placementWhileList.includes(value),\r\n  },\r\n  transfer: false,\r\n  value: {\r\n    default: () => getFieldValue(),\r\n    static: true,\r\n  },\r\n  format: 'yMd Hms',\r\n  valueFormat: null,\r\n  filler: {\r\n    default: '-',\r\n    validator: value => value.length === 1,\r\n  },\r\n  clearable: false,\r\n  noAction: false,\r\n  labels: () => ({}),\r\n  dateSeparator: '/',\r\n  timeSeparator: ':',\r\n  shortcuts: () => [],\r\n  disabledDate: {\r\n    default: toFalse,\r\n    isFunc: true,\r\n  },\r\n  steps: () => [1, 1, 1],\r\n  ctrlSteps: () => [5, 5, 5],\r\n  prefix: createIconProp(),\r\n  prefixColor: '',\r\n  suffix: createIconProp(),\r\n  suffixColor: '',\r\n  noSuffix: false,\r\n  disabled: () => disabled.value,\r\n  transitionName: () => nh.ns('drop'),\r\n  confirmText: null,\r\n  cancelText: null,\r\n  today: {\r\n    default: () => new Date(),\r\n    validator: value => !Number.isNaN(new Date(value)),\r\n  },\r\n  range: null,\r\n  loading: () => loading.value,\r\n  loadingIcon: createIconProp(),\r\n  loadingLock: false,\r\n  loadingEffect: null,\r\n  min: null,\r\n  max: null,\r\n  outsideClose: true,\r\n  outsideCancel: false,\r\n  placeholder: null,\r\n  unitReadonly: false,\r\n  weekStart: null,\r\n  popperAlive: null,\r\n  shortcutsPlacement: 'left',\r\n  slots: () => ({}),\r\n})\r\n\r\nconst emit = defineEmits(['update:value', 'update:formatted-value', 'update:visible'])\r\n\r\nconst slots = defineSlots<DatePickerSlots>()\r\n\r\nconst calendarLocale = useLocale('calendar')\r\nconst datePickerLocale = useLocale('datePicker')\r\nconst icons = useIcons()\r\nconst wordSpace = useWordSpace()\r\n\r\nconst placement = toRef(props, 'placement')\r\nconst transfer = toRef(props, 'transfer')\r\nconst currentVisible = ref(props.visible)\r\nconst focused = ref(false)\r\nconst startState = createDateState()\r\nconst endState = createDateState()\r\nconst currentState = ref<'start' | 'end'>('start')\r\nconst lastValue = ref('')\r\nconst firstSelected = ref<number[] | undefined>()\r\nconst hoveredDate = ref(new Date())\r\nconst staticWheel = ref(false)\r\nconst dateUnitOrder = ref<DateType[]>([])\r\n\r\nconst { timer } = useSetTimeout()\r\n\r\nconst wrapper = useClickOutside(handleClickOutside)\r\nconst popper = ref<PopperExposed>()\r\nconst { reference, transferTo, updatePopper } = usePopper({\r\n  placement,\r\n  transfer,\r\n  wrapper,\r\n  popper: computed(() => popper.value?.wrapper),\r\n  isDrop: true,\r\n})\r\nconst { isHover } = useHover(reference)\r\n\r\nconst startInput = ref<InstanceType<typeof DateControl>>()\r\nconst endInput = ref<InstanceType<typeof DateControl>>()\r\nconst datePanel = ref<InstanceType<typeof DatePanel>>()\r\n\r\nconst mergedLocale = computed(() => {\r\n  const locale = mergeObjects(calendarLocale.value, datePickerLocale.value, true)\r\n\r\n  return isObject(props.locale) ? mergeObjects(locale, props.locale) : locale\r\n})\r\nconst startPlaceholder = computed(() => {\r\n  if (props.placeholder) {\r\n    return Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder\r\n  }\r\n\r\n  const { select, start, [props.type]: type } = mergedLocale.value.placeholder\r\n\r\n  return makeSentence(props.range ? `${start} ${type}` : `${select} ${type}`, wordSpace.value)\r\n})\r\nconst endPlaceholder = computed(() => {\r\n  if (props.placeholder) {\r\n    return Array.isArray(props.placeholder)\r\n      ? props.placeholder[1] || props.placeholder[0]\r\n      : props.placeholder\r\n  }\r\n\r\n  const { end, [props.type]: type } = mergedLocale.value.placeholder\r\n\r\n  return makeSentence(`${end} ${type}`, wordSpace.value)\r\n})\r\nconst className = computed(() => {\r\n  return [\r\n    nh.b(),\r\n    nh.ns('input-vars'),\r\n    nh.bs('vars'),\r\n    nh.bm(props.type),\r\n    {\r\n      [nh.bm('inherit')]: props.inherit,\r\n      [nh.bm('disabled')]: props.disabled,\r\n      [nh.bm(props.size)]: props.size !== 'default',\r\n      [nh.bm('no-hour')]: !startState.enabled.hour,\r\n      [nh.bm('no-minute')]: !startState.enabled.minute,\r\n      [nh.bm('no-second')]: !startState.enabled.second,\r\n      [nh.bm('visible')]: currentVisible.value,\r\n      [nh.bm(props.state)]: props.state !== 'default',\r\n      [nh.bm('is-range')]: props.range,\r\n    },\r\n  ]\r\n})\r\nconst readonly = computed(() => props.loading && props.loadingLock)\r\nconst selectorClass = computed(() => {\r\n  const baseCls = nh.be('selector')\r\n\r\n  return {\r\n    [baseCls]: true,\r\n    [`${baseCls}--disabled`]: props.disabled,\r\n    [`${baseCls}--readonly`]: readonly.value,\r\n    [`${baseCls}--loading`]: props.loading,\r\n    [`${baseCls}--${props.size}`]: props.size !== 'default',\r\n    [`${baseCls}--focused`]: focused.value,\r\n    [`${baseCls}--${props.state}`]: props.state !== 'default',\r\n  }\r\n})\r\nconst hasPrefix = computed(() => {\r\n  return !!(slots.prefix || props.prefix)\r\n})\r\nconst currentValue = computed(() => {\r\n  const values = [startState, endState].map(state => {\r\n    const values = Object.values(state.dateValue).map(doubleDigits)\r\n\r\n    return `${values.slice(0, 3).join('-')} ${values.slice(3).join(':')}`\r\n  })\r\n\r\n  return props.range ? values : values[0]\r\n})\r\nconst hoveredLarge = computed(() => {\r\n  if (!firstSelected.value) return false\r\n\r\n  const [year, month, date] = firstSelected.value\r\n  const firstTime = new Date(`${year}-${month}-${date}`).getTime()\r\n  const hoverTime = hoveredDate.value.getTime()\r\n\r\n  return firstTime < hoverTime\r\n})\r\nconst showClear = computed(() => {\r\n  return !props.disabled && !readonly.value && props.clearable && isHover.value && !!lastValue.value\r\n})\r\nconst min = computed(() => {\r\n  if (props.min) {\r\n    const date = rawValueToDate(props.min, invalidDate)\r\n\r\n    if (Number.isNaN(+date)) return -Infinity\r\n\r\n    date.setHours(0, 0, 0, 0)\r\n\r\n    return date.getTime()\r\n  }\r\n\r\n  return -Infinity\r\n})\r\nconst max = computed(() => {\r\n  if (props.max) {\r\n    let date = rawValueToDate(props.max, invalidDate)\r\n\r\n    if (Number.isNaN(+date)) return Infinity\r\n\r\n    if (props.type !== 'datetime') {\r\n      date.setHours(23, 59, 59, 999)\r\n\r\n      if (props.type === 'year') {\r\n        date.setMonth(11)\r\n        date.setDate(31)\r\n      } else if (props.type === 'month') {\r\n        date.setMonth(date.getMonth() + 1)\r\n        date = startOfMonth(date)\r\n        date.setDate(date.getDate() - 1)\r\n      }\r\n    }\r\n\r\n    return date.getTime()\r\n  }\r\n\r\n  return Infinity\r\n})\r\nconst reversed = computed(() => {\r\n  if (Number.isNaN(min.value) || Number.isNaN(max.value)) {\r\n    return false\r\n  }\r\n\r\n  return min.value > max.value\r\n})\r\nconst startMinTime = computed(() => {\r\n  if (props.type === 'datetime' && props.min && !differenceDays(props.min, startState.getDate())) {\r\n    return getTime(props.min)\r\n  }\r\n\r\n  return ''\r\n})\r\nconst startMaxTime = computed(() => {\r\n  if (props.type === 'datetime' && props.max && !differenceDays(props.max, startState.getDate())) {\r\n    return getTime(props.max)\r\n  }\r\n\r\n  return ''\r\n})\r\nconst endMinTime = computed(() => {\r\n  if (\r\n    props.type === 'datetime' &&\r\n    props.range &&\r\n    props.min &&\r\n    !differenceDays(props.min, startState.getDate())\r\n  ) {\r\n    return getTime(props.min)\r\n  }\r\n\r\n  return ''\r\n})\r\nconst endMaxTime = computed(() => {\r\n  if (\r\n    props.type === 'datetime' &&\r\n    props.range &&\r\n    props.max &&\r\n    !differenceDays(props.max, startState.getDate())\r\n  ) {\r\n    return getTime(props.max)\r\n  }\r\n\r\n  return ''\r\n})\r\nconst startReversed = computed(() => {\r\n  if (!props.range) return false\r\n\r\n  const startValue = startState.dateValue\r\n  const endValue = endState.dateValue\r\n\r\n  let types: DateTimeType[]\r\n\r\n  if (props.type === 'year') {\r\n    types = ['year']\r\n  } else if (props.type === 'month') {\r\n    types = ['year', 'month']\r\n  } else if (props.type === 'date') {\r\n    types = ['year', 'month', 'date']\r\n  } else {\r\n    types = ['year', 'month', 'date', 'hour', 'minute', 'second']\r\n  }\r\n\r\n  for (const type of types) {\r\n    if (startValue[type] < endValue[type]) return false\r\n    if (startValue[type] > endValue[type]) return true\r\n  }\r\n\r\n  return false\r\n})\r\n\r\nconst startTimeBound = useTimeBound(startMinTime, startMaxTime)\r\nconst endTimeBound = useTimeBound(endMinTime, endMaxTime)\r\n\r\nconst isTimeDisabled = computed(() => {\r\n  return currentState.value === 'start'\r\n    ? startTimeBound.isTimeDisabled\r\n    : endTimeBound.isTimeDisabled\r\n})\r\nconst startError = computed(() => {\r\n  const { hour, minute, second } = startState.dateValue\r\n  const { isTimeDisabled } = startTimeBound\r\n\r\n  return (\r\n    startReversed.value ||\r\n    isDateDisabled(startState.getDate()) ||\r\n    isTimeDisabled.hour(hour) ||\r\n    isTimeDisabled.minute(hour, minute) ||\r\n    isTimeDisabled.second(hour, minute, second)\r\n  )\r\n})\r\nconst endError = computed(() => {\r\n  if (!props.range) return false\r\n\r\n  const { hour, minute, second } = endState.dateValue\r\n  const { isTimeDisabled } = endTimeBound\r\n\r\n  return (\r\n    startReversed.value ||\r\n    isDateDisabled(endState.getDate()) ||\r\n    isTimeDisabled.hour(hour) ||\r\n    isTimeDisabled.minute(hour, minute) ||\r\n    isTimeDisabled.second(hour, minute, second)\r\n  )\r\n})\r\nconst noActionMode = computed(() => props.type !== 'datetime' && props.noAction)\r\n\r\nwatch(() => props.type, parseFormat)\r\nwatch(\r\n  () => props.value,\r\n  value => {\r\n    parseValue(value)\r\n\r\n    lastValue.value = (Array.isArray(value) ? value[0] || value[1] : value) ? getStringValue() : ''\r\n  },\r\n  { immediate: true },\r\n)\r\nwatch(\r\n  () => props.type,\r\n  value => {\r\n    const hasMonth = value !== 'year'\r\n    const hasDate = hasMonth && value !== 'month'\r\n\r\n    startState.enabled.year = true\r\n    endState.enabled.year = true\r\n    startState.enabled.month = hasMonth\r\n    endState.enabled.month = hasMonth\r\n    startState.enabled.date = hasDate\r\n    endState.enabled.date = hasDate\r\n  },\r\n  { immediate: true },\r\n)\r\nwatch(() => props.format, parseFormat, { immediate: true })\r\nwatch(\r\n  () => props.visible,\r\n  value => {\r\n    currentVisible.value = value\r\n  },\r\n)\r\nwatch(currentVisible, value => {\r\n  if (value) {\r\n    updatePopper()\r\n  }\r\n})\r\nwatch(focused, value => {\r\n  if (value) {\r\n    emitEvent(props.onFocus)\r\n  } else {\r\n    emitEvent(props.onBlur)\r\n  }\r\n})\r\nwatch(currentState, value => {\r\n  if (!props.unitReadonly && currentVisible.value) {\r\n    emitEvent(props.onChangeCol, getCurrentState().column, value)\r\n  }\r\n})\r\nwatch(\r\n  () => startState.column,\r\n  value => {\r\n    if (!props.unitReadonly && currentVisible.value && currentState.value === 'start') {\r\n      emitEvent(props.onChangeCol, value, 'start')\r\n    }\r\n  },\r\n)\r\nwatch(\r\n  () => endState.column,\r\n  value => {\r\n    if (!props.unitReadonly && currentVisible.value && currentState.value === 'end') {\r\n      emitEvent(props.onChangeCol, value, 'end')\r\n    }\r\n  },\r\n)\r\nwatch(\r\n  () => props.disabled,\r\n  value => {\r\n    if (value) {\r\n      setVisible(false)\r\n      handleBlur()\r\n    }\r\n  },\r\n)\r\nwatch(readonly, value => {\r\n  if (value) {\r\n    setVisible(false)\r\n  }\r\n})\r\n\r\ndefineExpose({\r\n  idFor,\r\n  currentVisible,\r\n  focused,\r\n  isHover,\r\n  startState,\r\n  endState,\r\n  currentState,\r\n  startError,\r\n  endError,\r\n  wrapper,\r\n  reference,\r\n  popper,\r\n  start: startInput,\r\n  end: endInput,\r\n  panel: datePanel,\r\n  updatePopper,\r\n  focus: (options?: FocusOptions) => reference.value?.focus(options),\r\n  blur: () => reference.value?.blur(),\r\n})\r\n\r\nfunction createDateState() {\r\n  // const noFiller = props.noFiller\r\n  const { currentColumn, enabled, resetColumn, enterColumn } = useColumn([\r\n    'year',\r\n    'month',\r\n    'date',\r\n    'hour',\r\n    'minute',\r\n    'second',\r\n  ] as DateTimeType[])\r\n\r\n  const dateValue = reactive({\r\n    year: 1970,\r\n    month: 1, // 1 ~ 12\r\n    date: 1,\r\n    hour: 0,\r\n    minute: 0,\r\n    second: 0,\r\n  })\r\n  const activated = reactive({\r\n    year: false,\r\n    month: false,\r\n    date: false,\r\n    hour: false,\r\n    minute: false,\r\n    second: false,\r\n  })\r\n\r\n  let valueRecord = { ...dateValue }\r\n  let activatedRecord = { ...activated }\r\n\r\n  return reactive({\r\n    column: currentColumn,\r\n    enabled,\r\n    activated,\r\n    dateValue,\r\n    resetColumn,\r\n    enterColumn,\r\n    setDate: (date: Date, withTime = true) => {\r\n      dateValue.year = date.getFullYear()\r\n      dateValue.month = date.getMonth() + 1\r\n      dateValue.date = date.getDate()\r\n\r\n      if (withTime) {\r\n        dateValue.hour = date.getHours()\r\n        dateValue.minute = date.getMinutes()\r\n        dateValue.second = date.getSeconds()\r\n      }\r\n    },\r\n    getDate: () => {\r\n      return new Date(\r\n        dateValue.year,\r\n        dateValue.month - 1,\r\n        dateValue.date,\r\n        dateValue.hour,\r\n        dateValue.minute,\r\n        dateValue.second,\r\n      )\r\n    },\r\n    record() {\r\n      valueRecord = { ...dateValue }\r\n      activatedRecord = { ...activated }\r\n    },\r\n    restore() {\r\n      Object.assign(dateValue, valueRecord)\r\n      Object.assign(activated, activatedRecord)\r\n    },\r\n  })\r\n}\r\n\r\nfunction getCurrentState() {\r\n  return currentState.value === 'start' ? startState : endState\r\n}\r\n\r\nfunction rawValueToDate(value: Dateable, defaultValue = new Date(props.today)) {\r\n  let date = toDate(value)\r\n\r\n  if (Number.isNaN(date.getTime())) {\r\n    date = defaultValue\r\n  }\r\n\r\n  return date\r\n}\r\n\r\nfunction parseValue<T extends Dateable | null>(value: T | T[]) {\r\n  if (!Array.isArray(value)) {\r\n    value = [value, value]\r\n  }\r\n\r\n  for (let i = 0; i < 2; ++i) {\r\n    const date = rawValueToDate(value[i] ?? '')\r\n    const state = i === 0 ? startState : endState\r\n\r\n    state.setDate(date)\r\n    toggleActivated(!!value[i], i === 0 ? 'start' : 'end')\r\n\r\n    if (!props.range) break\r\n  }\r\n}\r\n\r\nfunction parseDateUnitOrder() {\r\n  const orderSet = new Set<DateType>()\r\n\r\n  // to ignore 'xxx'\r\n  let inQuotation = false\r\n\r\n  for (let i = 0, len = props.format.length; i < len; ++i) {\r\n    const char = props.format.charAt(i)\r\n\r\n    if (char === \"'\") {\r\n      inQuotation = !inQuotation\r\n    } else if (!inQuotation) {\r\n      switch (char) {\r\n        case 'y':\r\n          orderSet.add('year')\r\n          break\r\n        case 'M':\r\n          orderSet.add('month')\r\n          break\r\n        case 'd':\r\n          orderSet.add('date')\r\n          break\r\n      }\r\n    }\r\n  }\r\n\r\n  dateUnitOrder.value = [...orderSet]\r\n}\r\n\r\nfunction parseTimeUnitEnabled() {\r\n  const isDatetime = props.type === 'datetime'\r\n\r\n  ;[startState, endState].forEach(state => {\r\n    state.enabled.hour = false\r\n    state.enabled.minute = false\r\n    state.enabled.second = false\r\n\r\n    if (isDatetime && props.format) {\r\n      // to ignore 'H', 'm' and 's'\r\n      let inQuotation = false\r\n\r\n      for (let i = 0, len = props.format.length; i < len; ++i) {\r\n        const char = props.format.charAt(i)\r\n\r\n        if (char === \"'\") {\r\n          inQuotation = !inQuotation\r\n        } else if (!inQuotation) {\r\n          switch (char) {\r\n            case 'H':\r\n              state.enabled.hour = true\r\n              break\r\n            case 'm':\r\n              state.enabled.minute = true\r\n              break\r\n            case 's':\r\n              state.enabled.second = true\r\n              break\r\n          }\r\n        }\r\n      }\r\n    }\r\n  })\r\n}\r\n\r\nfunction parseFormat() {\r\n  parseDateUnitOrder()\r\n  parseTimeUnitEnabled()\r\n}\r\n\r\nfunction toggleActivated(value: boolean, valueType?: 'start' | 'end') {\r\n  const states = valueType\r\n    ? valueType === 'start'\r\n      ? [startState]\r\n      : [endState]\r\n    : [startState, endState]\r\n\r\n  states.forEach(state => {\r\n    ;(Object.keys(state.activated) as DateTimeType[]).forEach(type => {\r\n      state.activated[type] = value\r\n    })\r\n  })\r\n}\r\n\r\nfunction getStringValue() {\r\n  return Array.isArray(currentValue.value) ? currentValue.value.join('|') : currentValue.value\r\n}\r\n\r\nfunction isDateDisabled(date: Date) {\r\n  if (typeof props.disabledDate === 'function') {\r\n    if (props.disabledDate(date)) {\r\n      return true\r\n    }\r\n  }\r\n\r\n  const time = date.getTime()\r\n\r\n  if (reversed.value) {\r\n    if (time > max.value && time < min.value) {\r\n      return true\r\n    }\r\n  } else {\r\n    if (time < min.value || time > max.value) {\r\n      return true\r\n    }\r\n  }\r\n\r\n  return false\r\n}\r\n\r\nfunction verifyDate() {\r\n  if (startError.value || (props.range && endError.value)) {\r\n    parseValue(props.value)\r\n  }\r\n}\r\n\r\nfunction setVisible(visible: boolean) {\r\n  if (currentVisible.value === visible) return\r\n\r\n  currentVisible.value = visible\r\n\r\n  emit('update:visible', visible)\r\n  emitEvent(props.onToggle, visible)\r\n}\r\n\r\nfunction emitChange() {\r\n  verifyDate()\r\n\r\n  if (lastValue.value !== getStringValue()) {\r\n    lastValue.value = getStringValue()\r\n\r\n    const values = Array.isArray(currentValue.value) ? currentValue.value : [currentValue.value]\r\n    const emitValues: number[] = []\r\n    const formattedValues: unknown[] = []\r\n\r\n    const valueFormat = props.valueFormat\r\n    const formatValue: DatePickerFormatFn =\r\n      typeof valueFormat === 'function'\r\n        ? valueFormat\r\n        : valueFormat\r\n          ? (timestamp, type) =>\r\n            format(\r\n              timestamp,\r\n              !Array.isArray(valueFormat)\r\n                ? valueFormat\r\n                : type === 'start'\r\n                  ? valueFormat[0]\r\n                  : valueFormat[1],\r\n            )\r\n          : timestamp => timestamp\r\n\r\n    for (let i = 0; i < 2; ++i) {\r\n      if (props.type === 'year') {\r\n        emitValues[i] = new Date(\r\n          i === 0 ? startState.dateValue.year : endState.dateValue.year,\r\n          0,\r\n        ).getTime()\r\n      } else if (props.type !== 'datetime') {\r\n        emitValues[i] = new Date(values[i].split(' ')[0] + ' 00:00:00').getTime()\r\n      } else {\r\n        emitValues[i] = new Date(values[i]).getTime()\r\n      }\r\n\r\n      formattedValues[i] = formatValue(emitValues[i], i === 0 ? 'start' : 'end')\r\n\r\n      if (!props.range) break\r\n    }\r\n\r\n    const emitValue = props.range ? emitValues : emitValues[0]\r\n    const formattedValue = props.range ? formattedValues : formattedValues[0]\r\n\r\n    toggleActivated(true)\r\n    emit('update:value', emitValue)\r\n    emit('update:formatted-value', formattedValue)\r\n    setFieldValue(emitValue)\r\n    emitEvent(props.onChange as DatePickerChangeEvent, emitValue)\r\n    validateField()\r\n  }\r\n}\r\n\r\nfunction finishInput(shouldChange = true) {\r\n  setVisible(false)\r\n\r\n  shouldChange && emitChange()\r\n  startState.resetColumn()\r\n  endState.resetColumn()\r\n}\r\n\r\nfunction verifyValue(type: DateTimeType) {\r\n  const dateValue = getCurrentState().dateValue\r\n\r\n  switch (type) {\r\n    case 'year': {\r\n      dateValue.year = boundRange(dateValue.year, 1970, 9999)\r\n      break\r\n    }\r\n    case 'month': {\r\n      dateValue.month = boundRange(dateValue.month, 1, 12)\r\n      break\r\n    }\r\n    case 'date': {\r\n      const month = dateValue.month\r\n\r\n      let lastDay\r\n\r\n      if (month < 7) {\r\n        if (month !== 2) {\r\n          lastDay = 30 + (month % 2)\r\n        } else {\r\n          if (isLeapYear(dateValue.year)) {\r\n            lastDay = 29\r\n          } else {\r\n            lastDay = 28\r\n          }\r\n        }\r\n      } else {\r\n        lastDay = 31 - (month % 2)\r\n      }\r\n\r\n      dateValue.date = boundRange(dateValue.date, 1, lastDay)\r\n      break\r\n    }\r\n    case 'hour':\r\n    case 'minute':\r\n    case 'second': {\r\n      dateValue[type] = boundRange(dateValue[type], 0, type === 'hour' ? 23 : 59)\r\n      dateValue[type] = Math.round(dateValue[type] / getStep(type)) * getStep(type)\r\n    }\r\n  }\r\n}\r\n\r\nfunction handleFocused() {\r\n  if (props.disabled) return\r\n\r\n  focused.value = true\r\n\r\n  timer.focus = setTimeout(() => {\r\n    if (focused.value) {\r\n      if (currentState.value === 'start') {\r\n        startInput.value?.focus()\r\n      } else {\r\n        endInput.value?.focus()\r\n      }\r\n    }\r\n  }, 120)\r\n}\r\n\r\nfunction handleBlur() {\r\n  clearTimeout(timer.focus)\r\n\r\n  focused.value = false\r\n  startInput.value?.blur()\r\n  endInput.value?.blur()\r\n}\r\n\r\nfunction showPanel(event: Event) {\r\n  if (props.disabled || readonly.value) return\r\n\r\n  const target = event.target as Node\r\n\r\n  setVisible(true)\r\n\r\n  if (wrapper.value && target) {\r\n    const units = Array.from(wrapper.value.querySelectorAll(`.${nh.be('unit')}`))\r\n    const index = units.findIndex(unit => unit === target || unit.contains(target))\r\n\r\n    if (!~index) {\r\n      startState.column = null\r\n      endState.column = null\r\n    }\r\n\r\n    if (props.range && index >= units.length / 2) {\r\n      toggleCurrentState('end')\r\n    } else {\r\n      toggleCurrentState('start')\r\n    }\r\n  }\r\n\r\n  handleFocused()\r\n}\r\n\r\nfunction handleInput(value: number) {\r\n  const state = getCurrentState()\r\n  const type = state.column\r\n\r\n  if (!type) return\r\n\r\n  handleInputNumber(type, value)\r\n\r\n  if (type === 'year' ? state.dateValue.year >= 1000 : state.dateValue[type] >= 10) {\r\n    state.enterColumn('next', false)\r\n  }\r\n}\r\n\r\nfunction handleInputNumber(type: DateTimeType, number: number) {\r\n  const state = getCurrentState()\r\n  const prev = state.dateValue[type]\r\n\r\n  if (state.activated[type] && prev > 0 && prev < (type === 'year' ? 1000 : 10)) {\r\n    state.dateValue[type] = prev * 10 + number\r\n  } else {\r\n    state.dateValue[type] = number\r\n    setActivatedTrue(type)\r\n  }\r\n\r\n  type !== 'year' && verifyValue(type)\r\n  emitEvent(props.onInput, type, state.dateValue[type])\r\n}\r\n\r\nfunction setActivatedTrue(type: DateTimeType) {\r\n  const activated = getCurrentState().activated\r\n\r\n  if (type === 'date') {\r\n    activated.year = true\r\n    activated.month = true\r\n  } else if (type === 'month') {\r\n    activated.year = true\r\n  } else if (type === 'minute') {\r\n    activated.hour = true\r\n  } else if (type === 'second') {\r\n    activated.hour = true\r\n    activated.minute = true\r\n  }\r\n\r\n  activated[type] = true\r\n}\r\n\r\nfunction handleInputFocus(type: DateTimeType) {\r\n  getCurrentState().column = type\r\n}\r\n\r\nfunction isTimeType(type: DateTimeType): type is TimeType {\r\n  return ['hour', 'minute', 'second'].includes(type)\r\n}\r\n\r\nfunction handleAdjust(adjustType: 'plus' | 'minus', ctrlKey: boolean) {\r\n  const isPlus = adjustType === 'plus'\r\n  const sign = isPlus ? 1 : -1\r\n  const state = getCurrentState()\r\n  const type = state.column\r\n\r\n  if (!type) return\r\n\r\n  if (state.enabled[type]) {\r\n    if (isTimeType(type)) {\r\n      state.dateValue[type] += sign * (ctrlKey ? getCtrlStep(type) : getStep(type))\r\n    } else {\r\n      if (ctrlKey) {\r\n        if (type === 'year') {\r\n          state.dateValue.year += sign * 10\r\n        } else {\r\n          state.dateValue[type === 'date' ? 'month' : 'year'] += sign\r\n        }\r\n      } else {\r\n        state.dateValue[type] += sign\r\n      }\r\n\r\n      computeDate()\r\n      updateDateActivated(type)\r\n    }\r\n\r\n    verifyValue(type)\r\n    emitEvent(props[isPlus ? 'onPlus' : 'onMinus'], type, state.dateValue[type])\r\n    datePanel.value?.refreshCalendar(currentState.value)\r\n  }\r\n}\r\n\r\nfunction handlePlus(ctrlKey: boolean) {\r\n  handleAdjust('plus', ctrlKey)\r\n}\r\n\r\nfunction handleMinus(ctrlKey: boolean) {\r\n  handleAdjust('minus', ctrlKey)\r\n}\r\n\r\nfunction computeDate() {\r\n  const dateValue = getCurrentState().dateValue\r\n  const date = new Date(dateValue.year, dateValue.month - 1, dateValue.date)\r\n\r\n  dateValue.year = date.getFullYear()\r\n  dateValue.month = date.getMonth() + 1\r\n  dateValue.date = date.getDate()\r\n}\r\n\r\nfunction fallbackFocus() {\r\n  requestAnimationFrame(() => {\r\n    handleBlur()\r\n    reference.value?.focus()\r\n  })\r\n}\r\n\r\nfunction handleEnter() {\r\n  fallbackFocus()\r\n  finishInput()\r\n  emitEvent(props.onEnter)\r\n}\r\n\r\nfunction handleCancel() {\r\n  fallbackFocus()\r\n  parseValue(lastValue.value.split('|'))\r\n  finishInput(false)\r\n  emitEvent(props.onCancel)\r\n}\r\n\r\nfunction handleClear(finish = true) {\r\n  if (props.disabled || readonly.value) return\r\n\r\n  if (props.clearable) {\r\n    nextTick(() => {\r\n      const emitValue = props.range ? ([] as number[]) : null\r\n\r\n      parseValue(null)\r\n      finish && finishInput(false)\r\n      emit('update:value', emitValue)\r\n      emit('update:formatted-value', props.range ? [] : null)\r\n      emitEvent(props.onChange as DatePickerChangeEvent, emitValue)\r\n      emitEvent(props.onClear)\r\n      clearField(emitValue!)\r\n      finish && handleBlur()\r\n\r\n      lastValue.value = ''\r\n\r\n      nextTick(() => {\r\n        toggleActivated(false)\r\n      })\r\n    })\r\n  }\r\n}\r\n\r\nfunction handleShortcut(name: string, value: Dateable | Dateable[]) {\r\n  fallbackFocus()\r\n  parseValue(value)\r\n  emitEvent(props.onShortcut as (name: string, value: Dateable | Dateable[]) => void, name, value)\r\n  finishInput()\r\n}\r\n\r\n// 只有时分秒\r\nfunction getStep(type: TimeType) {\r\n  return props.steps[type === 'hour' ? 0 : type === 'minute' ? 1 : 2] || 1\r\n}\r\n\r\n// 只有时分秒\r\nfunction getCtrlStep(type: TimeType) {\r\n  return props.ctrlSteps[type === 'hour' ? 0 : type === 'minute' ? 1 : 2] || 1\r\n}\r\n\r\nfunction handleDateHover(hoverDate: Date | null) {\r\n  if (props.range && hoverDate) {\r\n    hoveredDate.value = hoverDate\r\n\r\n    if (firstSelected.value) {\r\n      const hoverValues = [hoverDate.getFullYear(), hoverDate.getMonth() + 1, hoverDate.getDate()]\r\n      const start = hoveredLarge.value ? firstSelected.value : hoverValues\r\n      const end = hoveredLarge.value ? hoverValues : firstSelected.value\r\n\r\n      let types: DateTimeType[]\r\n\r\n      if (props.type === 'year') {\r\n        types = ['year']\r\n      } else if (props.type === 'month') {\r\n        types = ['year', 'month']\r\n      } else {\r\n        types = ['year', 'month', 'date']\r\n      }\r\n\r\n      for (let i = 0, len = types.length; i < len; ++i) {\r\n        startState.dateValue[types[i]] = start[i]\r\n        endState.dateValue[types[i]] = end[i]\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nfunction handlePanelChange(values: number[]) {\r\n  let types: DateTimeType[]\r\n\r\n  if (props.type === 'year') {\r\n    types = ['year']\r\n  } else if (props.type === 'month') {\r\n    types = ['year', 'month']\r\n  } else {\r\n    types = ['year', 'month', 'date']\r\n  }\r\n\r\n  if (!props.range) {\r\n    for (let i = 0, len = types.length; i < len; ++i) {\r\n      startState.dateValue[types[i]] = values[i]\r\n      updateDateActivated(types[i], 'start')\r\n    }\r\n\r\n    if (noActionMode.value) handleEnter()\r\n\r\n    return\r\n  }\r\n\r\n  if (!firstSelected.value) {\r\n    firstSelected.value = values\r\n\r\n    for (let i = 0, len = types.length; i < len; ++i) {\r\n      startState.dateValue[types[i]] = values[i]\r\n      endState.dateValue[types[i]] = values[i]\r\n      updateDateActivated(types[i], 'start')\r\n      updateDateActivated(types[i], 'end')\r\n    }\r\n  } else {\r\n    const [year, month, date] = firstSelected.value\r\n    const firstTime = new Date(`${year}-${month}-${date}`).getTime()\r\n    const secondTime = new Date(`${values[0]}-${values[1]}-${values[2]}`).getTime()\r\n    const start = firstTime < secondTime ? firstSelected.value : values\r\n    const end = firstTime < secondTime ? values : firstSelected.value\r\n\r\n    for (let i = 0, len = types.length; i < len; ++i) {\r\n      startState.dateValue[types[i]] = start[i]\r\n      endState.dateValue[types[i]] = end[i]\r\n      updateDateActivated(types[i], 'start')\r\n      updateDateActivated(types[i], 'end')\r\n    }\r\n\r\n    verifyRangeValue()\r\n    firstSelected.value = undefined\r\n\r\n    if (noActionMode.value) handleEnter()\r\n  }\r\n}\r\n\r\nfunction handleTimeChange(valueType: 'start' | 'end', type: TimeType, time: number) {\r\n  const state = valueType === 'start' ? startState : endState\r\n\r\n  state.dateValue[type] = time\r\n  updateDateActivated('hour', valueType)\r\n  updateDateActivated('minute', valueType)\r\n  updateDateActivated('second', valueType)\r\n}\r\n\r\nfunction updateDateActivated(type: DateTimeType, valueType?: 'start' | 'end') {\r\n  const state = valueType ? (valueType === 'start' ? startState : endState) : getCurrentState()\r\n\r\n  if (type === 'month') {\r\n    state.activated.year = true\r\n  } else if (type === 'date') {\r\n    state.activated.year = true\r\n    state.activated.month = true\r\n  }\r\n\r\n  state.activated[type] = true\r\n}\r\n\r\nfunction verifyRangeValue() {\r\n  if (!props.range) return\r\n\r\n  const startDate = startState.getDate()\r\n  const endDate = endState.getDate()\r\n\r\n  if (startDate.getTime() > endDate.getTime()) {\r\n    startState.setDate(endDate)\r\n    endState.setDate(startDate)\r\n  }\r\n}\r\n\r\nfunction toggleCurrentState(type: 'start' | 'end') {\r\n  currentState.value = type\r\n}\r\n\r\nfunction enterColumn(type: 'prev' | 'next') {\r\n  if (props.range) {\r\n    if (type === 'prev' && currentState.value === 'start' && !startState.column) {\r\n      toggleCurrentState('end')\r\n    }\r\n\r\n    const state = getCurrentState()\r\n    const currentColumn = state.column\r\n\r\n    state.enterColumn(type, !currentColumn)\r\n\r\n    if (currentColumn === state.column) {\r\n      const isStart = currentState.value === 'start'\r\n      const otherState = isStart ? endState : startState\r\n\r\n      otherState.resetColumn(type === 'prev' ? 'second' : 'year', type === 'prev')\r\n      toggleCurrentState(isStart ? 'end' : 'start')\r\n    }\r\n  } else {\r\n    startState.enterColumn(type)\r\n  }\r\n}\r\n\r\nfunction handleStartInput(type: DateTimeType) {\r\n  toggleCurrentState('start')\r\n  handleInputFocus(type)\r\n\r\n  nextTick(() => {\r\n    datePanel.value?.refreshCalendar('start')\r\n  })\r\n}\r\n\r\nfunction handleEndInput(type: DateTimeType) {\r\n  toggleCurrentState('end')\r\n  handleInputFocus(type)\r\n\r\n  nextTick(() => {\r\n    datePanel.value?.refreshCalendar('end')\r\n  })\r\n}\r\n\r\nfunction handleClickOutside() {\r\n  emitEvent(props.onClickOutside)\r\n\r\n  if (props.outsideClose && currentVisible.value) {\r\n    finishInput(!noActionMode.value && !props.outsideCancel)\r\n    handleBlur()\r\n    emitEvent(props.onOutsideClose)\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    :id=\"idFor\"\r\n    ref=\"wrapper\"\r\n    :class=\"className\"\r\n    role=\"group\"\r\n    :aria-disabled=\"toAttrValue(props.disabled)\"\r\n    :aria-expanded=\"toAttrValue(currentVisible)\"\r\n    aria-haspopup=\"dialog\"\r\n    :aria-labelledby=\"labelId\"\r\n    @click=\"showPanel\"\r\n  >\r\n    <div\r\n      ref=\"reference\"\r\n      :class=\"selectorClass\"\r\n      tabindex=\"0\"\r\n      @keydown.space.prevent=\"showPanel\"\r\n      @keydown.backspace.prevent=\"handleClear(false)\"\r\n    >\r\n      <div\r\n        v-if=\"hasPrefix\"\r\n        :class=\"[nh.be('icon'), nh.be('prefix')]\"\r\n        :style=\"{ color: props.prefixColor }\"\r\n      >\r\n        <slot name=\"prefix\">\r\n          <Renderer :renderer=\"props.slots.prefix\">\r\n            <Icon :icon=\"props.prefix\"></Icon>\r\n          </Renderer>\r\n        </slot>\r\n      </div>\r\n      <div :class=\"nh.be('control')\">\r\n        <DateControl\r\n          ref=\"start\"\r\n          :unit-type=\"currentState === 'start' ? startState.column! : ''\"\r\n          :enabled=\"startState.enabled\"\r\n          :activated=\"startState.activated\"\r\n          :date-value=\"startState.dateValue\"\r\n          :steps=\"props.steps\"\r\n          :ctrl-steps=\"props.ctrlSteps\"\r\n          :focused=\"focused\"\r\n          :visible=\"currentVisible\"\r\n          :date-separator=\"props.dateSeparator\"\r\n          :time-separator=\"props.timeSeparator\"\r\n          :filler=\"props.filler\"\r\n          :labels=\"props.labels\"\r\n          :has-error=\"startError\"\r\n          :placeholder=\"startPlaceholder\"\r\n          :readonly=\"props.unitReadonly\"\r\n          :labeled-by=\"labelId\"\r\n          :date-unit-order=\"dateUnitOrder\"\r\n          @input=\"handleInput\"\r\n          @plus=\"handlePlus\"\r\n          @minus=\"handleMinus\"\r\n          @enter=\"handleEnter\"\r\n          @cancel=\"handleCancel\"\r\n          @unit-focus=\"handleStartInput\"\r\n          @prev-unit=\"enterColumn('prev')\"\r\n          @next-unit=\"enterColumn('next')\"\r\n          @blur=\"startState.column = null\"\r\n        ></DateControl>\r\n        <template v-if=\"props.range\">\r\n          <div :class=\"nh.be('exchange')\">\r\n            <slot name=\"exchange\">\r\n              <Renderer :renderer=\"props.slots.exchange\">\r\n                <Icon v-bind=\"icons.exchange\" style=\"padding-top: 1px\"></Icon>\r\n              </Renderer>\r\n            </slot>\r\n          </div>\r\n          <DateControl\r\n            ref=\"end\"\r\n            :unit-type=\"currentState === 'end' ? endState.column! : ''\"\r\n            :enabled=\"endState.enabled\"\r\n            :activated=\"endState.activated\"\r\n            :date-value=\"endState.dateValue\"\r\n            :steps=\"props.steps\"\r\n            :ctrl-steps=\"props.ctrlSteps\"\r\n            :focused=\"focused\"\r\n            :visible=\"currentVisible\"\r\n            :date-separator=\"props.dateSeparator\"\r\n            :time-separator=\"props.timeSeparator\"\r\n            :filler=\"props.filler\"\r\n            :labels=\"props.labels\"\r\n            :has-error=\"endError\"\r\n            :placeholder=\"endPlaceholder\"\r\n            :readonly=\"props.unitReadonly\"\r\n            :labeled-by=\"labelId\"\r\n            :date-unit-order=\"dateUnitOrder\"\r\n            @input=\"handleInput\"\r\n            @plus=\"handlePlus\"\r\n            @minus=\"handleMinus\"\r\n            @enter=\"handleEnter\"\r\n            @cancel=\"handleCancel\"\r\n            @unit-focus=\"handleEndInput\"\r\n            @prev-unit=\"enterColumn('prev')\"\r\n            @next-unit=\"enterColumn('next')\"\r\n            @blur=\"endState.column = null\"\r\n          ></DateControl>\r\n        </template>\r\n      </div>\r\n      <div\r\n        v-if=\"!props.noSuffix\"\r\n        :class=\"[nh.be('icon'), nh.be('suffix')]\"\r\n        :style=\"{\r\n          color: props.suffixColor,\r\n          opacity: showClear || props.loading ? '0%' : ''\r\n        }\"\r\n      >\r\n        <slot name=\"suffix\">\r\n          <Renderer :renderer=\"props.slots.suffix\">\r\n            <Icon v-bind=\"icons.calendar\" :icon=\"props.suffix || icons.calendar.icon\"></Icon>\r\n          </Renderer>\r\n        </slot>\r\n      </div>\r\n      <div\r\n        v-else-if=\"props.clearable || props.loading\"\r\n        :class=\"[nh.be('icon'), nh.bem('icon', 'placeholder'), nh.be('suffix')]\"\r\n      ></div>\r\n      <Transition :name=\"nh.ns('fade')\" appear>\r\n        <button\r\n          v-if=\"showClear\"\r\n          :class=\"[nh.be('icon'), nh.be('clear')]\"\r\n          type=\"button\"\r\n          tabindex=\"-1\"\r\n          :aria-label=\"mergedLocale.ariaLabel.clear\"\r\n          @click.stop=\"handleClear()\"\r\n        >\r\n          <Icon v-bind=\"icons.clear\" label=\"clear\"></Icon>\r\n        </button>\r\n        <div v-else-if=\"props.loading\" :class=\"[nh.be('icon'), nh.be('loading')]\">\r\n          <Icon\r\n            v-bind=\"icons.loading\"\r\n            :effect=\"props.loadingEffect || icons.loading.effect\"\r\n            :icon=\"props.loadingIcon || icons.loading.icon\"\r\n            label=\"loading\"\r\n          ></Icon>\r\n        </div>\r\n      </Transition>\r\n    </div>\r\n    <Popper\r\n      ref=\"popper\"\r\n      :class=\"[nh.be('popper'), nh.ns('calendar-vars'), nh.ns('time-picker-vars'), nh.bs('vars')]\"\r\n      :visible=\"currentVisible\"\r\n      :to=\"transferTo\"\r\n      :transition=\"props.transitionName\"\r\n      :alive=\"props.popperAlive ?? !transferTo\"\r\n      @click.stop=\"handleFocused\"\r\n      @before-enter=\"staticWheel = true\"\r\n      @before-leave=\"staticWheel = true\"\r\n      @after-enter=\"staticWheel = false\"\r\n      @after-leave=\"staticWheel = false\"\r\n    >\r\n      <DatePanel\r\n        ref=\"panel\"\r\n        :type=\"props.type\"\r\n        :start-value=\"startState.dateValue\"\r\n        :end-value=\"endState.dateValue\"\r\n        :start-activated=\"startState.activated\"\r\n        :end-activated=\"endState.activated\"\r\n        :value-type=\"currentState\"\r\n        :shortcuts=\"props.shortcuts\"\r\n        :confirm-text=\"props.confirmText\"\r\n        :cancel-text=\"props.cancelText\"\r\n        :today=\"props.today\"\r\n        :no-action=\"props.noAction\"\r\n        :steps=\"props.steps\"\r\n        :range=\"props.range\"\r\n        :min=\"props.min\"\r\n        :max=\"props.max\"\r\n        :disabled-date=\"isDateDisabled\"\r\n        :disabled-time=\"isTimeDisabled\"\r\n        :has-error=\"startError || endError\"\r\n        :selecting-type=\"hoveredLarge ? 'end' : 'start'\"\r\n        :locale=\"mergedLocale\"\r\n        :week-start=\"props.weekStart\"\r\n        :static-wheel=\"staticWheel\"\r\n        :shortcuts-placement=\"props.shortcutsPlacement\"\r\n        :labeled-by=\"labelId\"\r\n        @shortcut=\"handleShortcut\"\r\n        @change=\"handlePanelChange\"\r\n        @confirm=\"handleEnter\"\r\n        @cancel=\"handleCancel\"\r\n        @hover=\"handleDateHover\"\r\n        @time-change=\"handleTimeChange\"\r\n      >\r\n        <template v-if=\"$slots.panelTitle || props.slots.panelTitle\" #title=\"titleParams\">\r\n          <slot name=\"panelTitle\" v-bind=\"titleParams\">\r\n            <Renderer :renderer=\"props.slots.panelTitle\" :data=\"titleParams\"></Renderer>\r\n          </slot>\r\n        </template>\r\n        <template v-if=\"$slots.panelYear || props.slots.panelYear\" #year=\"yearParams\">\r\n          <slot name=\"panelYear\" v-bind=\"yearParams\">\r\n            <Renderer :renderer=\"props.slots.panelYear\" :data=\"yearParams\"></Renderer>\r\n          </slot>\r\n        </template>\r\n        <template v-if=\"$slots.panelMonth || props.slots.panelMonth\" #month=\"monthParams\">\r\n          <slot name=\"panelMonth\" v-bind=\"monthParams\">\r\n            <Renderer :renderer=\"props.slots.panelMonth\" :data=\"monthParams\"></Renderer>\r\n          </slot>\r\n        </template>\r\n        <template v-if=\"$slots.panelWeek || props.slots.panelWeek\" #week=\"weekParams\">\r\n          <slot name=\"panelWeek\" v-bind=\"weekParams\">\r\n            <Renderer :renderer=\"props.slots.panelWeek\" :data=\"weekParams\"></Renderer>\r\n          </slot>\r\n        </template>\r\n        <template v-if=\"$slots.panelDate || props.slots.panelDate\" #date=\"dateParams\">\r\n          <slot name=\"panelDate\" v-bind=\"dateParams\">\r\n            <Renderer :renderer=\"props.slots.panelDate\" :data=\"dateParams\"></Renderer>\r\n          </slot>\r\n        </template>\r\n      </DatePanel>\r\n    </Popper>\r\n  </div>\r\n</template>\r\n"],"names":["idFor","labelId","state","disabled","loading","size","validateField","clearField","getFieldValue","setFieldValue","useFieldStore","_a","reference","nh","useNameHelper","props","useProps","__props","createSizeProp","createStateProp","value","datePickerTypes","placementWhileList","toFalse","createIconProp","emit","__emit","slots","_useSlots","calendarLocale","useLocale","datePickerLocale","icons","useIcons","wordSpace","useWordSpace","placement","toRef","transfer","currentVisible","ref","focused","startState","createDateState","endState","currentState","lastValue","firstSelected","hoveredDate","staticWheel","dateUnitOrder","timer","useSetTimeout","wrapper","useClickOutside","handleClickOutside","popper","transferTo","updatePopper","usePopper","computed","isHover","useHover","startInput","endInput","datePanel","mergedLocale","locale","mergeObjects","isObject","startPlaceholder","select","start","type","makeSentence","endPlaceholder","end","className","readonly","selectorClass","baseCls","hasPrefix","currentValue","values","doubleDigits","hoveredLarge","year","month","date","firstTime","hoverTime","showClear","min","rawValueToDate","invalidDate","max","startOfMonth","reversed","startMinTime","differenceDays","getTime","startMaxTime","endMinTime","endMaxTime","startReversed","startValue","endValue","types","startTimeBound","useTimeBound","endTimeBound","isTimeDisabled","startError","hour","minute","second","isDateDisabled","endError","noActionMode","watch","parseFormat","parseValue","getStringValue","hasMonth","hasDate","emitEvent","getCurrentState","setVisible","handleBlur","__expose","options","currentColumn","enabled","resetColumn","enterColumn","useColumn","dateValue","reactive","activated","valueRecord","activatedRecord","withTime","defaultValue","toDate","i","toggleActivated","parseDateUnitOrder","orderSet","inQuotation","len","char","parseTimeUnitEnabled","isDatetime","valueType","time","verifyDate","visible","emitChange","emitValues","formattedValues","valueFormat","formatValue","timestamp","format","emitValue","formattedValue","finishInput","shouldChange","verifyValue","boundRange","lastDay","isLeapYear","getStep","handleFocused","_b","showPanel","event","target","units","index","unit","toggleCurrentState","handleInput","handleInputNumber","number","prev","setActivatedTrue","handleInputFocus","isTimeType","handleAdjust","adjustType","ctrlKey","isPlus","sign","getCtrlStep","computeDate","updateDateActivated","handlePlus","handleMinus","fallbackFocus","handleEnter","handleCancel","handleClear","finish","nextTick","handleShortcut","name","handleDateHover","hoverDate","hoverValues","handlePanelChange","secondTime","verifyRangeValue","handleTimeChange","startDate","endDate","isStart","handleStartInput","handleEndInput","_createElementBlock","_unref","toAttrValue","_createElementVNode","_normalizeStyle","_renderSlot","_ctx","_createVNode","Renderer","Icon","_normalizeClass","DateControl","_cache","$event","_Fragment","_mergeProps","_Transition","Popper","DatePanel","$slots","_withCtx","titleParams","_normalizeProps","_guardReactiveProps","yearParams","monthParams","weekParams","dateParams"],"mappings":"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