Uni-app 时间范围选择器组件：限制开始时间和结束时间

在 uni-app 中，可以使用 picker 组件来实现选择时间范围的功能。在 picker 组件的 change 事件中，可以根据选择的开始时间来动态改变结束时间的可选范围，同样地，根据选择的结束时间来动态改变开始时间的可选范围。

下面是一个示例代码，演示了如何实现选择时间范围的功能：

<template>
  <view>
    <picker mode='time' @change='onStartTimeChange' :value='startTime'>
      <view>{{ startTime }}</view>
    </picker>
    <picker mode='time' @change='onEndTimeChange' :value='endTime'>
      <view>{{ endTime }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startTime: '00:00',
      endTime: '23:59',
    };
  },
  methods: {
    onStartTimeChange(event) {
      const startTime = event.mp.detail.value; // 获取选择的开始时间
      const startHour = parseInt(startTime.split(':')[0]); // 提取小时
      const startMinute = parseInt(startTime.split(':')[1]); // 提取分钟

      // 根据选择的开始时间动态改变结束时间的可选范围
      const newEndTime = [];
      for (let hour = startHour; hour <= 23; hour++) {
        for (let minute = startMinute; minute < 60; minute++) {
          // 格式化小时和分钟为2位数
          const formattedHour = hour.toString().padStart(2, '0');
          const formattedMinute = minute.toString().padStart(2, '0');
          newEndTime.push(`${formattedHour}:${formattedMinute}`);
        }
      }
      this.endTime = newEndTime;
    },
    onEndTimeChange(event) {
      const endTime = event.mp.detail.value; // 获取选择的结束时间
      const endHour = parseInt(endTime.split(':')[0]); // 提取小时
      const endMinute = parseInt(endTime.split(':')[1]); // 提取分钟

      // 根据选择的结束时间动态改变开始时间的可选范围
      const newStartTime = [];
      for (let hour = 0; hour <= endHour; hour++) {
        for (let minute = 0; minute <= endMinute; minute++) {
          // 格式化小时和分钟为2位数
          const formattedHour = hour.toString().padStart(2, '0');
          const formattedMinute = minute.toString().padStart(2, '0');
          newStartTime.push(`${formattedHour}:${formattedMinute}`);
        }
      }
      this.startTime = newStartTime;
    },
  },
};
</script>

在上述代码中，使用 picker 组件来选择开始时间和结束时间。在 onStartTimeChange 方法中，根据选择的开始时间来动态生成结束时间的可选范围。在 onEndTimeChange 方法中，根据选择的结束时间来动态生成开始时间的可选范围。这样，当选择开始时间时，结束时间会变成选择的开始时间之后的时间；当选择结束时间时，开始时间会变成选择的结束时间之前的时间。

注意：上述代码仅为示例，实际需根据具体需求进行适当修改。