Element组件时间控件限定选择三个月

1、引用时间控件

<template>
  <div class="black-list">
    <el-form-item label="进场时间" label-width="120px" prop="actualEnterTime">
       <el-date-picker
           v-model='traceabilityfrom.actualEnterTime'
           @change='getdataTime'    --时间值改变事件
           type='datetimerange'
           range-separator="至"
           placeholder='选择日期时间'
           align='center'
           :default-time="['00:00:00', '23:59:59']"
           clearable
           :picker-options="pickerOptions"     --限制时间
           size="medium"
        >
       </el-date-picker>
    </el-form-item>
</div>
</template>

2、data声明


import dayjs from 'dayjs';  //时间插件
const times = [
  dayjs().format('YYYY-MM-DD') + ' 00:00:00'
]
export default {
    data() {
        return {
         //时间控件value值
          traceabilityfrom:{     
            actualEnterTime: [],  
            actualEnterStartTime: '',
            actualEnterEndTime: '',
          },
          pickValue:'', // 存放getOnPick函数返回的数据
          pickerOptions: {
	          onPick: this.getOnPick,
	          disabledDate: this.disabledDate
          },
        }
     },
}

3、method定义时间控件方法

import dayjs from 'dayjs';  //时间插件
//获取当前时间
const times = [
  dayjs().format('YYYY-MM-DD') + ' 00:00:00'
]
export default {
    data(){
        ...
    },
    methods: {
        //时间改变事件
       getdataTime(val) {
          let f = 'YYYY-MM-DD HH:mm:ss'
          if(val===null){
            this.traceabilityfrom.actualEnterTime = []
            this.traceabilityfrom.actualEnterStartTime = ''
            this.traceabilityfrom.actualEnterEndTime = ''
            return
          }
          if (Array.isArray(val)) {
            if (val[1]) {
              this.traceabilityfrom.actualEnterEndTime = dayjs(val[1]).format(f)
            }
            if (val[0]) {
              this.traceabilityfrom.actualEnterStartTime = dayjs(val[0]).format(f)
            }
          } else {
            this.traceabilityfrom.actualEnterStartTime = times[0]
            this.traceabilityfrom.actualEnterEndTime= times[1]
            this.traceabilityfrom.actualEnterTime = times
          }
       },
        //获取
        getOnPick(pick) {
          this.pickValue = pick;
        },
        //超出范围禁止
        disabledDate(date) {
          const { minDate, maxDate } = this.pickValue;
          if (minDate && !maxDate) {
            const diff = Math.abs(minDate.valueOf() - date.valueOf());
            if (diff > 1000 * 3600 * 24 * 90) {
              return true;
            }
          }
        },
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值