el-date-picker日期选择限制范围的实例代码

 更新时间:2022年09月21日 09:30:53   作者:Z-HarOld  
这篇文章主要介绍了el-date-picker日期选择限制范围,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1.如果只比较两个值的话---效果是这种的

// 这是<template>的
 <el-row>
            <el-col :span="12">
              <el-form-item label="计划评审日期(起)" prop="planPsDateStart">
                <el-date-picker
                  v-model="vm.edit.data.planPsDateStart"
                  type="date"
                  :picker-options="pickerOption_start"
                  placeholder="开始时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划评审日期(止)" prop="planPsDateEnd">
                <el-date-picker
                  v-model="vm.edit.data.planPsDateEnd"
                  type="date"
                  :picker-options="pickerOption_end"
                  placeholder="结束时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

          </el-row>

// 这是<script>下的data的
  pickerOption_start: {
        disabledDate: (time) => {
          if (this.vm.edit.data.planPsDateEnd !== undefined) {
            return time.getTime() > this.vm.edit.data.planPsDateEnd
          }
        }
      },
      pickerOption_end: {
        disabledDate: (time) => {
          if (this.vm.edit.data.planPsDateStart !== undefined) {
            return time.getTime() < this.vm.edit.data.planPsDateStart
          }
        }
      }

2.如果是table一直在循环这种日期,而且只比较每一行的两个日期

效果是这样的

// 放在el-table下的两列
<el-table-column prop="lastModifyUserId" label="计划开始日期" align="center">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.planStart"
                  type="date"
                  placeholder="计划开始日期"
                  :picker-options="{disabledDate: (time) => {if (scope.row.planEnd !== undefined) {return time.getTime() > scope.row.planEnd} }}"
                  style="width: 100%"
                  :disabled="limitsDisabledFun()"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="计划结束日期" align="center">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.planEnd"
                  type="date"
                  placeholder="计划结束日期"
                  :picker-options="{disabledDate: (time) => {if (scope.row.planStart !== undefined) {return time.getTime() < scope.row.planStart} }}"
                  style="width: 100%"
                  :disabled="limitsDisabledFun()"
                />
              </template>
            </el-table-column>

原理一样的-就是把data下的pickerOption直接嵌到代码里面,不放在data中

到此这篇关于el-date-picker日期选择限制范围的实例代码的文章就介绍到这了,更多相关el-date-picker日期选择限制范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3封装Element导航菜单的实例代码

    vue3封装Element导航菜单的实例代码

    这篇文章主要介绍了vue3封装Element导航菜单的实例代码,分为菜单数据格式示例,控制导航收缩的详细代码,本文通过实例代码介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • 基于vue+h5实现车牌号输入框功能(demo)

    基于vue+h5实现车牌号输入框功能(demo)

    最近开发项目是学校校内车辆超速方面的统计检测方面的系统,在开发过程中发现有个小功能,就是用户移动端添加车牌号,刚开始想着输入框,提交时正则效验一下格式,最后感觉不方便,所以就简单自己手写了一个H5车牌号软键盘,对vue车牌号输入框实现代码感兴趣的朋友一起看看吧
    2025-03-03
  • Vue引用Swiper4插件无法重写分页器样式的解决方法

    Vue引用Swiper4插件无法重写分页器样式的解决方法

    今天小编就为大家分享一篇Vue引用Swiper4插件无法重写分页器样式的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue与ant-tree结合伪造懒加载并可以查询

    vue与ant-tree结合伪造懒加载并可以查询

    这篇文章主要为大家介绍了vue与ant-tree结合伪造懒加载并可以查询实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Vue项目配置、切换主题颜色详细教程(mixin+scss方式,简单高效)

    Vue项目配置、切换主题颜色详细教程(mixin+scss方式,简单高效)

    这篇文章主要给大家介绍了关于Vue项目配置、切换主题颜色(mixin+scss方式)的相关资料,根据预设的配色方案,在前端实现动态切换系统主题颜色,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue 动态添加class,三个以上的条件做判断方式

    vue 动态添加class,三个以上的条件做判断方式

    这篇文章主要介绍了vue 动态添加class,三个以上的条件做判断方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 详解vue axios二次封装

    详解vue axios二次封装

    这篇文章给大家分享了vue axios二次封装的相关知识点等内容以及实例代码,有兴趣的朋友可以参考学习下。
    2018-07-07
  • vue 权限管理几种实现方法

    vue 权限管理几种实现方法

    本文主要介绍了vue 权限管理几种实现方法,权限需要前后端结合,前端尽可能的去控制,更多的需要后台判断,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • vue.js根据图片url进行图片下载

    vue.js根据图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,本文就介绍了vue.js根据图片url进行图片下载,感兴趣的可以了解一下
    2021-06-06
  • vue中json格式化显示数据(vue-json-viewer)

    vue中json格式化显示数据(vue-json-viewer)

    这篇文章主要给大家介绍了关于vue中json格式化显示数据(vue-json-viewer)的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下
    2024-05-05

最新评论