element ui DatePicker初始化显示默认时间

当天

• 当天

 <el-date-picker
      v-model="today"
      type="date"
      placeholder="选择日期">
 </el-date-picker>

data(){
  return{
    today: ''
  }
},
created() {
    this.getdatatime()
},
methods: {
    getdatatime() {
    this.today = new Date()
},

效果图

• 近三天

<el-date-picker
              v-model="queryParam.payData"
              // 格式化日期，这里不要在日期后面添加 时-分-秒，会显示不出来(因为一般框里显示的都是 年-月-日)
              value-format="yyyy-MM-dd" 
              size="medium"
              clearable
              class="daterange"
              type="daterange" // 日期数组类型，根据自己的需求相应更改
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
</el-date-picker>

data(){
  return{
    queryParam: {
      payData: []
    }
  }
},
created(){
  this.dateInit()
},
medthods:{
   // 支付日期默认查询三天
    dateInit () {
      const endDate = new Date().getTime()
      const starDate = endDate - 3600 * 1000 * 24 * 3
      const tempEnd = utils.formatDate(endDate, 'yyyy-MM-dd')
      const tempStart = utils.formatDate(starDate, 'yyyy-MM-dd')
      // 主要是这行代码：把结果赋值给双向绑定的值
      this.queryParam.payData = [tempStart, tempEnd]
    }
}

当前月第一天到当天

• 当前月第一天到当天
  其它代码一样

medthods:{
    dateInit () {
      const date = new Date()
      const year = date.getFullYear().toString()
      // 获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
      // 获取天，判断是否小于10，如果是在字符串前面拼接'0'
      const day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
      const tempEnd = year + '-' + month + '-' + day // 当天
      const tempStart = year + '-' + month + '-01' // 当月第一天
      this.queryParam.payData = [tempStart, tempEnd]
    }

同理，如果展示的日期是单独的，比如：2021-09-30，或者是更改显示的时间，也是一样的方法去实现。