vue+vant实现日历周末与节假日不可选，指定日期不可选

最新推荐文章于 2024-05-18 22:59:11 发布

原创最新推荐文章于 2024-05-18 22:59:11 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

文章介绍了如何在VantUI的van-calendar组件中定制日期选择器，禁止用户在特定的节假日、周末以及已预约日期进行选择。通过`formatter`函数实现日期类型判断和状态设置。

//div中
<van-calendar
   v-model="isShow"
   @confirm="onConfirm"
  color="#1989fa"
  :show-confirm="false"
   :formatter="formatter"
 /> 

// 禁止时间选择-js
    formatter(day) {
      '//this.jiejTimeList = [2023-12-29,2023-12-30,2024-01-01] 设置节假日时间
      const days = this.formatDate(day.date);
      const isZhouM = String(day.date).substring(0, 3);
      //控制节假日不可选
      if (this.jiejTimeList.indexOf(days) != "-1") {
        day.bottomInfo = "休";
        day.type = "disabled";
      }
      //控制周末不可以选
      if (isZhouM == "Sat" || isZhouM == "Sun") {
        day.type = "disabled";
      }
      //控制指定日期不可以选
      this.dataList.forEach((res) => {
        if (res.appointmentTime == days) {
          if (res.isYue == "2") {
            day.bottomInfo = "已预约";
            day.type = "disabled";
          }
        }
      });
      return day;
    },

vant官网文档