【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 感谢作者@顾鸟的分享!

  • 32
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值