elementUI时间选择器添加至今按钮并在此选择框上进行回显

686 阅读1分钟

image.png

<el-date-picker
  v-model="form.startTime"
  :clearable="false"
  type="date"
  placeholder="请选择"
  :picker-options="endPickerOptions0"
  size="medium"
  value-format="yyyy-MM-dd"
>
</el-date-picker>
<span class="" style="margin: 0 2px 0px 8px"> -</span>
<el-date-picker
  ref="datePicker"
  v-model="form.endTime"
  :clearable="false"
  prefix-icon="el-icon-date"
  :placeholder="placeholder"
  type="date"
  style="margin-left:10px"
  :class="[isShow === true ?'active':'']"
  value-format="yyyy-MM-dd"
  :picker-options="pickerOptions"
  @change="changeTime"
>
</el-date-picker>
<div v-if="isShow" class="zhijin">至今</div>

样式:需要把至今定位到选择框

.goodsManage {
  .zhijin{
    position: absolute;
    top: 0;
    left: 55%;
  }
  .active{
    .el-input__inner{
      color: #fff;
    }
  }
}

在data里定义shortcuts

isShow: false,// 选择至今和时间有冲突,通过隐藏时间来显示至今
getTimes: '',
placeholder: '请选择',
pickerOptions: {
  shortcuts: [
    {
      text: '至今',
      onClick: (picker) => {
        picker.$emit('pick', new Date())
      }
    }
  ]
},

选择至今按钮时的操作,这样可以回显至今

// 选择至今的操作
pick(picker) {
  this.isShow = true
  this.getTimes = this.getNowFormatDate()
  this.placeholder = ''
  this.$refs.datePicker.handleClose()// 关闭时间弹窗
},

在选择开始时间和结束时间时对此进行限制,让结束时间不能小于开始时间,需要在data里定义

pickerOptions: {
  shortcuts: [
    {
      text: '至今',
      onClick: (picker) => {
        picker.$emit('pick', new Date())
      }
    }
  ],
  disabledDate: time => {
    const beginDateVal = this.form.startTime
    if (beginDateVal) {
      return time.getTime() < new Date(beginDateVal).getTime()
    }
  }
},
// 开始时间
endPickerOptions0: {
  disabledDate: time => {
    const endDateVal = this.form.endTime
    if (endDateVal) {
      return time.getTime() > new Date(endDateVal).getTime()
    }
  }
}

转化new date(),转换成年-月-日的形式

getNowFormatDate() {
  const date = new Date()
  const seperator1 = '-'
  const year = date.getFullYear()
  let month = date.getMonth() + 1
  let strDate = date.getDate()
  if (month >= 1 && month <= 9) {
    month = '0' + month
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = '0' + strDate
  }
  const currentdate = year + seperator1 + month + seperator1 + strDate
  return currentdate
},