Vue2中Element DatePicker组件设置默认日期及控制日期范围

<el-date-picker
  v-model="date"
  format="yyyy-MM-dd"
>
<!-- :placeholder="date" -->
</el-date-picker>

data() {
  return {
    date: '2017-01-01'
  };
},

<template>
  <div>
    <el-date-picker v-model="date" format="yyyy-MM-dd" value-format="yyyyMMdd">
    </el-date-picker>
    {{ date }}
  </div>
</template>

data() {
  return {
    date: "20020807",
  };
},

<el-date-picker
  v-model="date.createDate"
  format="yyyy-MM-dd"
></el-date-picker>

data() {
  return {
    date: {
      createDate: new Date(),
    },
  };
},

data() {
  return {
    date: [ new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() ]
  };
},

data() {
  return {
    date: "",
  };
},
created() {
  this.initDate();
},
methods: {
  getDate() {
    return (
      new Date().getFullYear() +
      "-" +
      (new Date().getMonth() + 1) +
      "-" +
      new Date().getDate()
    );
  },
  initDate() {
    this.date = this.getDate()
  },
 },
};

<el-date-picker
  v-model="date"
  format="yyyy-MM-dd"
  :picker-options="limitDate"
></el-date-picker>

data() {
  return {
    date: "",
    
    limitDate: { 
    // 一个与picker-options绑定的对象, 和它内部的函数类型disabledDate属性
      disabledDate: this.doLimitDate
    },
    
  };
},
methods: {

  doLimitDate() { // 一个能返回Boolean的函数
    this.limitDate.disabledDate = (time) => { // time为当前日期, disabledDate自带参数
      return (time.getTime() + 24 * 3600 * 1000) > Date.now()
    };
  },

},

<el-date-picker
  v-model="date"
  format="yyyy-MM-dd"
  :picker-options="limitDate"
></el-date-picker>

data() {
  return {
    date: "",
  };
},
computed: {

  limitDate() { 
    return {
      disabledDate:(time) => { // time为当前日期, disabledDate自带参数
        return (time.getTime() + 24 * 3600 * 1000) > Date.now();
    };
  }
}