源碼：注！原創的！！！！

<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-dayhourMinute *///年月日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>

　　

轉載于:https://www.cnblogs.com/webSong/p/9342498.html

總結

以上是生活随笔為你收集整理的vue js moment.js 过滤了双休日和法定节假日的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。