taro-ui-vue3 的 Picker 组件,通过设置 start 和 end 属性来限制时间范围,开始时间不能大于结束时间,结束时间不能小于开始时间,当开始时间和结束时间选的是同一天会报错
时间: 2023-07-15 17:15:01 浏览: 237
对于同一天的情况,你可以在设置 Picker 组件的值时进行判断,如果开始时间和结束时间是同一天,则将结束时间加上一天,以避免报错。示例代码如下:
```html
<template>
<div>
<p>开始时间:{{ startTime }}</p>
<p>结束时间:{{ endTime }}</p>
<t-date-picker
v-model="startTime"
:start="new Date()"
:end="endTime"
@change="handleChange"
></t-date-picker>
<t-date-picker
v-model="endTime"
:start="startTime"
:end="new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 7)"
@change="handleChange"
></t-date-picker>
</div>
</template>
<script>
import { ref } from 'vue';
import { TDatePicker } from 'taro-ui-vue3';
export default {
components: {
TDatePicker,
},
setup() {
const startTime = ref('');
const endTime = ref('');
const handleChange = () => {
// 判断开始时间和结束时间是否是同一天
if (
startTime.value &&
endTime.value &&
new Date(startTime.value).toLocaleDateString() === new Date(endTime.value).toLocaleDateString()
) {
const nextDay = new Date(new Date(endTime.value).getTime() + 24 * 60 * 60 * 1000);
endTime.value = nextDay.toISOString();
}
};
return {
startTime,
endTime,
handleChange,
};
},
};
</script>
```
其中,`new Date().toLocaleDateString()` 可以将日期转换为字符串形式,以便于比较是否是同一天。`new Date(endTime.value).getTime() + 24 * 60 * 60 * 1000` 可以将结束时间加上一天的时间戳。
阅读全文