vue elemet日期选择器设置开始时间不能大于结束时间并且大于等于今天

深碍√TFBOYSˉ_ 2022-11-05 00:55 464阅读 0赞

今天接了个需求，要求 如下：

*  开始时间
    
     *  大于等于当前时间 也就是大于等于今天
     *  小于等于结束时间
 *  结束时间
    
     *  大于等于当前时间 也就是大于等于今天
     *  大于等于开始时间

效果图如下：  
![element日期选择.gif][element_.gif]

话不多说，直接上代码

<template>
      <div class="hello">
        <el-form
          :model="basicInfo"
          size="mini"
          label-width="100px"
        >
          <el-row>
            
            <el-col :span="12">
              <el-form-item
                label="开始时间："
                prop="startDate"
              >
                <el-date-picker
                  v-model="basicInfo.startDate"
                  type="date"
                  :picker-options="pickerOptionsStart"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择开始时间"
                  style="width: 100%;"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item
                label="结束时间："
                prop="endDate"
              >
                <el-date-picker
                  v-model="basicInfo.endDate"
                  type="date"
                  :picker-options="pickerOptionsEnd"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择结束时间"
                  style="width: 100%;"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>

<script>
    export default { 
      name: 'HelloWorld',
      data() { 
        return { 
          basicInfo: { 
            // 创建时间 此时间可以通过后端接口取服务器时间 或者 用 new Date().getTime()
            createDate: new Date().getTime(),
            startDate: '', // 开始时间
            endDate: '', // 结束时间
          },
          // 开始时间限制
          pickerOptionsStart: { 
            disabledDate: (time) => { 
              if (this.basicInfo.endDate) { 
                // eslint-disable-next-line max-len
                return time.getTime() > new Date(this.basicInfo.endDate).getTime() || time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
              }
              return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
            },
          },
          // 结束时间限制
          pickerOptionsEnd: { 
            disabledDate: (time) => { 
              if (this.basicInfo.startDate) { 
                return time.getTime() < new Date(this.basicInfo.startDate).getTime();
              }
              return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
            },
          },
        };
      },
      mounted() { 
    
      },
      beforeDestroy() { 
      },
      methods: { 
    
      },
    };
    </script>

[element_.gif]: /images/20221023/8c8d71b10a1a47a6871d3ed09d6bc48f.png

发表评论取消回复

表情：

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

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

相关阅读

相关 VUE-日期选择器-结束时间>开始时间

功能要求：限制结束时间选择范围，结束时间能够选择的起始日期，随着开始时间的选择而变化，也就是保证结束时间时钟>=开始时间。 ![watermark_type_ZmFu

女爷i/ 2023年08月17日 17:46/ 0 赞/ 254 阅读

相关 layui 时间插件关闭-结束不能大于开始等

laydate.render({ elem: 'year', type: 'year', format: 'yyyy',

喜欢ヅ旅行/ 2023年06月25日 10:04/ 0 赞/ 88 阅读

相关 Wdatepicker限制日期用法（开始日期不大于结束日期，并且不大于当前日期）

动态变量表格式说明 %y 当前年 %M 当前月 %d 当前日 %ld 本月最后一天 %H 当前时 %m 当前分 %s

Bertha 。/ 2023年06月05日 08:48/ 0 赞/ 98 阅读

相关 element 校验开始时间小于结束时间,结束时间大于开始时间

<el-col :span="12"> <el-form-item label="期望发货时间：" prop="orderE

男娘i/ 2023年03月12日 14:29/ 0 赞/ 171 阅读

相关 layui 日期框开始日期和结束日期不能超过当前时间并且开始时间不能超结束时间

<div class="layui-col-xs2"> 开始时间：<input type="text" name="start_date" i

素颜马尾好姑娘i/ 2023年02月28日 11:17/ 0 赞/ 71 阅读

相关 ElementUi 中日期时间插件DatePicker 限制结束时间大于开始时间且开始时间小于此刻

前景：时间插件DatePicker 格式化选择日期： format="yyyy-MM-dd HH:mm:ss"

忘是亡心i/ 2023年02月22日 08:17/ 0 赞/ 56 阅读

相关 jquery validate 验证结束时间大于开始时间

<td class="vatop rowform"> <input type="text" value="" name="start_time" id="st

末蓝、/ 2023年02月20日 06:44/ 0 赞/ 126 阅读

相关 vue elemet日期选择器设置开始时间不能大于结束时间并且大于等于今天

今天接了个需求，要求如下：开始时间大于等于当前时间也就是大于等于今天小于等于结束时间结束时间

深碍√TFBOYSˉ_/ 2022年11月05日 00:55/ 0 赞/ 465 阅读

相关设置type='date'的input标签不能选择大于当前时间的日期

做项目时在用户信息中添加了 '出生年月' 这一字段当时就直接就在页面上写了H5的新特征 input 标签 type='date' <div class="fo

ゝ一纸荒年。/ 2022年05月21日 03:41/ 0 赞/ 328 阅读

相关 iview中日期选择器开始时间与结束时间联动,设置开始时间和结束时间约束

官网例子 <template> <Row> <Col span="12"> <DatePi

太过爱你忘了你带给我的痛/ 2022年02月17日 13:45/ 1 赞/ 1073 阅读