1. 介绍

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

2. 实现过程

1. 在使用 uni-datetime-picker 组件的页面，把 disabledDate 数组参数传递给该组件

   // html
   <uni-datetime-picker type="date" return-type="date" v-model="formData.createTime" :border="false"
   					@change="dateChange" :clear-icon="false" :disabledDate="disabledDate" />
   // js
   // 获取节假日列表
   const disabledDate = ref([]) // 禁用日期
   const getHolidayList = async() => {
   const { data } = await holidayList()
   	disabledDate.value = data
   }
   

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>
   

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>