el-date-picker组件设置时间范围限制

这篇具有很好参考价值的文章主要介绍了el-date-picker组件设置时间范围限制。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:

如图所示,下图为新增的一个弹层页面,同时有个需求,日期选择需要限制一个月的时间范围(一月默认为30天):

el-date-picker组件设置时间范围限制,vue问题集合,vue.js,elementui,javascript

查看官方文档我们需要主要使用到如下表格的一些东西:

参数 说明 类型 可选值 默认值
shortcuts 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 Object[]
disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean Function
cellClassName 设置日期的 className Function(Date)
firstDayOfWeek 周起始日 Number 1 到 7 7
onPick 选中日期后会执行的回调,只有当 daterange 或 datetimerange 才生效 Function({ maxDate, minDate })

下方为使用的代码:

<el-col :span="24">
            <el-form-item label="选择日期:"  class="date_box">
              <span class="reqicon">*</span>
                <el-date-picker
                style="width: 300px"
                v-model="date"
                type="daterange"
                @change="datechange"

                :picker-options="pickerOptions"  ++此处增加

                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                >
            </el-date-picker>
            <i class="el-icon-date data_icon"></i>
            <span class="reqtitle" v-show="isreq">请选择日期</span>
          </el-form-item>
          </el-col>

 在data中新增:

 data() {
    return {
      rules: {
        branchNo: [
          {
            required: true,
            message: "请选择平台仓库",
            trigger: "change",
          },
        ]
      },
      startPickerTime:'',  //第一次选中的值
      pickerOptions:{
       //选择第一次时间时触发
        onPick:obj=>{
     //obj对象格式为 {
     // "minDate": "2023-12-31T16:00:00.000Z格式",
    // "maxDate": "2024-01-19T16:00:00.000Z"
   //}
          this.startPickerTime=new Date(obj.minDate).getTime()
        },
 disabledDate:time=>{      //通过disabledDate设置某个时间范围是否禁用可选
          if(this.startPickerTime){
          //时间范围(我这为30天)
           const timeFrame=24*3600*1000*30  
          //minFrame为最小选中范围
           let minFrame=this.startPickerTime-timeFrame 
          //maxFrame为最大选中的范围
           let maxFrame=this.startPickerTime+timeFrame 
           let pickerType=time.getTime()>maxFrame||time.getTime()<minFrame
          //pickerType为布尔值,返回false或true;
           return pickerType       
          }
        }
      }
    };
  },

效果如下图所示:

未选中:

el-date-picker组件设置时间范围限制,vue问题集合,vue.js,elementui,javascript

第一次选中:

当前选中的时间为16号,最大范围为2月15号,范围外的时间已经禁用了

el-date-picker组件设置时间范围限制,vue问题集合,vue.js,elementui,javascript

 最小范围为上一年的12月17号

el-date-picker组件设置时间范围限制,vue问题集合,vue.js,elementui,javascript

 结束,希望对大家有所帮助哦!文章来源地址https://www.toymoban.com/news/detail-797284.html

到了这里,关于el-date-picker组件设置时间范围限制的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包