Как отследить события в DatePickerPanel у инпутов отвечающих за дату и время?

Question

Daniil161rus @Daniil161rus

Vue.js

Как отследить события в DatePickerPanel у инпутов отвечающих за дату и время?

В проекте использую DateTimePicker из element plus. Возникла проблема: не могу отследить input'ы (для даты и времени) внутри DatePickerPanel, чтобы ограничивать диапазон. Мне нужно сделать так, чтобы при выборе start_date было доступно +14 дней. Когда выбираешь в календаре, всё работает корректно, а через input'ы можно выбрать любой доступный диапазон.

<template>
<el-date-picker
            v-model="date_range"
            clearable
            :disabled-date="disableDates"
            :editable="false"
            end-placeholder="До"
            format="YYYY-MM-DD HH:mm:ss.SSS"
            range-separator="-"
            start-placeholder="От"
            style="width: 350px"
            time-format="HH:mm:ss.SSS"
            type="datetimerange"
            @calendar-change="onCalendarChange"
            @change="calendarChangeDevelop"
          />
</template>

<script setup>
const date_range = ref<[Date, Date] | null>(null)
const partialStartDate = ref<Date | null>(null)
const allowedRange = ref<{ min: Date; max: Date } | null>(null)

const normalizeDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate())

const getBaseLimits = () => {
  const today = new Date()
  const minDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 365)
  const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())

  return { minDate, maxDate }
}

const calendarChangeDevelop = () => {
  if (date_range.value !== null) {
    queryForm.value.start_date = formatDateTimeDevelop(date_range.value[0])
    queryForm.value.end_date = formatDateTimeDevelop(date_range.value[1])
  } else {
    queryForm.value.start_date = undefined
    queryForm.value.end_date = undefined
  }
}

const onCalendarChange = (val: [Date, Date] | [Date] | null) => {
  if (!val || val === null) {
    partialStartDate.value = null
    allowedRange.value = null
    return
  }

  if (val[1] === null) {
    const start = normalizeDay(val[0])
    partialStartDate.value = val[0]

    const min = new Date(start)
    min.setDate(min.getDate() - 14)

    const max = new Date(start)
    max.setDate(max.getDate() + 14)

    allowedRange.value = { min, max }
    return
  }

  // диапазон завершён
  if (val[0] && val[1]) {
    partialStartDate.value = null
    allowedRange.value = null
  }
}

const disableDates = date => {
  const { minDate, maxDate } = getBaseLimits()

  // базовое ограничение
  if (date < minDate || date > maxDate) {
    return true
  }

  // диапазон не в стадии выбора больше ничего не блокируем
  if (!partialStartDate.value) {
    return false
  }

  // диапазон выбран частично → ±14 дней
  const start = normalizeDay(partialStartDate.value)

  const minRange = new Date(start)
  minRange.setDate(minRange.getDate() - 14)

  const maxRange = new Date(start)
  maxRange.setDate(maxRange.getDate() + 14)

  return date < minRange || date > maxRange
}
</script>