这几天碰到了layui中的日期与时间这个，本以为很简单的，可是又一个需求是这样的，有两个日期选择框，第一个日期选择框要求最小日期不得小于当前日期，第二个日期选择框要求最小日期为第一个日期选择框的选中日期，最大日期须在24小时内，本以为不会很难。

　　于是按照惯例，先渲染第一个日期选择框，然后渲染第二个日期选择框，结果后来发现这样行不通。还是直接上具体的代码吧。

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>layer</title>

    <link rel="stylesheet" href="../dist/css/layui.css">

</head>

<body>

    <form action="" class="layui-form">

        <div class="layui-form-item">

            <div class="layui-inline">

                <label for="" class="layui-form-label">时间段</label>

                <div class="layui-input-inline">

                    <input type="text" class="layui-input" id="startTime">

                </div>

                <div class="layui-form-mid">到</div>

                <div class="layui-input-inline endTime">

                    <input type="text" class="layui-input" id="endTime">

                </div>

            </div>

        </div>

    </form>

    <script src="../dist/jquery.min.js"></script>

    <script src="../dist/layui.js"></script>

    <script>

        let [form,laydate] = ["",""];

        var now = new Date();

        var start = now.getTime();  // 将当前时间转换为时间戳

        layui.use(['form','laydate'],function(){

            form = layui.form;

            laydate = layui.laydate;

            laydate.render({

                elem:'#startTime',

                type:'datetime',  // 可选择年、月、日、时、分、秒

                min:start,   // 规定最小日期

                done:function(value){

                    // value为第一个日期选择框选择的日期

                    const start2 = new Date(value).getTime();

                    const end = start2 + 24*60*60*1000;

                    const elemId = "endTime" + new Date().getTime();

                    // 当第一个日期选择框选择完日期后，将类选择器endTime里的内容清空，给它重新添加内容，且新添加元素的id是动态改变的，这样第二个日期框在第一个日期框每次选择完后会重新渲染

                    $('.endTime').empty().append(`<input type="text" class="layui-input" id="${elemId}">`)

                    laydate.render({

                        elem:`#${elemId}`,

                        type:'datetime',

                        min:start2,  // 最小日期不得小于第一个日期选择框的值

                        max:end  // 最大日期在24小时内

                    })

                }

            });

        })

    </script>

</body>

</html>

　　虽然这样能解决问题，能保证第二个日期框最小值为第一个日期框的选择值，最大值为第一个日期选择值的24小时内。但是中间存在着一个bug，那就是只有选择第一个日期框后，才能更改第二个日期框中的值，显然这不是我们想要的，我们想要的是，可以直接更改第二个日期框的值，同时满足条件：最小值为第一个日期框的选择值，最大值为第一个日期选择值的24小时内。那么这时候就要对第二个日期框再渲染一次，只不过这次不是在第一个日期框选择后的回调函数里渲染，而是与第一个日期框一起渲染。那么此时的代码为：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>layer</title>

    <link rel="stylesheet" href="../dist/css/layui.css">

</head>

<body>

    <form action="" class="layui-form">

        <div class="layui-form-item">

            <div class="layui-inline">

                <label for="" class="layui-form-label">时间段</label>

                <div class="layui-input-inline">

                    <input type="text" class="layui-input" id="startTime">

                </div>

                <div class="layui-form-mid">到</div>

                <div class="layui-input-inline endTime">

                    <input type="text" class="layui-input" id="endTime">

                </div>

            </div>

        </div>

    </form>

    <script src="../dist/jquery.min.js"></script>

    <script src="../dist/layui.js"></script>

    <script>

        let [form,laydate] = ["",""];

        var now = new Date();

        var start = now.getTime();  // 将当前时间转换为时间戳

        layui.use(['form','laydate'],function(){

            form = layui.form;

            laydate = layui.laydate;

            laydate.render({

                elem:'#startTime',

                type:'datetime',  // 可选择年、月、日、时、分、秒

                min:start,   // 规定最小日期

                done:function(value){

                    // value为第一个日期选择框选择的日期

                    const start2 = new Date(value).getTime();

                    const end = start2 + 24*60*60*1000;

                    const elemId = "endTime" + new Date().getTime();

                    // 当第一个日期选择框选择完日期后，将类选择器endTime里的内容清空，给它重新添加内容，且新添加元素的id是动态改变的，这样第二个日期框在第一个日期框每次选择完后会重新渲染

                    $('.endTime').empty().append(`<input type="text" class="layui-input" id="${elemId}">`)

                    laydate.render({

                        elem:`#${elemId}`,

                        type:'datetime',

                        min:start2,  // 最小日期不得小于第一个日期选择框的值

                        max:end  // 最大日期在24小时内

                    })

                }

            });

            laydate.render({

                elem:'#endTime',

                type:'datetime',

                min:,   // 该值为第一个日期框的值，一般是从服务器端获取

                max:    // 该值为第一个日期框值的24小时内，可用时间戳来解决

            })

        })

    </script>

