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

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关开始时间结束时间，全程的运行时间的计算

long start = System.currentTimeMillis(); for (int i = 0; i < 10 ; i++) {

以你之姓@/ 2022年05月10日 03:33/ 0 赞/ 300 阅读

相关 JS判断开始时间小于结束时间案例

一.html 预计入住时间:<input class="pub_textAlign_right" placeholder="例如，${memoDate }" type

亦凉/ 2022年04月15日 06:21/ 0 赞/ 368 阅读

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

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

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

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

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

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

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

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

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

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

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

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