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

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

# 官网例子 #

<template>
        <Row>
            <Col span="12">
                <DatePicker type="date" :options="options3" placeholder="Select date" style="width: 200px"></DatePicker>
            </Col>
            <Col span="12">
                <DatePicker type="date" :options="options4" placeholder="Select date" style="width: 200px"></DatePicker>
            </Col>
        </Row>
    </template>
    <script> export default { data () { return { options3: { disabledDate (date) { //返回true就禁用，false就不禁用 //这里是禁用今天之前的日子，禁用昨天之前为2*24*60*60*1000，以此类推 return date && date.valueOf() < Date.now() - 1*24*60*60*1000; } }, options4: { disabledDate (date) { //date:当前时间，这里获取所有的日子 const disabledDay = date.getDate(); //返回true就禁用，false就不禁用,这里禁用所有月份的15号 return disabledDay === 15; } } } } } </script>

# 我的应用 #

template

<Form inline ref="searchForm" :model="searchForm" :rules="searchRules">
              <FormItem prop="date">
                <DatePicker type="date" :options='startTimeOptions' placeholder="请选择开始时间" v-model="searchForm.startTime" @on-change="startTimeChange" ></DatePicker>
              </FormItem>
              <FormItem prop="date">
                <DatePicker
                  type="date"
                  :options = 'endTimeOptions'
                  placeholder="请选择结束时间"
                  v-model="searchForm.endTime"
                  @on-change="endTimeChange"
                ></DatePicker>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="mySearch()">搜索</Button>
              </FormItem>
            </Form>

javascript

[参考][Link 1]

<script>
    export default { 
      components: { },
      data() { 
        return { 
          searchForm: { 
            startTime: null,
            endTime: null
          },
          //开始时间操作
          startTimeOptions:{ },
          //结束时间操作
          endTimeOptions:{ },
        }
      },
      methods:{ 
          startTimeChange:function(e){ 
              //设置开始时间
              console.log("startTime");
              console.log(this.searchForm.startTime);
              this.searchForm.startTime = e;
              this.endTimeOptions = { 
                  disabledDate:date =>{ 
                    // disabledDate 是函数，参数为当前的日期，需要返回 Boolean 是否禁用这天。
                      let startTime = this. searchForm.startTime ? new Date(this.searchForm.startTime).valueOf()  : '';
                      return date && (date.valueOf() < startTime)
                  }
              }
          },
          endTimeChange:function(e){ 
              //设置结束时间
              console.log("endTime");
              console.log(this.searchForm.endTime);
              this.searchForm.endTime = e;
              let endTime = this.searchForm.endTime  ? new Date( this.searchForm.endTime ).valueOf()-1*24*60*60*1000 :'';
              this.startTimeOptions = { 
                  disabledDate:date =>{ 
                      return date && (date.valueOf() >endTime);
                  }
              }
          }
      }
    }
    </script>

[Link 1]: https://blog.csdn.net/weixin_41849462/article/details/86483672

发表评论取消回复

表情：

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

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

相关阅读

相关 easyui日期处理（开始时间和结束时间）

easyui日期处理（开始时间和结束时间）： <tr> <td class="bis_pxzs_form_id_table_td">发证日期：</td>

待我称王封你为后i/ 2023年10月17日 18:32/ 0 赞/ 147 阅读

相关 Java 时间截选工具（月开始与结束时间、年开始与结束时间）

> 最近项目上遇到需求，前端传过来一个时间字符，如：“2019”、“2019-01”，需要根据这个时间字符去筛选出匹配的数据，即"2019"对应了2019-01-01 00:0

太过爱你忘了你带给我的痛/ 2023年10月10日 11:14/ 0 赞/ 73 阅读

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

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

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

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

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

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

相关 java输出执行开始时间，结束时间和运行时间

在程序开发中经常会用到比较代码执行效率问题，可以用System.currentTimeMillis()方法来记录一下 long start,end; star

朴灿烈づ我的快乐病毒、/ 2023年03月06日 08:22/ 0 赞/ 62 阅读

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

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

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

相关 html开始时间和结束时间,JS中验证开始时间和结束时间

1、html html代码 \开始时间： \结束时间： //当保存时触发方法2、js js代码 function travelSave()\{ if(checkVa

太过爱你忘了你带给我的痛/ 2022年10月06日 09:55/ 0 赞/ 423 阅读

相关开始时间和结束时间，用例设计

1、日期包含的测试情况 ![20170831101628891][] 2、具体用例 ![20170831101632898][] [用例模板][Lin

亦凉/ 2022年06月09日 07:29/ 0 赞/ 327 阅读

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

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

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

相关根据开始时间与结束时间，计算季度

!/bin/bash 开始日期，时间格式形如：2019-02-28 08:20:30 startTime="2018-05-01 00:00:

青旅半醒/ 2022年01月13日 07:13/ 0 赞/ 476 阅读