uni-datetime-picker设置不可选日期,如果开始日期和结束日期中间有不可选日期则不能选择
时间: 2025-07-06 16:57:18 浏览: 3
### 解决方案
为了确保 `uni-datetime-picker` 组件中的某些特定日期不可选,特别是在指定的起始与终止日期范围内,可以通过自定义禁用逻辑来实现这一目标。具体方法如下:
#### 自定义禁用函数
通过向组件传递一个 `disabledDate` 函数属性,可以动态控制哪些日期应该被禁用。该函数接收当前遍历到的日期作为参数,并返回布尔值决定此日期是否可用。
```javascript
// JavaScript 实现禁用逻辑
methods: {
disabledDate(current) {
const start = new Date('2023-10-01'); // 起始日期
const end = new Date('2023-10-31'); // 结束日期
let disableDays = [
'2023-10-05',
'2023-10-18'
]; // 不可选的具体日期列表
// 将字符串形式的不可选日期转换成 Date 对象以便比较
disableDays = disableDays.map(day => new Date(day));
// 判断当前日期是否处于设定的时间段内以及是否属于不可选项之一
return current < start || current > end ||
disableDays.some(disabledDay => this.isSameDay(current, disabledDay));
function isSameDay(dateA, dateB){
return dateA.getFullYear() === dateB.getFullYear() &&
dateA.getMonth() === dateB.getMonth() &&
dateA.getDate() === dateB.getDate();
}
}
}
```
#### 使用禁用功能
在模板部分引入上述定义的方法,并将其绑定至 `uni-datetime-picker` 的相应属性上[^2]。
```html
<template>
<!-- HTML 模板 -->
<view class="example-body">
<uni-datetime-picker type="date" v-model="value" :disabled-date="disabledDate"/>
</view>
</template>
<script>
export default {
data(){
return{
value:''
};
},
methods:{
... // 上述提到的 disabledDate 方法应在此处声明
}
};
</script>
```
这样,在实际应用中,只要给定的日期落在预设的不可选日期集合里或是超出了允许的选择范围,则对应的日历项将会自动失效而无法点击选择[^3]。
阅读全文
相关推荐

















