首页 > 其他分享 >el-date-picker type="daterange" 根据动态给的开始日期,结束日期,设置范围内可选

el-date-picker type="daterange" 根据动态给的开始日期,结束日期,设置范围内可选

时间:2024-07-04 15:08:24浏览次数:18  
标签:picker el getTime element 日期 time date dateCopy

注意:
1、element ui和element plus的时间禁用属性不同,element ui用picker-options,element plus用disabled-date。

原文链接:https://blog.csdn.net/weixin_44358713/article/details/136539121

    <z-form ref="versionForm" :model="form" class="refresh-form" size="mini" :inline="true">
      <div v-for="(item, index) in form" :key="index">
        <div class="table_name">
          {{ form[index].tableName }}
        </div>
        <z-form-item label="数据日期" label-width="80px">
          <z-date-picker
            v-model="form[index].date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            :clearable="false"
            style="width: 100%"
            :picker-options="pickerOptions(form[index].dateCopy)"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </z-date-picker>
        </z-form-item>
  data() {
    return {
      dialogVisible: false,
      form: [
        {
          tableName: '',
          date: [],
          dateCopy: [],
          batchNo: '',
          pushDate: '',
        },
      ],
      batchNoOptions: [],
      pickerOptions: (dateCopy) => {
        console.log(dateCopy);
        return {
          disabledDate(time) {
            let isDis = time.getTime() < new Date(dateCopy[0]).getTime();
            let afterDis = time.getTime() > new Date(dateCopy[1]).getTime();
            return isDis || afterDis;
          },
        };
      },
    };
  },

 

标签:picker,el,getTime,element,日期,time,date,dateCopy
From: https://www.cnblogs.com/xiaonanxun/p/18283890

相关文章

  • AI算法04-自组织映射神经网络Self-Organizing Map | SOM
    自组织映射神经网络自组织映射(SOM)或自组织特征映射(SOFM)是一种类型的人工神经网络(ANN),其使用已训练的无监督学习以产生低维(通常为二维),离散的表示训练样本的输入空间,称为地图,因此是一种减少维数的方法。自组织映射与其他人工神经网络不同,因为它们应用竞争学习而不是纠错学习(例如......
  • element 手写季度组件
    组件:<template><divclass="time_quarter"><markstyle="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"v-show="showSeason"@click.stop="showSeason=false&q......
  • selenium14_POM设计模式
    Python+Selenium+Unittest+Git+Jenkins框架,POM设计模式1.common文件夹:二次封装原有方法的文件base.py;存放通过的文件,如:生成报告的文件2.pages文件夹:page元素的定位;调用前边的封装方法,或者继承,再次封装一些页面的操作方法:如输入用户名密码点击登陆等操作。(或者元素定位,操作......
  • selenium16_文件上传
    inupt标签可以直接通过send_keys上传文件非input标签,AutoIt上传1.安装AutoIt2.AutoIt菜单介绍SciTEScriptEditor编辑器,用于编写AutoIt脚本AutoItWindowsInfo元素定位器,用于识别Windows控件信息RunScript执行AutoIt脚本CompileScriptto.exe将AutoIt生成可执行文件......
  • selenium12_HTML测试报告(run_all)
    在run_all.py中编写如下脚本:#cording:utf-8importunittestimportosfromcommonimportHTMLTestRunner_cn#os.path.dirname:获取当前文件所在的文件夹路径。os.path.realpath(__file__):根据不同的系统自动获取绝对路径,包含文件名cur_path=os.path.dirname(os.p......
  • selenium13_二次封装
    classBase():def__init__(self,driver):self.driver=driverself.timeout=10self.t=0.5#查找元素的另一种方法:deffindElementNew(self,locator):#定位到元素,返回元素对象,没有定位到返回timeout异常ele=......
  • 【Elasticsearch】Elasticsearch动态映射与静态映射详解
    文章目录......
  • 【中国工程院院士、IEEE Fellow等大咖云集】第六届复杂系统数据驱动优化国际会议(DOCS
    第六届复杂系统数据驱动优化国际会议(DOCS2024)将于2024年8月16-18日在中国杭州召开,组委会诚挚邀请与复杂系统数据驱动优化相关的广泛领域的研究人员、从业人员和学者踊跃投稿、积极参会交流。1.会议官方会议官网:www.ic-docs.org时间地点:2024年8月16-18日中国-......
  • Shell编程
    技术背景Linux操作系统的普及和重要性不断增加,特别是在服务器管理和开发工作中。Shell编程作为Linux系统中的一种脚本语言,允许用户自动化任务和执行复杂的命令序列,是每个Linux用户和系统管理员必须掌握的技能。资源特色这份《Shell编程思维导图》具备以下特色:系统性学......
  • selenium07_select下拉框
    有以下2种方法定位下拉框: 方法一:最基本的元素定位方法,定位下拉框,再定位下拉框中的元素 方法二:fromselenium.webdriver.support.selectimportSelectel=driver.find_element_by_id("nr")  #先定位到下拉框Select(el).select_by_index(0)  #通过下拉框中元素的......