文档参考:https://blog.csdn.net/qq_40881695/article/details/124894009 感谢作者@顾鸟的分享!
1. 介绍
官方文档目前还没有此功能,因此在官方文档的基础上修改了代码,实现该功能以满足义务需求,很多组件都可以这样操作。我的实现思路是:先获取需要禁用的日期数组,然后在使用的页面中把该参数传给 uni-datetime-picker 组件,但这个一个多级嵌套使用的组合组件,因此需要层层参数传递,然后在最后一级组件中判断需要禁用的日期
2. 实现过程
-
在使用 uni-datetime-picker 组件的页面,把 disabledDate 数组参数传递给该组件
<uni-datetime-picker type="date" v-model="time" :end="datetimeend" @change="timeChange"
:disabledDate="disabledDate" @getMonth="getMonth" />
data:{
time: "",
datetimeend:'',//最大值yyyy-dd-mm
month: '',//当前月份yyyy-dd
disabledDate :[ "2023-12-11","2023-12-12","2023-12-13"],//不可选日期 array
}
2.修改 uni-datetime-picker.vue 文件,下面是该文件的所在位置,在 uni_modules 文件夹下
需要修改的地方:先接受传递过来的的参数 disabledDate,然后传递给下一级组件 calendar 组件,因为我不确定哪个需要哪个不需要,所以 uni-date-picker.vue 中的 calendar 组件我都传递了该参数。
props: {
// 禁用日期
disabledDate:{
type: Array,
default: []
},
}
// 第一处
<view class="popup-x-body">
<calendar ref="left" :showMonth="false" :start-date="caleRange.startDate"
:end-date="caleRange.endDate" :range="true" :disabledDate="disabledDate" @change="leftChange" :pleStatus="endMultipleStatus"
@firstEnterCale="updateRightCale" @monthSwitch="leftMonthSwitch" style="padding: 0 8px;" />
<calendar ref="right" :showMonth="false" :start-date="caleRange.startDate"
:end-date="caleRange.endDate" :range="true" @change="rightChange"
:pleStatus="startMultipleStatus" :disabledDate="disabledDate" @firstEnterCale="updateLeftCale"
@monthSwitch="rightMonthSwitch" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
</view>
//第二处
<Calendar v-if="isPhone" class="test2" ref="mobile" :clearDate="false" :date="calendarDate" :defTime="mobileCalendarTime"
:start-date="calendarRange.startDate" :end-date="calendarRange.endDate" :selectableTimes="mobSelectableTime"
:startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder"
:default-value="defaultValue"
:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :hasTime="hasTime" :insert="false"
:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" :disabledDate="disabledDate" @monthSwitch="monthSwitch" />
3.calendar 组件,位置跟 uni-datetime-picker.vue 在同一目录,操作也是一样,接受传递过来的参数,传递给下一级组件 calendar-item
props: {
// 禁用日期
disabledDate:{
type: Array,
default: []
},
}
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
:selected="selected" :lunar="lunar" :checkHover="range" :disabledDate="disabledDate" @change="choiceDate"
@handleMouse="handleMouse">
</calendar-item>
4.calendar-item 组件,位置跟 uni-datetime-picker.vue 在同一目录,接受传递过来的参数,使用 es6 数组的 includes 方法,判断需要禁用的日期数组中,是否包含所有遍历的日期,如果包含使用 uniapp 官方定义的禁用类名
props: {
// 禁用日期
disabledDate:{
type: Array,
default: []
},
}
<view class="uni-calendar-item__weeks-box-item" :class="{
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked ||
!checkHover) && !disabledDate.includes(weeks.fullDate),
'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--disable':disabledDate.includes(weeks.fullDate)
}">
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
</view>
这里我传了
data:{
datetimeend:[ "2023-12-22"],
disabledDate :[ "2023-12-11","2023-12-12","2023-12-13"]
}
3.效果演示
文档参考:https://blog.csdn.net/qq_40881695/article/details/124894009 感谢作者@顾鸟的分享!