iView 日期时间选择器设置开始时间至结束时间限制

您可以使用 iView 的 `DatePicker` 和 `TimePicker` 组件配合使用来实现日期时间选择器，并且可以通过设置 `disabledDate` 函数来限制开始时间至结束时间。

以下是一个示例代码：

<template>
  <div>
    <DatePicker
      v-model="startDate"
      :disabledDate="disabledStartDate"
      placeholder="开始时间"
    />
    <TimePicker
      v-model="startTime"
      :disabledHours="disabledStartHours"
      :disabledMinutes="disabledStartMinutes"
      :disabledSeconds="disabledStartSeconds"
      placeholder="开始时间"
    />
    <DatePicker
      v-model="endDate"
      :disabledDate="disabledEndDate"
      placeholder="结束时间"
    />
    <TimePicker
      v-model="endTime"
      :disabledHours="disabledEndHours"
      :disabledMinutes="disabledEndMinutes"
      :disabledSeconds="disabledEndSeconds"
      placeholder="结束时间"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: null,
      startTime: null,
      endDate: null,
      endTime: null,
    };
  },
  methods: {
    disabledStartDate(date) {
      if (!this.endDate) {
        return false;
      }
      return date && date.valueOf() > this.endDate.valueOf();
    },
    disabledEndDate(date) {
      if (!this.startDate) {
        return false;
      }
      return date && date.valueOf() < this.startDate.valueOf();
    },
    disabledStartHours() {
      if (!this.startTime) {
        return [];
      }
      return Array.from({ length: 24 }, (_, i) => i).slice(0, this.endTime.getHours());
    },
    disabledStartMinutes(h) {
      if (!this.startTime || h < this.endTime.getHours()) {
        return [];
      }
      return Array.from({ length: 60 }, (_, i) => i).slice(0, this.endTime.getMinutes());
    },
    disabledStartSeconds(h, m) {
      if (!this.startTime || h < this.endTime.getHours() || m < this.endTime.getMinutes()) {
        return [];
      }
      return Array.from({ length: 60 }, (_, i) => i).slice(0, this.endTime.getSeconds());
    },
    disabledEndHours() {
      if (!this.endTime) {
        return [];
      }
      return Array.from({ length: 24 }, (_, i) => i).slice(this.startTime.getHours() + 1);
    },
    disabledEndMinutes(h) {
      if (!this.endTime || h > this.startTime.getHours() + 1) {
        return [];
      }
      return Array.from({ length: 60 }, (_, i) => i).slice(this.startTime.getMinutes() + 1);
    },
    disabledEndSeconds(h, m) {
      if (!this.endTime || h > this.startTime.getHours() + 1 || m > this.startTime.getMinutes() + 1) {
        return [];
      }
      return Array.from({ length: 60 }, (_, i) => i).slice(this.startTime.getSeconds() + 1);
    },
  },
};
</script>

在上面的示例代码中，我们使用了四个数据属性 `startDate`、`startTime`、`endDate` 和 `endTime` 来分别存储用户选择的开始日期时间和结束日期时间。

在 `DatePicker` 和 `TimePicker` 组件上，我们使用 `v-model` 指令将其与数据属性绑定，以实现双向绑定。

在 `DatePicker` 组件上，我们通过设置 `disabledDate` 函数来禁用开始时间晚于结束时间的日期。

在 `TimePicker` 组件上，我们通过设置 `disabledHours`、`disabledMinutes` 和 `disabledSeconds` 函数来禁用开始时间晚于结束时间的时、分、秒。