el-data-picker日期组件，搭配dayjs日期库进行日期选择

需求一： 

上图显示两个选择框，其中触发日期只可选择日期不可选择时分秒，触发时间不能选择日期只可选择时分秒，且触发时间小于当天日期

触发日期：使用el-date-picker组件

1：type为显示类型，还可选择year（年份），week（周），month（月）.......，第二个案例讲解daterange的用法

2：value-format 指定绑定值的格式

3：disabled-date函数（看需求如果需要有禁用条件就写，没有的话不用写）

             <el-form-item label="触发日期" prop="triggerDate">
                <div class="my-date">
                  <el-date-picker
                    v-model="form.triggerDate"
                    clearable
                    type="date"
                    placeholder="请选择触发日期"
                    value-format="YYYY-MM-DD"
                    style="width: 100%;"
                    :disabled-date="TriggerDate"
                  />
                </div>
              </el-form-item>

禁用条件TruggerDate

这个函数是用于判断给定的日期是否已经过了当前时间。函数接受一个Date对象作为参数，使用dayjs库获取当前日期，并与给定的日期进行比较。如果给定日期在当前日期之前，则返回true，否则返回false。

这里使用了dayjs组件库，dayNow表示当前时间，来判断当前时间isAfter在这之后，isBefore在这之前

网址：Day.js中文网 (fenxianglu.cn)

/* 触发日期选择今天以前的 */
function TriggerDate(date: Date) {
  const dayNow = dayjs()
  return !dayjs(date).isAfter(dayNow, 'day')
}

需求二：

搜索日期，选择开始和结束时间进行查询，使用el-date-picker组件其中type="daterange"

        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间"
            :disabled-date="disableDate"
          />
        </el-form-item>

disableDate限制函数

该函数是一个使用Vue的computed属性定义的计算属性。它用于获取和设置查询参数中的起始日期和结束日期。如果起始日期或结束日期不存在，它将返回undefined。如果日期范围被设置为无效值，它将清除起始日期和结束日期。否则，它将更新起始日期和结束日期为给定的日期范围。

/* 查询参数 */
const queryParams = reactive({
  status: '',
  startDate: '',
  endDate: ''
})

/* 计算日期限制 */
const dateRange = computed<[string, string] | undefined>({
  get() {
    if (!queryParams.startDate || !queryParams.endDate)
      return
    return [queryParams.startDate, queryParams.endDate]
  },
  set(dateRange) {
    if (!dateRange) {
      queryParams.startDate = ''
      queryParams.endDate = ''
      return
    }

    queryParams.startDate = dateRange[0]
    queryParams.endDate = dateRange[1]
  },
})

需求三：

日期选择组件如果超过30天，提示不能超过30天，如图

v-model绑定的dateRange看需求二，要是有需求不能选择当前时间请看需求一的案例，此案例在el-form-item中定义规则validator为validateDate的函数，如果超过了范围就给提示消息

  <el-form-item v-if="queryParams.status === '1'" 
    :label="label" prop="startDate" 
    :rules="[{ trigger: 'change', validator: validateDate, message: '时间跨度不能超过30天'         
  }]">
          <slot :query-params="queryParams" name="date">
            <el-date-picker
              v-model="dateRange" type="daterange"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              start-placeholder="请选择开始日期" 
              end-placeholder="请选择结束日期"
              :disabled-date="disableDate"
            />
          </slot>
        </el-form-item>

在sciprt定义这个校验函数

这个 validateDate 函数在 Vue 组件中用于验证日期范围。当 props.status 不等于 '1' 时，函数直接返回 true，即不执行日期验证。（看个人需求进行if判断的书写）若需进行日期验证，则从 queryParams 对象中获取 startDate 和 endDate。

如果 startDate 或 endDate 不存在（即为 false值），函数也返回 true，允许通过验证。

最后，如果需要执行日期差值验证，则使用 dayjs 库计算 endDate 与 startDate 之间的天数差，并确保该差值不大于30天。如果日期范围小于或等于30天，函数返回 true 表示验证通过；否则返回 false 表示验证失败。

此函数被用作表单验证规则，确保用户选择的时间跨度不超过30天。

/* 日期搜索条件限制为30天内 */
function validateDate() {
  if (props.status !== '1')
    return true

  const { startDate, endDate } = queryParams

  if (!startDate || !endDate)
    return true

  return Number(dayjs(endDate).diff(startDate, 'day')) <= 30
}