taro-ui-vue3 的 Picker 组件,通过设置 start 和 end 属性来限制时间范围,当开始时间和结束时间选的是同一天会报错
时间: 2023-07-16 21:14:13 浏览: 183
【JavaScript源代码】使用Element+vue实现开始与结束时间限制.docx
是的,因为 Picker 组件的 start 和 end 属性都是可以设置为日期对象的,但是当 start 和 end 设置为同一天的日期对象时,会导致出现错误。
解决方案:可以在设置 start 和 end 属性时,将其转换为时间戳进行比较,这样就可以避免出现同一天的情况了。具体实现可以参考如下代码:
```vue
<template>
<Picker :start="startTime" :end="endTime" />
</template>
<script>
import { ref, computed } from 'vue';
import { Picker } from 'taro-ui-vue3';
export default {
components: {
Picker,
},
setup() {
const startTime = ref(new Date('2022-01-01'));
const endTime = ref(new Date('2022-01-01'));
// 转换为时间戳进行比较
const startTimestamp = computed(() => startTime.value.getTime());
const endTimestamp = computed(() => endTime.value.getTime());
return {
startTime,
endTime,
startTimestamp,
endTimestamp,
};
},
};
</script>
```
在上面的代码中,我们使用了 ref 和 computed 来创建 startTime 和 endTime 的响应式引用,并且通过 computed 计算属性将它们转换为时间戳。这样我们就可以将 startTime 和 endTime 设置为同一天的日期对象了,并且在 Picker 组件中通过 startTimestamp 和 endTimestamp 来代替它们进行比较,从而避免了报错的问题。
阅读全文