【uniapp】uni-date-picker 禁用日期功能---完善，附图和步骤

文档参考：https://blog.csdn.net/qq_40881695/article/details/124894009 感谢作者@顾鸟的分享！ 

1. 介绍

官方文档目前还没有此功能，因此在官方文档的基础上修改了代码，实现该功能以满足义务需求，很多组件都可以这样操作。我的实现思路是：先获取需要禁用的日期数组，然后在使用的页面中把该参数传给 uni-datetime-picker 组件，但这个一个多级嵌套使用的组合组件，因此需要层层参数传递，然后在最后一级组件中判断需要禁用的日期

2. 实现过程

1. 在使用 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 感谢作者@顾鸟的分享！