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: '', 4     }；
}

（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;
    },
}