element-ui 中日期控件限制时间跨度

矫情吗；* 2023-06-04 12:52 22阅读 0赞

支持点击今天及之前任意日期，前后跨度不超过31天，且不超过今天

<el-date-picker
                v-model="searchForm.dateRange"
                type="daterange"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format = "yyyy-MM-dd"
                :picker-options="pickerOptions"
              ></el-date-picker>

data() {
          minDate:'',
          maxDate:'',
          pickerOptions: {
            onPick: ({ maxDate, minDate }) => {         
             this.minDate = minDate
             this.maxDate = maxDate
            },
            disabledDate: (time) => { //查询时间跨度为31天
              if(this.minDate){
                let range = 31 * 24 * 3600 * 1000
                return time.getTime() > Date.now() || time.getTime() > (this.minDate.getTime() + range) || time.getTime() < (this.minDate.getTime() - range)
              }
              return time.getTime() > Date.now()
            }
          }
    }

转载于:https://www.cnblogs.com/ckmouse/p/11592231.html

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element 日期控件日期限制

开始时间不能大于当前时间，且结束时间不能小于开始时间 tips:当使用日期控件的×，叉掉时间时，此时被v-model会被赋值为null <el-date-pick

小咪咪/ 2023年07月16日 06:58/ 0 赞/ 32 阅读

相关 easyUI 日期控件（easyui-datebox）：datebox开始时间限制结束时间

控件标签如下： <input id="aggStartTime" class="easyui-datebox" format="yyyy-MM-dd HH:mm:

我就是我/ 2023年07月15日 15:15/ 0 赞/ 45 阅读

相关 element-ui 中日期控件限制时间跨度

支持点击今天及之前任意日期，前后跨度不超过31天，且不超过今天 <el-date-picker v-model="searchF

矫情吗；*/ 2023年06月04日 12:52/ 0 赞/ 23 阅读

相关 bootstrap 时间日期日历控件（datetimepicker）

效果图 [本文转载。原文链接请点击][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

蔚落/ 2023年01月17日 09:23/ 0 赞/ 394 阅读

相关 elementui日期时间选择限制

参考文章 https://blog.csdn.net/qq\_36747046/article/details/106946325 https://blog.csdn.n

Bertha 。/ 2022年12月22日 15:30/ 0 赞/ 299 阅读

相关 C# DateTimePicker：日期时间控件

日期时间控件（DateTimePicker）在时间控件中的应用最多，主要用于在界面上显示当前的时间。 Format 属性提供了 4 个属性值，

太过爱你忘了你带给我的痛/ 2022年10月01日 13:57/ 0 赞/ 377 阅读

相关轻量级的日期时间控件Pikaday

今天看到一个网友分享的一篇文章，有关轻量级的日期时间控件Pikaday，感觉很实用。在这里总结一下,方便日后使用。因为之前也遇到过类似的问题，My97datepicker插件样

矫情吗；*/ 2022年08月20日 15:11/ 0 赞/ 366 阅读

相关 WdatePicker日期控件的时间限制

问题描述：用户在使用日期空间进行时间选择时，只能选择一个星期之后的7天，并且只能选择这7天当中的星期二与星期四代码：<input class="Wdate"

刺骨的言语ヽ痛彻心扉/ 2022年08月02日 09:47/ 0 赞/ 284 阅读

相关 Android —— 日期时间控件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

阳光穿透心脏的1/2处/ 2021年07月25日 22:07/ 0 赞/ 563 阅读

相关 easyui——datebox控件限制输入的日期

可以通过calendar控件的validator方法设置。实例： <head> <meta charset="UTF-8"> <t

野性酷女/ 2021年06月24日 14:34/ 0 赞/ 669 阅读