咱們的社區前端工程用的是element組件庫,後臺管理系統用的是iview,組件庫都很棒,可是日期、時間選擇器沒有那種「 年份 - 月份 -天數 」 聯動選擇的組件。雖然兩個組件庫給出的相關組件也很棒,可是有時候確實不是太好用,不太明白爲何不少組件庫都拋棄了日期聯動選擇。所以考慮本身動手作一個。 前端
將時間戳轉換成日期格式chrome
// timestamp 爲時間戳 new Date(timestamp) //獲取到時間標磚對象,如:Sun Sep 02 2018 00:00:00 GMT+0800 (中國標準時間) /* 獲取年: new Date(timestamp).getFullYear() 獲取月: new Date(timestamp).getMonth() + 1 獲取日: new Date(timestamp).getDate() 獲取星期幾: new Date(timestamp).getDay() */
將日期格式(yyyy-mm-dd)轉換成時間戳less
//三種形式 new Date('2018-9-2').getTime() new Date('2018-9-2').valueOf() Date.parse(new Date('2018-9-2'))
IE下的兼容問題iview
注意: 上述代碼在IE10下(至少包括IE10)是無法或獲得標準時間value的,由於 2018-9-2 並非標準的日期格式(標準的是 2018-09-02),而至少 chrome 內核爲咱們作了容錯處理(估計火狐也兼容)。所以,必須得作嚴格的日期字符串整合操做,萬不可偷懶組件化
基於Vue組件化的日期聯機選擇器學習
該日期選擇組件要達到的目的以下:this
<template> <div class="date-pickers"> <el-select class="year select" v-model="currentDate.year" @change='judgeDay' placeholder="年"> <el-option v-for="item in years" :key="item" :label="item" :value="item"> </el-option>//歡迎加入前端全棧開發交流圈一塊兒學習交流:864305860 </el-select>//面向1-3年前端人員 <el-select //幫助突破技術瓶頸,提高思惟能力 class="month select" v-model="currentDate.month" @change='judgeDay' placeholder="月"> <el-option v-for="item in months" :key="item" :label="String(item).length==1?String('0'+item):String(item)" :value="item"> </el-option> </el-select> <el-select class="day select" :class="{'error':hasError}" v-model="currentDate.day" placeholder="日"> <el-option v-for="item in days" :key="item" :label="String(item).length==1?String('0'+item):String(item)" :value="item"> </el-option> </el-select> </div> </template> <script> export default { props: { sourceDate: { type: [String, Number] } }, name: "date-pickers", data() { return { currentDate: { year: "", month: "", day: "" }, maxYear: new Date().getFullYear(), minYear: 1910, years: [], months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], normalMaxDays: 31, days: [], hasError: false };//歡迎加入前端全棧開發交流圈一塊兒學習交流:864305860 }, watch: { sourceDate() { if (this.sourceDate) { this.currentDate = this.timestampToTime(this.sourceDate); } }, normalMaxDays() { this.getFullDays(); if (this.currentDate.year && this.currentDate.day > this.normalMaxDays) { this.currentDate.day = ""; } }, currentDate: { handler(newValue, oldValue) { this.judgeDay(); if (newValue.year && newValue.month && newValue.day) { this.hasError = false; } else { this.hasError = true; } this.emitDate(); }, deep: true } }, created() { this.getFullYears(); this.getFullDays(); },//歡迎加入前端全棧開發交流圈一塊兒學習交流:864305860 methods: { emitDate() { let timestamp; //暫默認傳給父組件時間戳形式 if ( this.currentDate.year && this.currentDate.month && this.currentDate.day) { let month = this.currentDate.month < 10 ? ('0'+ this.currentDate.month):this.currentDate.month; let day = this.currentDate.day < 10 ? ('0'+ this.currentDate.day):this.currentDate.day; let dateStr = this.currentDate.year + "-" + month + "-" + day; timestamp = new Date(dateStr).getTime(); } else { timestamp = ""; } this.$emit("dateSelected", timestamp); }, timestampToTime(timestamp) { let dateObject = {}; if (typeof timestamp == "number") { dateObject.year = new Date(timestamp).getFullYear(); dateObject.month = new Date(timestamp).getMonth() + 1; dateObject.day = new Date(timestamp).getDate(); return dateObject; } }, getFullYears() { for (let i = this.minYear; i <= this.maxYear; i++) { this.years.push(i); } }, getFullDays() { this.days = []; for (let i = 1; i <= this.normalMaxDays; i++) { this.days.push(i); } }, judgeDay() { if ([4, 6, 9, 11].indexOf(this.currentDate.month) !== -1) { this.normalMaxDays = 30; //小月30天 if (this.currentDate.day && this.currentDate.day == 31) { this.currentDate.day = ""; } } else if (this.currentDate.month == 2) { if (this.currentDate.year) { if ( (this.currentDate.year % 4 == 0 && this.currentDate.year % 100 != 0) || this.currentDate.year % 400 == 0 ) { this.normalMaxDays = 29; //閏年2月29天 } else { this.normalMaxDays = 28; //閏年平年28天 } } else { this.normalMaxDays = 28;//閏年平年28天 } } else { this.normalMaxDays = 31;//大月31天 } } } }; </script> <style lang="less"> .date-pickers { .select { margin-right: 10px; width: 80px; text-align: center; } .year { width: 100px; } .error { .el-input__inner { border: 1px solid #f1403c; border-radius: 4px; } } } </style>
代碼解析 默認天數(normalMaxDays)爲31天,最小年份1910,最大年份爲當前年(由於個人業務場景是填寫生日,你們這些均可以本身調)並在created 鉤子中先初始化年份和天數。code
監聽當前日期(currentDate
)orm
核心是監聽每一第二天期的改變,並修正normalMaxDays,這裏對currentDate進行深監聽,同時發送到父組件,監聽過程:對象
watch: { currentDate: { handler(newValue, oldValue) { this.judgeDay(); //更新當前天數 this.emitDate(); //發送結果至父組件或其餘地方 },//歡迎加入前端全棧開發交流圈一塊兒學習交流:864305860 deep: true }//面向1-3年前端人員 }//幫助突破技術瓶頸,提高思惟能力
judgeDay方法:
judgeDay() { if ([4, 6, 9, 11].indexOf(this.currentDate.month) !== -1) { this.normalMaxDays = 30; //小月30天 if (this.currentDate.day && this.currentDate.day == 31) { this.currentDate.day = ""; } } else if (this.currentDate.month == 2) { if (this.currentDate.year) { if ( (this.currentDate.year % 4 == 0 && this.currentDate.year % 100 != 0) || this.currentDate.year % 400 == 0 ) { this.normalMaxDays = 29; //閏年2月29天 } else { this.normalMaxDays = 28; //平年2月28天 } } else { this.normalMaxDays = 28; //平年2月28天 } } else { this.normalMaxDays = 31; //大月31天 } }
最開始的時候我用的 includes判斷當前月是不是小月:
if([4, 6, 9, 11].includes(this.currentDate.month))
也是缺少經驗,最後測出來includes 在IE10不支持,所以改用普通的indexOf()。
emitDate: emitDate() { let timestamp; //暫默認傳給父組件時間戳形式 if ( this.currentDate.year && this.currentDate.month && this.currentDate.day) { let month = this.currentDate.month < 10 ? ('0'+ this.currentDate.month):this.currentDate.month; let day = this.currentDate.day < 10 ? ('0'+ this.currentDate.day):this.currentDate.day; let dateStr = this.currentDate.year + "-" + month + "-" + day; timestamp = new Date(dateStr).getTime(); } //歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流:864305860 else { timestamp = ""; } this.$emit("dateSelected", timestamp);//發送給父組件相關結果 },
這裏須要注意的,最開始並無作上述標準日期格式處理,由於chrome作了適當容錯,可是在IE10就不行了,因此最好要作這種處理。 normalMaxDays改變後必須從新獲取天數,並依狀況清空當前選擇天數:
watch: { normalMaxDays() { this.getFullDays(); if (this.currentDate.year && this.currentDate.day > this.normalMaxDays) { this.currentDate.day = ""; }//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流:864305860 }//面向1-3年前端人員 }//幫助突破技術瓶頸,提高思惟能力
結語
感謝您的觀看,若有不足之處,歡迎批評指正。