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

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	日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled`	string
text	中间显示的文字	string
topInfo	上方的提示信息	string
bottomInfo	下方的提示信息	string
className	额外类名	string

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

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

Day 数据结构

文章评论