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

HTMl部分: 

<el-form-item label="拍摄时间:">
    <el-date-picker
     v-model="searchData.filmingTimeRange"
     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() {
    this.getNowDate()
},

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

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

utils文件夹下getNowDateRange.js文件代码:

// 获取当前日期范围
export function getNowDate() {
  var now = new Date()
  var year = now.getFullYear()
  var month = now.getMonth()
  var date = now.getDate()
  month = month + 1
  month = month.toString().padStart(2, '0')
  date = date.toString().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
      },

猜你喜欢

转载自blog.csdn.net/gp_911014/article/details/132161746