基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼
更新時間：2018年11月30日 16:21:30 作者：_嗚啦啦啦火車笛
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動選擇器的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
我們的社區(qū)前端工程用的是element組件庫，后臺管理系統(tǒng)用的是iview，組件庫都很棒，但是日期、時間選擇器沒有那種“ 年份 - 月份 -天數(shù) ” 聯(lián)動選擇的組件。雖然兩個組件庫給出的相關(guān)組件也很棒，但是有時候確實不是太好用，不太明白為什么很多組件庫都拋棄了日期聯(lián)動選擇。因此考慮自己動手做一個。
將時間戳轉(zhuǎn)換成日期格式
// 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)轉(zhuǎn)換成時間戳
//三種形式
new Date('2018-9-2').getTime()
new Date('2018-9-2').valueOf()
Date.parse(new Date('2018-9-2'))
IE下的兼容問題
注意： 上述代碼在IE10下(至少包括IE10)是沒法或得到標準時間value的，因為 2018-9-2 并不是標準的日期格式(標準的是 2018-09-02)，而至少 chrome 內(nèi)核為我們做了容錯處理(估計火狐也兼容)。因此，必須得做嚴格的日期字符串整合操作，萬不可偷懶
基于Vue組件化的日期聯(lián)機選擇器
該日期選擇組件要達到的目的如下：
(1) 當前填入的日期不論完整或缺省，都要向父組件傳值（缺省傳''），因為父組件要根據(jù)獲取的日期值做相關(guān)處理（如限制提交等操作等）；
(2) 具體天數(shù)要做自適應(yīng)，即大月31天、小月30天、2月平年28天、閏年29天；
(3) 如先選擇天數(shù)為31號(或30號)，再選擇月數(shù)，如當前選擇月數(shù)不含已選天數(shù)，則清空天數(shù)；
(4) 如父組件有時間戳傳入，則要將時間顯示出來供組件修改。
實現(xiàn)代碼(使用的是基于Vue + element組件庫)
<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>
</el-select>
<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
};
},
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();
},
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>
代碼解析
默認天數(shù)(normalMaxDays)為31天，最小年份1910，最大年份為當前年（因為我的業(yè)務(wù)場景是填寫生日，大家這些都可以自己調(diào)）并在created 鉤子中先初始化年份和天數(shù)。
監(jiān)聽當前日期(currentDate)
核心是監(jiān)聽每一次日期的改變，并修正normalMaxDays，這里對currentDate進行深監(jiān)聽，同時發(fā)送到父組件,監(jiān)聽過程:
watch: {
currentDate: {
handler(newValue, oldValue) {
this.judgeDay(); //更新當前天數(shù)
this.emitDate(); //發(fā)送結(jié)果至父組件或其他地方
},
deep: true
}
}
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))
也是缺乏經(jīng)驗，最后測出來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();
}
else {
timestamp = "";
}
this.$emit("dateSelected", timestamp);//發(fā)送給父組件相關(guān)結(jié)果
},
這里需要注意的，最開始并沒有做上述標準日期格式處理，因為chrome做了適當容錯，但是在IE10就不行了，所以最好要做這種處理。
normalMaxDays改變后必須重新獲取天數(shù)，并依情況清空當前選擇天數(shù)：
watch: {
normalMaxDays() {
this.getFullDays();
if (this.currentDate.year && this.currentDate.day > this.normalMaxDays) {
this.currentDate.day = "";
}
}
}
最終效果
總結(jié)
以上所述是小編給大家介紹的基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue封裝echarts組件,數(shù)據(jù)動態(tài)渲染方式
這篇文章主要介紹了vue封裝echarts組件,數(shù)據(jù)動態(tài)渲染方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了Vue項目如何分環(huán)境打包,實現(xiàn)方法大概分為六步驟，需要的朋友可以參考下2018-04-04
vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫
這篇文章主要介紹了vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
二維碼是一種廣泛應(yīng)用于各種場合的編碼方式，它可以將信息編碼成一張二維圖案，方便快捷地傳遞信息，在Vue.js中，我們可以使用一些庫和組件來實現(xiàn)二維碼的生成和掃描，本文將介紹如何在Vue中實現(xiàn)二維碼的生成和掃描的方法2023-06-06
這篇文章主要介紹了VUE項目中SASS的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)獲取剪切板內(nèi)容的兩種方法,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以了解下2025-02-02
這篇文章主要介紹了Element MessageBox彈框的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
在Vue3項目中使用Vuex進行狀態(tài)管理的詳細教程
在?Vue?3?中使用?Vuex?進行狀態(tài)管理是一個很好的實踐,特別是在涉及到多個組件間共享狀態(tài)的情況,下面是如何在?Vue?3?項目中設(shè)置和使用?Vuex?的教程,包括?state,?mutations,?actions,?getters?的概念及其用途,需要的朋友可以參考下2024-09-09