码迷,mamicode.com
首页 > 其他好文 > 详细

使用elementUI的日期选择框,两选择框关联时间限值

时间:2019-07-20 23:28:51      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:idt   get   date   div   val   splay   width   注意   isa   

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;width: 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的区别,后面的包括了当前的一天;

 

使用elementUI的日期选择框,两选择框关联时间限值

标签:idt   get   date   div   val   splay   width   注意   isa   

原文地址:https://www.cnblogs.com/wangtaolearning/p/11219429.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!