uni-app 区间时间选择器插件讨论 可选时间能否拆分成多个时间段 如9:00-12:00 13:00-21:00

在 uni-app 中实现一个可拆分时间段的区间时间选择器插件，你可以通过自定义组件来实现。以下是一个简单的示例代码，展示如何实现这个功能。

首先，创建一个自定义组件 TimePicker.vue，用于显示和选择时间段。

<template>
  <view>
    <picker mode="multiSelector" :range="timeRanges" :value="selectedIndexes" @change="onTimeChange">
      <view class="picker">
        {{ formatSelectedTime(selectedIndexes) }}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timeRanges: [
        ['09:00', '12:00'], // 上午时间段
        ['13:00', '21:00']  // 下午时间段
      ],
      selectedIndexes: [0, 0] // 初始选择为第一个时间段的第一个选项（即9:00）
    };
  },
  methods: {
    formatSelectedTime(indexes) {
      const startHour = this.timeRanges[0][indexes[0]];
      const endHour = this.timeRanges[1][indexes[1]];
      return `${startHour}-${endHour}`;
    },
    onTimeChange(e) {
      this.selectedIndexes = e.detail.value;
      // 这里可以添加处理选择时间后的逻辑，比如提交表单
    }
  }
};
</script>

<style scoped>
.picker {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  text-align: center;
}
</style>

在这个组件中，我们使用 picker 组件的 multiSelector 模式来创建一个多列选择器。timeRanges 数组包含两个子数组，分别表示上午和下午的时间段。selectedIndexes 数组存储当前选择的时间段的索引。

formatSelectedTime 方法用于将选择的索引转换为可读的时间字符串。

onTimeChange 方法在用户选择时间时触发，更新 selectedIndexes 数组。

然后，在你的页面中使用这个组件：

<template>
  <view>
    <TimePicker />
  </view>
</template>

<script>
import TimePicker from '@/components/TimePicker.vue';

export default {
  components: {
    TimePicker
  }
};
</script>

这样，你就创建了一个可以拆分时间段的区间时间选择器插件。这个示例只是一个简单的实现，你可以根据需求进一步扩展，比如添加时间校验、动态生成时间段等功能。