• element-UI时间控件:日期时间的选择范围的控制方法


    例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 ;
    当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选;实现如下;

    <el-form-item label="时间选择" prop="addTime">
     <el-date-picker
        :editable="false"
          unlink-panels
        v-model="form.addTime"
      type="daterange"
      value-format="yyyy-MM-dd"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      :default-value="defaultValue">
       </el-date-picker>
    </el-form-item>

    export default {
      data() {
      let tool = this.tool
      let _this = this
      return {
      form:{
        time:[], //为时间范围段
        addTime:[], //为最终选择的时间,组件绑定的时间
      },
      formRules:{
        addTime:[{ required: true,message: '时间不能为空!', trigger: 'blur' }],
      },
    pickerOptions: {
      disabledDate (time) {
        let t = _this.tool.date.format(new Date(), "yyyy-MM-dd")
        t= t+' 00:00:00'
        let myDate = new Date(_this.form.time[0])
        let year = myDate.getFullYear()
        let month = myDate.getMonth()
        let date = myDate.getDate()
        if(_this.form.time[1]){
          if(new Date(year, month, date).getTime() < new Date(t).getTime()){
            return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(t).getTime()
          }
          return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(year, month, date).getTime()
        }else {
          if(new Date(year, month, date).getTime() < new Date(t).getTime()){
            return time.getTime() < new Date(t).getTime()
          }
          return time.getTime() < new Date(year, month, date).getTime()
        }
      }
    },
      defaultValue:tool.date.format(new Date(),'yyyy-MM-dd'),
      }
     }
    }

  • 相关阅读:
    看完这篇文章,对采用.Net做网站的信心大增
    sqlserver 使用游标存储过程分页
    ViewState慎用
    [zz] C++智能指针循环引用解决
    cello 有关trigger
    cello 把事件全部统一起来,Event,StateEvent,ActionEvent
    libvirt 错误FAQ
    cello collector中为什么要设置frame_work_in_machine
    比较好的一些句型
    一些疑问
  • 原文地址:https://www.cnblogs.com/zhaoxiaobei/p/9284052.html
Copyright © 2020-2023  润新知