给vue的日期控件填充默认日期 ゞ 浴缸里的玫瑰 2022-05-18 00:27 730阅读 0赞 ### 原文地址:[https://blog.csdn.net/xie123aaa/article/details/80886006][https_blog.csdn.net_xie123aaa_article_details_80886006] ### ### 注:本文章只用于个人记录解决问题的方法,如果侵犯请联系本人。 ### ### 尊重作者,尊重原创! ### -------------------- **思路:通过日期控件的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('填充默认日期尾部'); } **最后页面初始化时效果图如下:** ![这里写图片描述][70] -------------------- **感受:原作者通过将两个时间放在了一起,其实可以将前后的数据分别显示在两个DataPicker控件中,这样子更加清晰。** [https_blog.csdn.net_xie123aaa_article_details_80886006]: https://blog.csdn.net/xie123aaa/article/details/80886006 [70]: /images/20220518/878bd8a5ed0440769c232f0f6e3a4c3d.png
还没有评论,来说两句吧...