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'
文章评论