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

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

时间: 2024-08-05 05:33:35

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

Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框

作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]http://jq.qq.com/?_wv=1027&k=XVfBTo 要捐钱的就打支付宝吧:13958686678(泥瓦匠开个玩笑~) 一.前言 继续AndroidUI系列,泥瓦匠又要开始扯淡了.哈哈今天在文章头加了个支付宝账号.我也真逗,至今没收到一笔是写博客的钱.或是分享的.泥瓦匠也就挂着逗逗乐

发送消息,修改其他程序的下拉框的选择

发送消息,修改其他程序的下拉框的选择. 先说结论 public void SelectItem(int index) { COMBOBOXINFO cbi = new COMBOBOXINFO(); cbi.cbSize = System.Runtime.InteropServices.Marshal.SizeOf(cbi); if (User32.GetComboBoxInfo(Wnd, ref cbi)) { User32.SendMessage(Wnd, ComboBoxMsg.CB_SE

ExtJS表格——行号、复选框、选择模型

本篇的内容是为表格添加行号,和复选框,最后谈一下Ext的选择模型.内容比较简单,就直接上代码了.一. 设置行号   行号的设置主要问题在于删除某一行后需要重新计算行号  Ext.onReady(function() {         var cm = new Ext.grid.ColumnModel([                     new Ext.grid.RowNumberer(),           --在这里设置行号                    { header:

GridView全局仅能选择一个复选框

//全局仅能选择一个复选框 function CheckLimit(check) {            var inputs = document.getElementsByTagName("input");            for (var i = 0; i < inputs.length; i++) {                if (inputs[i].type == "checkbox") {                    in

利用js取到下拉框中选择的值

现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </summary> public enum AdministratorRole { [Display(Name = "平台管理员")] PlatformAdministrator = 1, [Display(Name = "加盟商")] JoiningTrader

jquery 下拉框左右选择

html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>下拉框左右选择</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="

robotframework+Selenium2Library 特殊下拉框的选择

4 特殊下拉框的选择   对于这种下拉框,一拉啥没有. 代码中也没有任何可操作的select option标签等.如何是好. 既然下拉框,那就总可以选择.我们输入一个名“王XX”,下拉框自动出现这样. 但是怎么选择上?代码实在没有相应的元素来操作啊. 不过,我们操作键盘,向下键,enter键,即可成功选择. 那问题就变成如何在robotframework+selenium2library中操作键盘.api给的很简单,press key  xxxx. 查了向下键的ascii为40,enter键的为

jquery实现多选框只能选择一个

jquery代码如下: 1 $(":checkbox").bind("click",function(){ 2 $(":checkbox").removeAttr("checked");//取消全选 3 $(this).attr("checked","checked");//选择一个 4 }); jquery实现多选框只能选择一个

Robotframework下拉框的选择

Robotframework下拉框的选择用到的关键字为:1.Select form List其意思是从列表中选择需要的值.例如:从该Options中选择一个时间其带的参数为:Arguments:[ locator | items]locator为该下拉框的定位,items为选择时间的值2.Select from List By Index通过索引值来选择下来框中对应的值,从0开始索引其带的参数为:Arguments:[ locator | *indexes ]locator为该下拉框的定位,in