Vue自定义日历插件(可以选择日期区间段)

由于网上的插件没有符合项目的需求决定自己实现

图示如下:

默认选择今天的日期时间段

1.默认状态(默认选择当前日期的时间段(蓝底背景色代表选中时间段),

2.当前日期之前的时间不可以选择(禁用了点击事件))

3.当日历上的操作的年份月份小于当前时间的年份月份时禁止点击上一月的按钮

选中状态

1.可以跨年分跨月份选择

2.点击取消按钮时回复到默认的选择时间

 

代码如下

<template>
  <div class="biji">

   <!-- <div>时间段:{{starttime}}至{{endtime}}</div> -->

    <div class="mobile-top">
      <div class="sel-time">
        <p>开始时间</p>
        <p class="start-date">{{starttime}}</p>
      </div>
      <div class="unsel-time">
        <p>结束时间</p>
        <p class="end-date">{{endtime==''?'请选择结束日期':endtime}}</p>
      </div>
    </div>

    <div class="title">
      <div class="btn" @click="last()" 
       :class="(month<=nowmonth)&&(Year<=nowYear)?'noclick':'' ">上一月</div>
      <div class="text">{{Year}}年{{month}}月</div>
      <div class="btn" @click="next()">下一月</div>
    </div>

    <div class="head">
      <div class="days" v-for="(item,index) in ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']" :key="index">
        {{item}}
      </div>
    </div>

    <div class="wrap">
      <div class="span" v-for="(item,index) in calendarList" :key="index" @click="click(item.count)" :class="item==''?'kong'
      :item.count<nowtime?'noclick'
      :(item.count>=starttime&&item.count<=endtime)||item.count==starttime?'active':''">
        {{item.value}}
      </div>
    </div>

    <div class="bottombtn">
      <button class="cancle-btn" @click='cancle()'>取消</button>
      <button class="sure-btn" @click='firm()'>确定</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Biji',
    data() {
      return {
        nowtime: '', //当前日期的时间戳

        clickitem: 0, //点击的时间戳
        clickcount: 0, //点击次数
        starttime: '', //开始时间 数字   默认选中当天日期
        endtime: '', //结束时间 数字

        Year: new Date().getFullYear(),   //日历上的年份
        month: new Date().getMonth() + 1, //日历上的月份
        Day: new Date().getDate(),        //日历上的天份

        nowYear: new Date().getFullYear(),
        nowmonth: new Date().getMonth() + 1,
        nowDay: new Date().getDate(),

        calendarList: [],
      }
    },
    created() {
      this.Draw(this.nowYear, this.nowmonth);

      let time_month = this.nowmonth; //现在的月份
      let time_day = this.nowDay; //现在的天数
      if (this.nowmonth < 10) {
        time_month = 0 + '' + this.nowmonth;
      }
      if (this.nowDay < 10) {
        time_day = 0 + '' + this.nowDay;
      }

      this.nowtime = this.nowYear + '' + time_month + '' + time_day;
      this.starttime = this.nowtime;
      this.endtime = this.nowtime;
    },
    computed: {},

    methods: {

      Draw: function (Year, Month) {

        //日期列表
        var calendar = [];

        //用当月第一天在一周中的日期值作为当月离第一天的天数(获取当月第一天是周几)
        for (var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay(); i <= firstDay; i++) {
           calendar.push("");
        }

        //用当月最后一天在一个月中的日期值作为当月的天数
        for (var i = 1, monthDay = new Date(Year, Month, 0).getDate(); i <= monthDay; i++) {

          let time_month = Month;
          let time_day = i;
          if (Month < 10) {
            time_month = 0 + '' + Month;
          }
          if (i < 10) {
            time_day = 0 + '' + i;
          }

          calendar.push({
            value: i,
            count: Year + '' + time_month + '' + time_day
          })
        }
        this.calendarList = calendar;
        // console.log(calendar)
      },

      last() {
        this.month--;
        if (this.month == 0) {
          this.month = 12;
          this.Year--;
        }

        this.Draw(this.Year, this.month);
      },

      next() {
        this.month++;
        if (this.month == 13) {
          this.month = 1;
          this.Year++;
        }

        this.Draw(this.Year, this.month);
      },


      click(item) {
        this.clickcount++;
        this.clickitem = item;

        //开始日期
        if (this.clickcount % 2 == 1) {
          this.starttime = this.clickitem;
          this.endtime = ''
        } else {
          this.endtime = this.clickitem;
          if (this.starttime > this.endtime) {
            this.endtime = this.starttime;
            this.starttime = this.clickitem;
          }
        }
      },


      firm(){

      },

      cancle(){
      this.starttime = this.nowtime;
      this.endtime = this.nowtime;
      }

    }

  }

</script>

<style scoped lang="scss">
  @import "../common/common";

  .wrap {
    width: 7.5rem;
    height: auto;
    overflow: hidden;
    padding-bottom: 1rem;
  }

  .span {
    width: 1.07142rem;
    height: 0.6rem;
    background: #fff;
    color: #337ab7;
    float: left;
    text-align: center;
    line-height: 0.6rem;

    &.active {
      background: #037ef5;
      color: #fff;
    }

    &.noclick {
      pointer-events: none;
      background: #ccc;
    }

    &.kong {
      background: #fff;
      pointer-events: none;
    }
  }

  .mobile-top {
    display: flex;
    flex-wrap: nowrap;
    background: #fff;
    padding: 0.1rem 0;
    .sel-time {
      text-align: center;
      width: 50%;
      // border-bottom: solid 2px #2a81e8;
      .start-date{
        color: #b1b1b1;
        margin-top: 0.05rem;
      }
    }

    .unsel-time {
      text-align: center;
      width: 50%;
      .end-date{
        color: #b1b1b1;
         margin-top: 0.05rem;
      }
    }
  }

  .title{
    width: 100%;
    height: 40px;
    background-color: #60a7e8;
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 40px;

    .btn{
      width: 1.2rem;   
      &.noclick{
        pointer-events: none;
         background: #ccc;
      }
    }
    .text{
      flex: 1;
    }
  }

  .head{
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  height: 40px;
  line-height: 40px;
  .days{
    flex: 1;
  }
  }



  .bottombtn {
    height: 40px;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;

    button {
      flex: 1;
    }

    .sure-btn {
      background: #037ef5;

      color: #fff;
    }
  }

</style>