uniapp日期选择器只选当前日期
时间: 2024-08-02 22:01:27 浏览: 111
日期选择器
5星 · 资源好评率100%
uni-app的日期选择器组件默认允许用户选择范围日期,但它确实可以设置成只能选择当前日期。在Vue中,你可以通过`v-model`绑定一个`Date`对象,并在事件处理函数中限制其值。下面是一个简单的例子:
```html
<template>
<u-date-picker v-model="currentDate" :mode="dateMode" @on-change="handleDateChange"></u-date-picker>
</template>
<script>
export default {
data() {
return {
currentDate: new Date(), // 初始化为当前日期
dateMode: 'date', // 设置模式为单日选择
};
},
methods: {
handleDateChange(date) {
if (date.getFullYear() === this.currentDate.getFullYear() && date.getMonth() === this.currentDate.getMonth() && date.getDate() === this.currentDate.getDate()) {
this.currentDate = date; // 如果日期相同,保持不变
} else {
this.currentDate = new Date(); // 否则,设回当前日期
}
},
},
};
</script>
```
在这个例子中,当用户选择的日期不是当天时,`handleDateChange`方法会被触发,将`currentDate`重置为当前日期。
阅读全文