給vue的日期控制元件填充預設日期
阿新 • • 發佈:2019-01-03
注:本文章只用於個人記錄解決問題的方法,如果侵犯請聯絡本人。
尊重作者,尊重原創!
思路:通過日期控制元件的v-model賦預設值即可
第一步, 引入日期控制元件
<el-form-item label="日期">
<el-date-picker
v-model="visitDate"
type="daterange"
@change="getTime"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
range-separator ="至"
start-placeholder="開始日期"
end-placeholder="結束日期">
</el-date-picker>
</el-form-item>
第二步, data中visitData存成陣列
第三步, 頁面掛載時給visitData賦值即可
mounted () {
let nowDate = new Date();
let year = nowDate.getFullYear();
let month = nowDate.getMonth() + 1;
let day = nowDate.getDate();
let endTime = `${year}-${month}-${day}`;
this.nowTime = endTime; // 當前的時間點
let befDate = new Date(nowDate.getTime() - 7 * 24 * 3600 * 1000);
let byear = befDate.getFullYear();
let bmonth = befDate.getMonth() + 1;
let bday = befDate.getDate();
let startTime = `${byear}-${bmonth}-${bday}`;
this .weekBeforeTime = startTime; // 向前推遲一週的時間點
// 預設日期賦值
this.visitDate = [new Date(byear + ', ' + bmonth + ', ' + bday), new Date(year + ', ' + month + ', ' + day)];
console.log('填充預設日期');
console.log(byear + ', ' + bmonth + ', ' + bday);
console.log(year + ', ' + month + ', ' + day);
console.log(this.visitDate);
console.log('填充預設日期尾部');
}
最後頁面初始化時效果圖如下:
感受:原作者通過將兩個時間放在了一起,其實可以將前後的資料分別顯示在兩個DataPicker控制元件中,這樣子更加清晰。