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

太过爱你忘了你带给我的痛 2022-02-17 13:45 1001阅读 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 条评论，1001人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 mysql 如何判断当前时间是否在开始时间与结束时间之间并且开始与结束时间允许为空

需求:查询进行中的活动数据进行中一共有以下几种情况: 1.开始时间为空,结束时间为空, 此结果数据将永远为进行中的数据 2.开始时间为空,结束时

柔光的暖阳◎/ 2023年01月07日 04:59/ 0 赞/ 246 阅读

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

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

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

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

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

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

相关 bootstrap-datepicker 设置开始时间小于结束

页面自行引入 jquery.min.js / bootstrap.min.js / datepicker.css / bootstrap-datepicker.js 等

Dear 丶/ 2022年04月04日 03:12/ 0 赞/ 422 阅读

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

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

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

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

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

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

相关 JAVA根据开始时间和结束时间获取天数

//开始时间和结束时间写了一半 chrome竟然自动关闭了.......太阳. 给定的日期格式是yyyy-MM-dd HH:mm:dd,开始时间和结束时间都是一样的

￡神魔★判官ぃ/ 2021年11月05日 03:52/ 0 赞/ 717 阅读