zoukankan      html  css  js  c++  java
  • 使用elementUI的日期选择框,两选择框关联时间限值

    elementui 本身也提供了在一个输入框内关联选择时间的组件,非常好使,但无奈项目需要用两个输入框去关联的选择:

                          <el-date-picker
                                          class="datepicker"
                                          size="mini"//尺寸
                                          v-model="startTimed"
                                          type="date"//日期类型
                                          value-format="timestamp"//日期返回的时间格式,时间戳
                                          :picker-options="start_date"//主要的功能,设置时间范围设定
                                          placeholder="选择开始日期">
                                        </el-date-picker>
                                        <span style="display: inline-block; 40px;font-size: 12px;text-align: center;">——</span>
                                        <el-date-picker
                                          class="datepicker"
                                          size="mini"
                                          v-model="endTimed"
                                          type="date"
                                          value-format="timestamp"
                                          :picker-options="end_date"
                                          placeholder="选择结束日期">
                                        </el-date-picker>

    在data里面:

           startTimed: "",//开始时间
                endTimed:"",//结束时间
                start_date:{//开始时间范围限定
                    disabledDate:time => {
                        if(this.endTimed) {
                            return time.getTime() > Date.now()-8.64e7 || time.getTime() >= this.endTimed;
                        }   
                        return time.getTime() > Date.now()-8.64e7;
                    }
                },
                end_date:{//结束时间范围限定
                    disabledDate:time => {
                        return time.getTime() >= Date.now()-8.64e6 || time.getTime() <= this.startTimed;
                    }
                },
           //主要是disabledDate的取值,返回值;
           //注意8.64e7和8.64e6的区别,后面的包括了当前的一天;
  • 相关阅读:
    [转]PYTHON-SCRAPY-WINDOWS下的安装笔记
    [转]Scrapy入门教程
    [转]Centos 6.5 安装 Scrapy 0.22.2成功
    Python的三个常用内置函数
    sublime连接Python的使用
    tornado-options(3)
    配置 PPP 封装和认证
    交换机验证 PVST 实验
    vlan间通信配置vtp模式
    convert expdp dmp file to SQL DDL statements
  • 原文地址:https://www.cnblogs.com/wangtaolearning/p/11219429.html
Copyright © 2011-2022 走看看