vant日历组件封装改写，左右选择指定日期

最新推荐文章于 2024-04-18 17:22:25 发布

zsnymdr

最新推荐文章于 2024-04-18 17:22:25 发布

阅读量920

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html vue.js

本文链接：https://blog.youkuaiyun.com/amy1019/article/details/132899220

文章描述了一个使用Vue.js和VantUI库开发的日历组件，展示了如何设置日期范围、处理节假日和24节气的显示，并通过props和计算属性进行数据绑定和格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：


   <div class="be-on-duty">
    <div class="calendar mb-10">
      <p class="month-date">{{formatDateS}}年{{formatDateE}}月</p>
      <van-calendar
        ref="calendars"
        :readonly='true'
        :show-mark='false'
        :show-title='false'
        :poppable="false"
        :show-confirm="false"
        :formatter="formatter"
        :min-date="minDate"
        :max-date="maxDate"
      >
        <!-- :show-subtitle='false' -->
        <!-- :default-date="defaultDate" -->
      </van-calendar>
      <button class="month-less" @click="arrowLeft"></button>
      <button class="month-add" @click="arrowRight"></button>
    </div>
  </div>

<script>
import {formatDate} from '@/utils/utils'
export default {
  name: "Calendar",
  props:{
    list:{
      type:Object,
      default:{}
    }
  },
  data() {
    return {
      minDate: new Date(),
      maxDate: new Date(),
      defaultDate: new Date(),

      cont: 0,
      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      nowDay: new Date().getDate(),
    };
  },
  computed:{
    formatDateS() {
      return this.maxDate.getFullYear()
    },
    formatDateE() {
      return this.maxDate.getMonth() + 1
    }
  },
  created() {
    this.setMinMaxDay();
  },
  methods: {
    // 设置显示月份可选择的天数区间
    setMinMaxDay() {
      let firstDay = new Date(this.defaultDate);
      firstDay.setDate(1);
      this.minDate = new Date(
        this.year,
        this.month + this.cont,
        firstDay.getDate()
      );
      let endDate = new Date(this.defaultDate);
      endDate.setMonth(this.defaultDate.getMonth() + 1);
      endDate.setDate(0);
      this.maxDate = new Date(
        this.year,
        this.month + this.cont,
        endDate.getDate()
      );
    },
    // 当前月上一个月
    arrowLeft() {
      this.cont--;
      this.defaultDate = new Date(
        this.year,
        this.month + this.cont,
        this.nowDay
      );
      this.setMinMaxDay();
      this.$emit('on-pre', formatDate(this.minDate,'YYYY-MM-DD'),formatDate(this.maxDate,'YYYY-MM-DD'))
    },
    // 当前月下一个月
    arrowRight() {
      this.cont++;
      this.defaultDate = new Date(
        this.year,
        this.month + this.cont,
        this.nowDay
      );
      this.setMinMaxDay();
      this.$emit('on-next', formatDate(this.minDate,'YYYY-MM-DD'),formatDate(this.maxDate,'YYYY-MM-DD'))
    },
    // Vant日历日期添加法定节假日以及24节气
    formatter(day) {
      if(!this.list) return
      for (const key in this.list) {
        if(formatDate(new Date(day.date), 'YYYY-MM-DD') === key && this.list[key]) {
          day.className = 'vant-calendar-day-class'
        }
      }
      return day;
    },
  },
}
</script>

css

<style scoped lang="less">
::v-deep.be-on-duty {
  position: relative;
  .calendar {
    .month-date {
      flex: 1;
      color: #333;
      font-size: 20px;
      text-align: center;
      position: relative;
      top: -5px;
    }
    .month-less {
      background: url('@/assets/img/signLeft.png') no-repeat;
      width: 23px;
      height: 23px;
      border: 0;
      position: absolute;
      top: -3px;
      left: 0;
      z-index: 99;
    }
    .month-add {
      background: url('@/assets/img/signRight.png') no-repeat;
      width: 23px;
      height: 23px;
      border: 0;
      position: absolute;
      top: -3px;
      right: 0;
      z-index: 99;
    }
    .van-calendar {
      background-color: transparent;
      .van-calendar__header {
        box-shadow: none;
        .van-calendar__header-subtitle {
          display: none;
          font-size: 20px;
          line-height: 28px;
          font-weight: 400;
          font-family: PingFangSC-Regular, PingFang SC;
        }
        .van-calendar__weekdays .van-calendar__weekday{
          font-weight: 500;
          font-size: 14px;
        }
      }
    }
    .van-calendar__body {
      .van-calendar__month {
        .van-calendar__days {
          .van-calendar__day {
            .van-calendar__top-info {
              text-align: right;
            }
          }
        }
      }
    }
    .vant-calendar-day-class {
      position: relative;
      z-index: 0;
      color: #F75C73;
      &:before{
        content: ' ';
          width: 35px;
          height: 35px;
          color: #F75C73;
          // background: linear-gradient(316deg, #FBAB69 0%, #F74F75 100%);
          border: 1px solid #F75C73;
          border-radius: 50%;
          position: absolute;
          z-index: -1;
      }
    }
    .van-calendar__selected-day {
      width: 37px;
      height: 37px;
      color: #fff;
      background: linear-gradient(316deg, #FBAB69 0%, #F74F75 100%);
      border-radius: 50%;
    }
  }
}
</style>