element ui 时间选择器封装

在template中

<el-date-picker
  v-model="timeData"
  type="daterange"
  size="mini"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  value-format="yyyy-MM-dd"
  class="data-pick"
  unlink-panels
></el-date-picker>

在选择日期范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份,可以使用unlink-panels属性解除联动。
日期格式
使用format指定输入框的格式;使用value-format指定绑定值的格式。默认情况下,组件接受并返回Date对象。 如需修改日期格式,可参考官网配置项https://element.eleme.io/#/zh-CN/component/date-picker

在data里面

data () { return { timeData:[] }

在methods里面设置默认一年时间

methods: {
/* 获取过去时间,并传值给现在时间 */
getPassYearFormatDate () {
var nowDate = new Date()
var date = new Date(nowDate)
date.setDate(date.getDate() - 365)
var seperator1 = '-'
var year = date.getFullYear()
var month = date.getMonth() + 1
var strDate = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (strDate >= 0 && strDate <= 9) {
strDate = '0' + strDate
}
var formatDate = year + seperator1 + month + seperator1 + strDate
this.getNowFormatDate(formatDate)
},
/* 获取现在时间,并接受过去时间的值 */
getNowFormatDate (formatDate) {
var date = new Date()
var seperator1 = '-'
var year = date.getFullYear()
var month = date.getMonth() + 1
var strDate = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (strDate >= 0 && strDate <= 9) {
strDate = '0' + strDate
}
var nowData = year + seperator1 + month + seperator1 + strDate
this.timeData= [formatDate, nowData] // 默认赋值一年时间
}
}

别忘了在mounted里面调用一下

mounted(){ this.getPassYearFormatDate () }

然后在你需要的地方传值就可以了,例如:

beginDate: this.timeData[0], //起始时间 endDate: this.timeData[1], //终止时间

posted @ 2020-09-11 19:46  jageLee  阅读(678)  评论(0编辑  收藏  举报