概覽：vue使用element組件，需要給時(shí)間選擇器設(shè)置默認(rèn)值，場(chǎng)景一：默認(rèn)時(shí)間選擇器，場(chǎng)景二：時(shí)間范圍選擇器，開始時(shí)間和結(jié)束時(shí)間。

一、默認(rèn)時(shí)間選擇器

實(shí)現(xiàn)思路：

element組件的v-model綁定的數(shù)據(jù)變化，則時(shí)間選擇器的默認(rèn)值變化?？梢栽谏芷趍ounted() 或者 onMounted()組件掛載時(shí)進(jìn)行賦值。

實(shí)現(xiàn)代碼：

1.1布局：

<div class="search_right"><div class="echart1_titleBox">時(shí)間：</div><div class="searchInnerBox"><el-date-picker v-model="data.crewOverViewTime" type="date" value-format="YYYY-MM-DD"placeholder="請(qǐng)選擇" clearable :default-value="new Date()"@change="handleChangeTime" /></div>
</div>

1.2邏輯：?

/** * 默認(rèn)選中當(dāng)前時(shí)間*/
let defalutTime = replaceTime(new Date());
data.crewOverViewTime = defalutTime
const replaceTime = (date) => {// 獲取當(dāng)前月份let nowMonth = date.getMonth() + 1;// 獲取當(dāng)前是幾號(hào)let strDate = date.getDate();// 添加分隔符“-”let seperator = "-";// 對(duì)月份進(jìn)行處理，1-9月在前面添加一個(gè)“0”if (nowMonth >= 1 && nowMonth <= 9) {nowMonth = "0" + nowMonth;}// 對(duì)月份進(jìn)行處理，1-9號(hào)在前面添加一個(gè)“0”if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}// 最后拼接字符串，得到一個(gè)格式為(yyyy-MM-dd)的日期let nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;return nowDate;
};

1.3效果展示

二、時(shí)間范圍選擇器

實(shí)現(xiàn)思路：

element組件的v-model綁定數(shù)據(jù)，在組件掛載的生命周期onMounted()進(jìn)行賦值。注意：時(shí)間范圍選擇器的v-modle綁定的動(dòng)態(tài)數(shù)據(jù)data是一個(gè)數(shù)組，數(shù)組索引=0是開始時(shí)間，數(shù)組索引=1是結(jié)束時(shí)間。

實(shí)現(xiàn)代碼：

1.1頁面：

<div class="searchTimerBox"><div class="searchTimerBox_titleBox">時(shí)間：</div><div class="searchInnerBox"><el-date-picker v-model="data.valueTwoTimer" type="monthrange" value-format="YYYY-MM"range-separator="到" start-placeholder="開始時(shí)間" end-placeholder="結(jié)束時(shí)間":unlink-panels="true" @change="handleChangeTime" /></div>
</div>

1.2邏輯：

/*** 默認(rèn)選中此月往前推的12個(gè)月*/
const getTimerPiker = () => {let newData = new Date()let seperator = "-";let nowMonth = newData.getMonth() + 1if (nowMonth >= 1 && nowMonth <= 9) {nowMonth = "0" + nowMonth;}nowMonth = newData.getFullYear() + seperator + nowMonth;const beforeMonth = minDate(newData, 11)data.valueTwoTimer.push(beforeMonth)data.valueTwoTimer.push(nowMonth)
}
//獲取當(dāng)前日期的 前n個(gè)月
const minDate = (_nowDate,_latestMonth) => {_nowDate.setMonth(_nowDate.getMonth() - _latestMonth)let year = _nowDate.getFullYear();let month = (_nowDate.getMonth() + 1).toString().padStart(2, '0');let time = year + '-' + monthreturn time
};

1.3效果展示