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

一、代码：

（1）控件

<span class="filterBlock">
        售票时间：
        <DatePicker v-model="saleDate"
                    format="yyyy/MM/dd"
                    type="daterange"
                    placement="bottom-end"
                    placeholder="请选择"
                    class="filter"
                    :value="saleDate"></DatePicker>
      </span>

(2)默认值

 data() {
    return {
        saleDate: '',
    }；
}

（3）默认日期取得

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

 

二、总结：

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

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

 

三、结果显示：

 

四、超简单方法： 

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

//调用方法
mounted() {
    this.getDates();
  },

//写方法
methods: {
    getDates() {
      const now = new Date();
      const nowdate = [now, now];
      this.saleDate = nowdate;
    },
}