轻松搞定：Uniapp小程序时间段选择相互限制的艺术

2023-12-12 19:00:21

在 Uniapp 中实现时间段选择：相互限制开始和结束时间

在 Uniapp 小程序中，经常需要用户选择时间段，例如预约服务或查询数据。在实现时间段选择时，一个常见问题是如何限制开始时间和结束时间，以确保它们相互限制。

初始化选择器组件

首先，我们需要使用 UView2.0 的 DatetimePicker 组件初始化选择器组件：

<u-datetime-picker
  type="datetime"
  value="{{startDate}}"
  @change="startDateChange"
/>
<u-datetime-picker
  type="datetime"
  value="{{endDate}}"
  @change="endDateChange"
/>

限制小时

在确认选择开始时间或结束时间时，我们需要对小时进行限制。我们使用 change 事件来实现：

startDateChange(e) {
  this.startDate = e.detail.value;
  if (this.endDate && this.endDate < this.startDate) {
    this.endDate = this.startDate;
  }
},
endDateChange(e) {
  this.endDate = e.detail.value;
  if (this.startDate && this.startDate > this.endDate) {
    this.startDate = this.endDate;
  }
},

限制分钟数

现在，我们已经对小时进行了限制，接下来是限制分钟数。同样使用 change 事件：

startDateChange(e) {
  this.startDate = e.detail.value;
  if (this.endDate && this.endDate < this.startDate) {
    this.endDate = this.startDate;
  }
},
endDateChange(e) {
  this.endDate = e.detail.value;
  if (this.startDate && this.startDate > this.endDate) {
    this.startDate = this.endDate;
  }
},

代码示例

完整的代码示例如下：

<template>
  <div>
    <u-datetime-picker
      type="datetime"
      value="{{startDate}}"
      @change="startDateChange"
    />
    <u-datetime-picker
      type="datetime"
      value="{{endDate}}"
      @change="endDateChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
    };
  },
  methods: {
    startDateChange(e) {
      this.startDate = e.detail.value;
      if (this.endDate && this.endDate < this.startDate) {
        this.endDate = this.startDate;
      }
    },
    endDateChange(e) {
      this.endDate = e.detail.value;
      if (this.startDate && this.startDate > this.endDate) {
        this.startDate = this.endDate;
      }
    },
  },
};
</script>