el-date-picker设置默认当前日期

时间:2025-03-31 20:17:13

HTMl部分: 

<el-form-item label="拍摄时间:">
    <el-date-picker
     v-model=""
     type="daterange"
     align="right"
     unlink-panels
     range-separator="至"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
     :picker-options="pickerOptions"
     value-format="yyyy-MM-dd"
    />
</el-form-item>

JS部分:

searchData: {
    pageNum: 1,
    pageSize: 10,
    filmingTimeRange: null,
    dwName: null,
    qyName: null
},


mounted() {
    ()
},

methods:{
    getNowDate() {
      var now = new Date()
      var year = ()
      var month = ()
      var date = ()
      month = month + 1
      month = ().padStart(2, '0')  //指定长度为2,不足2的话,从开始填充字符串0
      date = ().padStart(2, '0')
      var defaultDate = `${year}-${month}-${date}`
      this.$set(, 'filmingTimeRange', [defaultDate, defaultDate])
    },
}

可写成工具类,以供其他页面显示:

utils文件夹下文件代码:

// 获取当前日期范围
export function getNowDate() {
  var now = new Date()
  var year = ()
  var month = ()
  var date = ()
  month = month + 1
  month = ().padStart(2, '0')
  date = ().padStart(2, '0')
  var defaultDate = `${year}-${month}-${date}`
  return defaultDate
}
import { getNowDate } from '@/utils/getNowDateRange'

data(){
    return{
        searchData: {
            pageNum: 1,
            pageSize: 10,
            filmingTimeRange: [getNowDate(), getNowDate()],
            dwName: null,
            qyName: null
      },
    }
}

也可使用MomentJS函数

import moment from 'moment'

 searchData: {
        pageNum: 1,
        pageSize: 10,
        filmingTimeRange: [moment().locale('zh-cn').format('yyyy-MM-DD'), moment().locale('zh-cn').format('yyyy-MM-DD')],
        dwName: null,
        qyName: null
      },