vant 日历设置某些天为不可选

2022-03-08 1108点热度 0人点赞 0条评论

Vant里面日历,需要设置比如周末是不可选的,默认看文档说明是van-calendar有min-date和max-date两个属性,是分别设置可选的最早日期和最晚日期,不过还是不能满足设置特定的日期不可选这个功能。

经过一番搜索和研究,可以使用:formatter来实现,文档是有提到formatter不过没有具体的示例,来看一下。

<van-calendar :formatter="formatter" :show-confirm="false" v-model="showCalendar" @confirm="testDateSelected"/>

formatter函数如下:

formatter(day) {
    var m = moment(day.date);
    if (moment(day.date).isSame(moment(), 'day')) {
        day.text = '今天';
        day.type = 'disabled';
    }
    if (m.day() === 0 || m.day() === 6) {
        day.type = 'disabled';
    }
    return day;
}

formatter函数接受一个参数day,是一个Object:

Day 数据结构

日历中的每个日期都对应一个 Day 对象,通过formatter属性可以自定义 Day 对象的内容

键名 说明 类型
date 日期对应的 Date 对象 Date
type 日期类型,可选值为selectedstartmiddleenddisabled string
text 中间显示的文字 string
topInfo 上方的提示信息 string
bottomInfo 下方的提示信息 string
className 额外类名 string

这一day里面的type,如果设置为disabled就可以设定指定的天,是不可选了,示例中我用moment.js 来判断是否是周末,然后设定day.type='disabled'

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论