自选日历，限制选择天数

效果图

<template>
    <div class="dateDemo">
      <mt-navbar v-model="selected">
        <mt-tab-item v-for="(item,index) in cities" :id="index">{{item.month}}月</mt-tab-item>
      </mt-navbar>
      <ul class="clearfix dateList">
        <li class="fl">星期日</li>
        <li class="fl">星期一</li>
        <li class="fl">星期二</li>
        <li class="fl">星期三</li>
        <li class="fl">星期四</li>
        <li class="fl">星期五</li>
        <li class="fl">星期六</li>
      </ul>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item v-for="(item,index) in cities" :id="index">
          <ul class="clearfix">
            <li class="boxOutter fl" v-for="dayNum in item.day_list">
              <input v-if="dayNum.status == 1" type="checkbox" :value="item.month+ '-'+dayNum.day" v-model="dateSelect" :id="item.month+ '-'+dayNum.day"/><label :for="item.month+ '-'+dayNum.day" :class="[(dayNum.status == 0) ? 'disable' : '']" @click="checkDate(dayNum)">{{(dayNum.day == 0) ? '' : dayNum.day}}</label>
            </li>
          </ul>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
</template>

<script>
  import { Navbar, TabItem } from 'mint-ui';
  import { MessageBox } from 'mint-ui';

  Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);
  const cityOptions = [
    {
      "month": 4,
        "day_list": [
        {
          "day": 1,
          "status": 0
        },
        {
          "day": 2,
          "status": 0
        },
        {
          "day": 3,
          "status": 0
        },
        {
          "day": 4,
          "status": 0
        },
        {
          "day": 5,
          "status": 0
        },
        {
          "day": 6,
          "status": 0
        },
        {
          "day": 7,
          "status": 0
        },
        {
          "day": 8,
          "status": 0
        },
        {
          "day": 9,
          "status": 0
        },
        {
          "day": 10,
          "status": 0
        },
        {
          "day": 11,
          "status": 0
        },
        {
          "day": 12,
          "status": 0
        },
        {
          "day": 13,
          "status": 0
        },
        {
          "day": 14,
          "status": 0
        },
        {
          "day": 15,
          "status": 0
        },
        {
          "day": 16,
          "status": 0
        },
        {
          "day": 17,
          "status": 0
        },
        {
          "day": 18,
          "status": 0
        },
        {
          "day": 19,
          "status": 0
        },
        {
          "day": 20,
          "status": 0
        },
        {
          "day": 21,
          "status": 0
        },
        {
          "day": 22,
          "status": 0
        },
        {
          "day": 23,
          "status": 0
        },
        {
          "day": 24,
          "status": 0
        },
        {
          "day": 25,
          "status": 0
        },
        {
          "day": 26,
          "status": 0
        },
        {
          "day": 27,
          "status": 1
        },
        {
          "day": 28,
          "status": 1
        },
        {
          "day": 29,
          "status": 1
        },
        {
          "day": 30,
          "status": 1
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        }
      ]
    },
   {
      "month": 5,
        "day_list": [
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 1,
          "status": 1
        },
        {
          "day": 2,
          "status": 1
        },
        {
          "day": 3,
          "status": 1
        },
        {
          "day": 4,
          "status": 1
        },
        {
          "day": 5,
          "status": 1
        },
        {
          "day": 6,
          "status": 1
        },
        {
          "day": 7,
          "status": 1
        },
        {
          "day": 8,
          "status": 1
        },
        {
          "day": 9,
          "status": 1
        },
        {
          "day": 10,
          "status": 1
        },
        {
          "day": 11,
          "status": 1
        },
        {
          "day": 12,
          "status": 1
        },
        {
          "day": 13,
          "status": 1
        },
        {
          "day": 14,
          "status": 1
        },
        {
          "day": 15,
          "status": 1
        },
        {
          "day": 16,
          "status": 1
        },
        {
          "day": 17,
          "status": 1
        },
        {
          "day": 18,
          "status": 1
        },
        {
          "day": 19,
          "status": 1
        },
        {
          "day": 20,
          "status": 1
        },
        {
          "day": 21,
          "status": 1
        },
        {
          "day": 22,
          "status": 1
        },
        {
          "day": 23,
          "status": 1
        },
        {
          "day": 24,
          "status": 1
        },
        {
          "day": 25,
          "status": 1
        },
        {
          "day": 26,
          "status": 1
        },
        {
          "day": 27,
          "status": 0
        },
        {
          "day": 28,
          "status": 0
        },
        {
          "day": 29,
          "status": 0
        },
        {
          "day": 30,
          "status": 0
        },
        {
          "day": 31,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        }
      ]
    },
   {
      "month": 6,
        "day_list": [
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 0,
          "status": 0
        },
        {
          "day": 1,
          "status": 1
        },
        {
          "day": 2,
          "status": 1
        },
        {
          "day": 3,
          "status": 1
        },
        {
          "day": 4,
          "status": 1
        },
        {
          "day": 5,
          "status": 1
        },
        {
          "day": 6,
          "status": 1
        },
        {
          "day": 7,
          "status": 1
        },
        {
          "day": 8,
          "status": 1
        },
        {
          "day": 9,
          "status": 1
        },
        {
          "day": 10,
          "status": 1
        },
        {
          "day": 11,
          "status": 1
        },
        {
          "day": 12,
          "status": 1
        },
        {
          "day": 13,
          "status": 1
        },
        {
          "day": 14,
          "status": 1
        },
        {
          "day": 15,
          "status": 1
        },
        {
          "day": 16,
          "status": 1
        },
        {
          "day": 17,
          "status": 1
        },
        {
          "day": 18,
          "status": 1
        },
        {
          "day": 19,
          "status": 1
        },
        {
          "day": 20,
          "status": 1
        },
        {
          "day": 21,
          "status": 1
        },
        {
          "day": 22,
          "status": 1
        },
        {
          "day": 23,
          "status": 1
        },
        {
          "day": 24,
          "status": 1
        },
        {
          "day": 25,
          "status": 1
        },
        {
          "day": 26,
          "status": 1
        },
        {
          "day": 27,
          "status": 1
        },
        {
          "day": 28,
          "status": 1
        },
        {
          "day": 29,
          "status": 1
        },
        {
          "day": 30,
          "status": 0
        }
      ]
    }];
    export default {
      name: "date",
      data () {
        return{
          selected:0,
          dateSelect: [],
          cities: cityOptions
        }
      },
      watch:{
        dateSelect(curVal,oldVal){
          console.log(curVal);
          if(curVal.length>3){
            this.dateSelect.pop();
            MessageBox('提示', '最多只能选择三天');
          }
        },
      },
      created () {

      },
      mounted: function() {

      },
      methods:{
        checkDate:function (item) {
          if(item.status == 0){
            alert("此日期不可选~");
          }
        }
      }
    }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.dateDemo{
  .dateList{
    li{
      width: calc(100%/7);
      height: 40px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #333333;
    }
  }
  .boxOutter{
    position: relative;
    width: calc((100% - 70px)/7);
    height: 40px;
    margin: 5px;
    label{
      width: 100%;
      height: 40px;
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      font-size: 14px;
      line-height: 40px;
      text-align: center;
      background: #fff;
    }
    input{
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      opacity: 0;
      z-index: 10000;
    }
    input:checked + label{
      background: #f57e23;
    }
    .disable{
      background: #cccccc;
    }
  }

}
</style>