vant日期禁选设置

开发项目中遇到对该组件的拓展使用，发现网上对此分享甚少，特此记录

实现日期禁选

很简单，配置formatter属性值，根据官方文档我直接放在了data中，有扩展操作也可以作为函数在其中do something

<!-- 预约日期 -->
<van-calendar show="{{ appointDateShow }}" color="#2BD3DE" show-confirm="{{showDataBtn}}"
	title="选择预约时间" bind:close="appointDateClose" bind:confirm="appointDateConfirm" 
	default-date="{{dataOffLinePerson.appointmentTime}}" min-date="{{minDate}}" formatter="{{formatter}}" />

formatter(day) {
      let week = day.date.getDay()
      //当日期为周日时候，被禁用
      if (week == 0) {
        day.type = 'disabled'
      }
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();
      return day
    },

//css
//禁用日期样式，可根据自己需求设置
.van-calendar__day--disabled {
  color: var(--calendar-day-disabled-color,#c8c9cc);
}

日期选择范围

设置min-date和max-date属性来控制可选日期范围

<van-calendar
  show="{{ show }}"
  min-date="{{ minDate }}"
  max-date="{{ maxDate }}"
/>
//最小选择日期为当天
minDate: new Date().getTime()
//可以单独设置最小或者最大可选择时间，以此达到禁选目的
//最近可选为后一天
minDate: new Date().getTime() + 24 * 60 * 60 * 1000,

日期格式化函数

最后贴一个日期格式化函数

/**
 * 时间格式化
 * @param {Date} date 日期
 * @param {String} fmt 格式化方式：要格式的类型 ('yyyy-MM-dd hh:mm:ss')/('yyyy-MM-dd')/('MM-dd')/('yyyy年MM月dd日')/('周E')
 * @return {String} 返回格式化后的日期
 * @注：年、月、日、小时可以任意截取如：('yyyy') 、(hh ：12小时制、HH：24小时制)
 */
export function getDatePattern(date, fmt) {
    let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
        "H+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
        "q+": Math.floor((date.getMonth() + 3) / 3),
        "S": date.getMilliseconds()
    };
    let week = {
        "0": "日",
        "1": "一",
        "2": "二",
        "3": "三",
        "4": "四",
        "5": "五",
        "6": "六"
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[date.getDay() + ""]);
    }
    for (let k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
}