vue js moment.js 过滤了双休日和法定节假日

源码：注！原创的！！！！

<template>
  <div id="DATE">
    <ul class="dateForm" @change="VpushDateTime((ymd+hour+minute))">
      <!-- 年月日 -->
      <li class="ymd">
        <div class="postion input">
          <label  @click.stop.prevent="selectState=true"><input type="text" v-model="ymd"><!--
         --><i class="glyphicon glyphicon-triangle-bottom"></i>
          </label>
        </div>
        <!-- 下拉列表年月日 -->
        <select v-if="selectState" v-model="ymd"  @click.stop="VgetSelect('ymdSelect',$event)"  class="postion list select" id="ymdSelect" size="4">
          <option v-for="itme in ymdList" v-text="itme" v-bind:value="itme"></option>
        </select>
      </li>
      <!-- 小时 -->
      <li class="hour">
        <div class="postion input">
          <label @click.stop="selectState=true"><input type="text" v-model="hour"><!--
         --><i class="glyphicon glyphicon-triangle-bottom"></i>
          </label>
        </div>
        <!-- 下拉列表小时 -->
        <select v-if="selectState" v-model="hour" @click.stop="VgetSelect('hourSelect',$event)" class="postion list select" id="hourSelect" size="4">
          <option v-for="(itme,i) in hourList" v-text="itme" v-bind:value="itme" ></option>
        </select>
      </li>
      <!-- 分钟 -->
      <li class="minute">
        <div class="postion input">
          <label @click.stop="selectState=true"><input type="text" v-model="minute"><!--
         --><i class="glyphicon glyphicon-triangle-bottom"></i>
          </label>
        </div>
        <!-- 下拉列表分钟 -->
        <select v-if="selectState" v-model="minute" @click.stop="VgetSelect('minuteSelect',$event)" class="postion list select" id="minuteSelect" size="4">
          <option v-for="itme in minuteList" v-text="itme" v-bind:value="itme"></option>
        </select>
      </li>
    </ul>
    <button @click="p=23,ps=!ps">change</button>
    <p v-if="ps">{{p}}</p>
  </div>
