uni-app uni-datetime-picker组件 start/end设置后 清空时 日期限制未解除 保持之前限制

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app uni-datetime-picker组件 start/end设置后 清空时 日期限制未解除 保持之前限制

类别 信息
产品分类 uniapp/小程序/微信
操作系统 Windows
操作系统版本 w10
开发工具 HBuilderX
工具版本 3.7.8
第三方工具版本 1.06.2303060
基础库版本 2.30.2
项目创建方式 HBuilderX

操作步骤：

<uni-datetime-picker type="date"  :end="search.endTime"
placeholder="开始日期" v-model="search.startTime" @change="(val)=>handleChange('startTime',val)" />
<text style="padding: 0 5px;">-</text>
<uni-datetime-picker type="date"  :start="search.startTime"
placeholder="结束日期" v-model="search.endTime" @change="(val)=>handleChange('endTime',val)" />
```

### 预期结果：
```
清空start或者end值，日历的开始和结束日期的限制去掉
```

### 实际结果：
```
清空start或者end值，还是保持之前的限制
```

### bug描述：
```
start或者end设置之后，清空start或者end值，还是保持之前的设置

Harmonyos Next教程
2 回复

大佬解决了吗？


在uni-app中，uni-datetime-picker组件是一个非常常用的日期选择器组件。当你设置了start和end属性来限制日期范围后，如果你希望清空这些限制（比如在某个操作后重置日期选择器），你需要手动更新这些属性。

以下是一个示例代码，展示了如何在清空日期时解除之前的日期限制。

首先，确保你的uni-app项目中已经引入了uni-datetime-picker组件。然后，你可以按照以下步骤来实现功能。

1. 在页面的<template>部分定义组件

<template>
  <view>
    <uni-datetime-picker
      v-model="date"
      type="datetime"
      :start="startDate"
      :end="endDate"
      @change="onDateChange"
    ></uni-datetime-picker>
    <button @click="clearDate">清空日期</button>
  </view>
</template>

2. 在页面的<script>部分定义数据和逻辑

<script>
export default {
  data() {
    return {
      date: '', // 绑定的日期值
      startDate: '2023-01-01 00:00:00', // 初始开始日期
      endDate: '2023-12-31 23:59:59', // 初始结束日期
    };
  },
  methods: {
    onDateChange(event) {
      console.log('选中的日期:', event.detail.value);
    },
    clearDate() {
      this.date = ''; // 清空选中的日期
      // 重置开始和结束日期为null或一个很大的范围，以解除限制
      this.startDate = null; // 或者设置为一个很早的日期，比如'1970-01-01 00:00:00'
      this.endDate = null; // 或者设置为一个很晚的日期，比如'2100-12-31 23:59:59'
      // 如果需要完全移除属性，可以考虑使用Vue的$delete方法，但这里null已经足够
      // this.$delete(this, 'startDate');
      // this.$delete(this, 'endDate');
    },
  },
};
</script>

3. 在页面的<style>部分（可选）

你可以根据需要添加样式。

<style scoped>
button {
  margin-top: 20px;
}
</style>

在这个例子中，当你点击“清空日期”按钮时，date会被清空，同时startDate和endDate会被设置为null，从而解除之前的日期限制。如果你希望保留这些属性但解除限制，可以将它们设置为一个非常大的日期范围，而不是null。这样，日期选择器就不会受到之前的限制影响了。

回到顶部