源碼:注!原創的!!!!
<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>