</template>
<script>
    import moment from "moment";
    //设置时间核心插件语言
    moment.locale("zh-cn");
    //字典=》全国放假日[因为不知道明年放假是如何定的，所以只写死今年]
    const wordBookDate= ["2018年06月16日","2018年06月17日","2018年06月18日","2018年09月22日","2018年09月23日","2018年09月24日","2018年10月01日","2018年10月02日","2018年10月03日","2018年10月04日","2018年10月05日","2018年10月06日","2018年10月07日"]
    ;
    export default {
        props:{
            init:''
        },
        data() {
            return {
                p:'12',
                ps:false,
                //输入框
                //年月日
                ymd: '',
                //小时
                hour: '',//moment().format('HH')+'时'
                //分钟
                minute: moment().format('mm')+'分'
                //下拉框状态
                ,selectState:false
            };
        },
        methods: {
            //向父组件传值
            VpushDateTime(data) {
                const _this = this;
                //  _this.$emit("getDateTime", _this.ymd);
                _this.$emit("getDateTime", data);
            },
            //下拉列表选择
            VgetSelect(selectName,e){
                const _this=this;
                const oSelec=document.querySelector('#'+selectName);

                if(selectName.startsWith('ymd')){
                    //console.log('年月日');
                    //_this.ymd=(e.target).innerText;
                }else if(selectName.startsWith('hour')) {
                    //console.log('小时的');

                }else if(selectName.startsWith('minute')){
                    //console.log('分钟的');

                }
                /*oSelec.addEventListener("click",function(e){
                  console.log(selectName)
                  if(selectName.startsWith('ymd')){
                    console.log('年月日');
                  }else if(selectName.startsWith('hour')) {
                    console.log('小时的');
                  }else if(selectName.startsWith('hour')){
                    console.log('分钟的');
                  }
                  //_this.ymd=(e.target).innerText;
                  _this.ymd=(e.target).innerText;
                  //_this.VpushDateTime(_this.ymd);
                },false)*/
            },
            //检测最终值是否正确
            Vcheck(date){
                const _this=this;
                _this.VpushDateTime(date)
            },

        },
        computed: {
            /*  year-month-day
                hour
                Minute */
            //年月日
            ymdList:()=>{
                /*const _this=this;*/
                let arr=[];
                const month= wordBookDate[(moment().month()+2).toString()];
                //取60天区间
                for(let i=0;i<60;i++){
                    let ymd=moment().add(i,'day').format('L');
                    let day=moment(ymd).day();
                    //过滤周六日
                    if(!(day==0||day==6)){
                        ymd=ymd .replace(/[/]/, "年")
                            .replace(/[/]/, "月") + "日";
                        arr.push(ymd)
                    }
                    //过滤周六日完毕
                }
                //取60天区间完毕
                //过滤法定节日
                if(month.length!=0){
                    //传统写法
                    for(let i=0;i<arr.length;i++){
                        for(let m=0;m<=month.length;m++){
                            if(arr[i]==month[m]){
                                //改变原数组
                                arr.splice(i,1);
                            }
                        }
                    }
                }
                //过滤法定节日完毕
                return arr;
            },
            //时
            hourList:()=>{
                return ['09时','10时','11时','13时','14时'];
            },
            //分
            minuteList:()=>{
                return ['00分','01分','02分','03分','04分','05分','06分','07分','08分','09分',
                    '10分','11分','12分','13分','14分','15分','16分','17分','18分','19分',
                    '20分','21分','22分','23分','24分','25分','26分','27分','28分','29分',
                    '30分','31分','32分','33分','34分','35分','36分','37分','38分','39分',
                    '40分','41分','42分','43分','44分','45分','46分','47分','48分','49分',
                    '50分','51分','52分','53分','54分','55分','56分','57分','58分','59分']
            }
        },
        mounted() {
            const _this = this;
            //当鼠标点击旁边隐藏下拉框
            document.documentElement.addEventListener('click',function (e) {
                _this.selectState=false;
            });
            //console.clear();
            //console.log(_this.init.type);
            moment().hour() >= 15 ? _this.ymdList.splice(0,1) : '';
            _this.ymd=_this.ymdList[0];//年月日输入赋值，默认第一个
            _this.hour=_this.hourList[0];//小时，默认第一个
            console.log(_this.hourList[0]);
            _this.VpushDateTime((_this.ymd+_this.hour+_this.minute));
        },
    };
</script>
<style lang="scss" scoped>
  /* 整体样式 */
  .dateForm{
    list-style: none;
    padding: 0;margin:0;
    &>li{
      display: inline-block;
      position: relative;
    }
    .postion{
      position: absolute;
      top:0;left: 0;
    }
    .postion.input{
      z-index: 2;
      background:#fff;
    }
    .postion.list{
      padding: 0;
      box-sizing: border-box;
      width: 100%;
      top:28px;
    }
  }
  /* 输入框样式 */
  label {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    border: 1px solid #ddd;
    padding: 0;
    margin: 0;
    overflow: hidden;
    input {
      padding: 0;
      margin: 0;
      outline: none;
      border: none;
      box-sizing: border-box;
      padding-left: 3px;
    }
    i {
      border-left: 1px solid #ddd;
      display: inline-block;
      line-height: 26px;
      vertical-align: bottom;
      text-align: center;
      cursor: pointer;
      font-size: 14px;
      color: #6d6d6d;
    }
  }
  .ymd {
    width: 145px;
    .postion.input{
      width: 145px;
      label{
        width: 145px;
      }
    }
    input {
      width: 122px;
    }
    i {
      padding-left: 3px;
    }
  }
  .hour,
  .minute {
    width: 60px;
    .postion.input{
      width: 60px;
      label{
        width: 60px;
      }
    }
    input {
      width: 36px;
    }
    i {
      width: 18px;
    }
  }
  /* 下拉列表样式 */
  .select{
    background: #fff;
    outline: none;
    margin: 0;
    padding:0;
    option{
      height: 28px;
      line-height: 28px;
      padding-top: 5px;
      padding-left: 5px;
      cursor: pointer;
    }
    option:hover,option:focus,option:active{
      background: #1883D7;
      color:#fff;
    }
  }
  .select::-webkit-scrollbar{
    width:2px;
    background: #6d6d6d;
  }
</style>