uni-app 时间段插件，13:00-14:00

在uni-app中，你可以使用第三方的时间段选择器插件或者自定义一个时间段选择器来满足需求。以下是一个简单的自定义时间段选择器的示例代码，用于选择13:00到14:00之间的时间段。这个示例将使用<picker>组件，并结合JavaScript进行处理。

1. 创建页面组件

首先，在你的uni-app项目中创建一个页面组件，例如pages/timePicker/timePicker.vue。

2. 编写页面代码

<template>
  <view>
    <view>选择时间段 (13:00-14:00):</view>
    <picker mode="time" :value="selectedTime" @change="bindTimeChange">
      <view class="picker">
        {{ formatTime(selectedTime) }}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '13:00', // 初始时间设为13:00
      startTime: '13:00',
      endTime: '14:00'
    };
  },
  methods: {
    bindTimeChange(e) {
      const value = e.detail.value;
      const selectedHour = parseInt(value.split(':')[0], 10);
      const startHour = parseInt(this.startTime.split(':')[0], 10);
      const endHour = parseInt(this.endTime.split(':')[0], 10);

      if (selectedHour >= startHour && selectedHour < endHour) {
        this.selectedTime = value;
      } else {
        uni.showToast({
          title: '请选择13:00到14:00之间的时间',
          icon: 'none'
        });
        // 强制将时间重置为合法范围
        this.selectedTime = this.startTime;
      }
    },
    formatTime(time) {
      const date = new Date();
      date.setHours(...time.split(':').map(Number));
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    }
  }
};
</script>

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

3. 解释代码

• picker组件用于选择时间，mode="time"表示选择时间模式。
• selectedTime初始化为13:00。
• bindTimeChange方法在用户选择时间时触发，检查选择的时间是否在13:00到14:00之间。如果不在合法范围内，则弹出提示并重置时间为13:00。
• formatTime方法用于格式化时间，确保时间显示格式正确。

这样，你就可以在uni-app中实现一个简单的时间段选择器，用于选择13:00到14:00之间的时间段。如果你需要更复杂的功能，可以考虑使用现成的第三方插件，并进行适当的配置和定制。