使用vant的calendar日历组件,处理指定日期禁止选择

因需求原因,希望做一个工作日和节假日的区分,在选择日期时间时,禁止选择节假日。所以研究了一下vant的日历组件。
首先
:show-confirm=“false”
:formatter=“formatter”
@confirm=“onConfirm”/>
使用vant的calendar日历组件,处理指定日期禁止选择_第1张图片
首先给最小时间min-date和最大时间max-date进行限制,规定只能选择14天之内的日期;
然后最主要的是 :formatter=“formatter” 这个方法。
使用vant的calendar日历组件,处理指定日期禁止选择_第2张图片
这个方法的话,会便利当前月份的每一天,且每次点开日历都会执行,所以我们需要对day里面的date时间进行格式化,然后根据后台返回的日期数据进行格式化对比,如果是需要禁止选择的,则给type改为disabled即可。
如下:这是我们的例子:使用vant的calendar日历组件,处理指定日期禁止选择_第3张图片
因为我们后台返回例子是年月日,所以需要对day的date进行年月日格式化的处理,并且再和后台返回的日期进行对比,根据指定要求修改type的值。

个人记录。

你可能感兴趣的:(前端)