</body>

</html>

使用layui在规定的期限内选择日期的更多相关文章

  1. ExtJs内的datefield控件选择日期过后的事件监听select

    [摘要]: 选择时间过后我们为什么需要监听事件?一般有这样一种情况,那就是用于比较两个时间大小或者需要判断在哪个时间点上需要做什么样的操作.基于这样的种种情况,我们很有必要琢磨一下datefield控 ...

  2. jquery 时间控件怎么能禁止输入只能选择日期？

    jsp一个input输入框用的是easyui时间控件,现在问题是如何是这个input只能点击选择日期,而禁止手动输入 解决方法::: 在日期的input标签里面添加::::editable=" ...

  3. [js开源组件开发]js手机联动选择日期 开源git

    js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...

  4. asp.net 弹出式日历控件 选择日期 Calendar控件

    原文地址:asp.net 弹出式日历控件 选择日期 Calendar控件 作者:逸苡 html代码: <%@ Page Language="C#" CodeFile=&quo ...

  5. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  6. easyUI日期框返回到月份，选择日期也只到月份

    easyUI日期框返回到月份,选择日期也只到月份,不是原创,引用了园友的一篇文章,自己写下来,以便不时之需,谢谢. 1 $(function () { $('#date').datebox({ onS ...

  7. mysql的内建日期处理函数

    下面的表格列出了MySQL 中最重要的内建日期函数: 函数 描述 NOW() 返回当前的日期和时间 CURDATE() 返回当前的日期 CURTIME() 返回当前的时间 DATE() 提取日期或日期 ...

  8. http://www.layui.com/doc/modules/laydate.html实时通信\日期、==插件

    8520**ali chengyouli http://www.layui.com/doc/modules/laydate.html实时通信\日期.==插件

  9. JMeter 内置日期(时间)函数总结

    JMeter 内置日期(时间)函数总结   by:授客 QQ:1033553122 1. 测试环境 apache-jmeter-3.3 下载地址: http://jmeter.apache.org/c ...

随机推荐

  1. linux下制作镜像文件

    第一:制作iso镜像的方法: 把/dev/cdrom目录制作为镜像,名字为/root/rh1.iso 方法1:dd if=/dev/cdrom of=/root/rh1.iso 方法2:#cat /d ...

  2. inode 详解

    1.inode 解析: 存储文件元信息(文件创建者,创建日期,大小等)的区域叫做inode即 索引节点. 2.inode 内容: 文件字节数.拥有者UserID,GroupID,读写执行权限,时间戳, ...

  3. SSIS 实用表达式部分总结

    下面,列出一些实用的表达式: 1,路径取文件名 RIGHT([FilePath],FINDSTRING(REVERSE([FilePath]),) - ) RIGHT(@[User::FilePath ...

  4. 人工神经网络，支持任意数量隐藏层，多层隐藏层，python代码分享

    http://www.cnblogs.com/bambipai/p/7922981.html------误差逆传播算法讲解 人工神经网络包含多种不同的神经网络,此处的代码建立的是多层感知器网络,代码以 ...

  5. JSP EL隐含对象

    JSP 内置对象 JSP EL隐含对象 描述 page pageScope page 作用域 request requestScope request 作用域 session sessionScope ...

  6. ASP.NET Core学习之四 在CentOS上部署.net core

    一.安装CentOs 以前在大学学过linux,但是对命令行总是有一种深深的排斥感,几年之后,还是又回来了. 1.下载 现在没法FQ,就算是FQ网速也是蜗牛一样慢,我使用阿里云的镜像站进行下载速度还是 ...

  7. selenium WebDriver 八种定位方式源码

    /* * 多种元素定位方式 */ package com.sfwork; import java.util.List; import org.openqa.selenium.By; import or ...

  8. 深入理解cookie和session

    cookie和session在java web开发中扮演了十分重要的作用,本篇文章对其中的重要知识点做一些探究和总结. 1.cookie存在于浏览器 随意打开一个网址,用火狐的调试工具,随意选取一个链 ...

  9. jQuery 入门

    不能正常引用jQuery-2.2.4.min.js所以代码没生效 jQuery 是一个 JavaScript 函数库.jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操 ...

  10. Java多线程窥探

    1.程序,进程,线程 标准定义: