taro-ui-vue3 的 Picker 组件,通过设置 start 和 end 属性来限制时间范围,当开始时间和结束时间选的是同一天会报错
时间: 2023-07-16 09:13:40 浏览: 155
【JavaScript源代码】使用Element+vue实现开始与结束时间限制.docx
是的,这是一个已知的问题。在 Taro-UI-Vue3 的 Picker 组件中,当 start 和 end 属性设置为同一天时,会出现错误。这是因为在计算时间范围时,组件会将 end 时间加上一天,导致时间范围超出了实际的范围。
为了解决这个问题,你可以在设置 end 属性时,将其加上一天,再将其传递给 Picker 组件。例如,假设你要限制时间范围在今天和明天之间:
```html
<template>
<picker
mode="time"
:start="startTime"
:end="endTime"
@change="handleChange"
></picker>
</template>
<script>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
export default {
setup() {
const now = dayjs()
const startTime = ref(now.format('HH:mm'))
const endTime = computed(() => now.add(1, 'day').format('HH:mm'))
function handleChange(e) {
console.log('选中的时间:', e.detail.value)
}
return {
startTime,
endTime,
handleChange,
}
},
}
</script>
```
在上面的例子中,我们使用了 dayjs 库来处理时间。在 computed 中,我们将 end 时间加上了一天,并将其格式化为 HH:mm 的字符串,然后将其传递给 Picker 组件的 end 属性。这样就可以避免时间范围超出实际范围的问题了。
阅读全文