iview日期选择器默认显示当前日期

一、代码：

（1）控件

 1 <span class="filterBlock">
 2         售票时间：
 3         <DatePicker v-model="saleDate"
 4                     format="yyyy/MM/dd"
 5                     type="daterange"
 6                     placement="bottom-end"
 7                     placeholder="请选择"
 8                     class="filter"
 9                     :value="saleDate"></DatePicker>
10       </span>

(2)默认值

1  data() {
2     return {
3         saleDate: '',
4     }；
5 }

（3）默认日期取得

1  mounted() {
2     const myDate = new Date();
3     const year = myDate.getFullYear(); // 获取当前年份
4     const month = myDate.getMonth() + 1; // 获取当前月份(0-11,0代表1月所以要加1);
5     const day = myDate.getDate(); // 获取当前日（1-31）
6     // 日期格式：2019/07/29 - 2019/07/29
7     this.saleDate = `${year}/${month}/${day} - ${year}/${month}/${day}`;
8   },

二、总结：

绑定属性value，给value的值就是显示在日期框中的值

注意：你拼接的当前日期格式要和控件的日期格式一模一样，否则不显示

三、结果显示：

四、超简单方法：

new Date()得出的是中国标准时间，但是iview可以自动转换成要显示的格式状态

1 //调用方法
2 mounted() {
3     this.getDates();
4   },

1 //写方法
2 methods: {
3     getDates() {
4       const now = new Date();
5       const nowdate = [now, now];
6       this.saleDate = nowdate;
7     },
8 }