这几天碰到了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. 求字符数组逆序数（poj1007）

    int InversionNumber(char* s,int len) { int ans=0;  //s逆序数 int A,C,G;  //各个字母出现次数,T是最大的,无需计算T出现次数 A=C ...

  2. （转） Linux中profile、bashrc、bash_profile之间的区别和联系

    原文地址:http://blog.csdn.net/chenchong08/article/details/7833242 /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登 ...

  3. React学习之路（二）

    状态(state) 状态就是组件描述某种显示情况的数据,由组件自己设置和更改,也就是所组件自己维护,目的就是为了在不同状态下使组件的显示不同 在组件中只能通过getInitialState的钩子函数来 ...

  4. Python：名片管理系统

    字符串和列表学完, 自己试着写了一个非常简单的名片管理系统, 新萌尝试, 大佬们不要喷, 修改名片的功能我偷了个懒, 因为我不知道怎么通过定义下标,然后通过下标来修改列表内的字符串 我的思路是,把用户 ...

  5. chrome调试工具高级不完整使用指南（优化篇）

    上一篇文章我们说了chrome调试工具的一些比较基础功能的用法,接下来我们要在这一篇文章中说一说,其他一些chrome调试工具的使用方法 2.1.5 Network模块 在netWork模块中,大致上 ...

  6. 【转】LDA数学八卦

    转自LDA数学八卦 在 Machine Learning 中,LDA 是两个常用模型的简称: Linear Discriminant Analysis 和 Latent Dirichlet Alloc ...

  7. Mixin Network Whitepaper

    [译] Mixin Network(网络) 看到了李笑来老师牵头的 Mixin, 也仔细查看了 Mixin 白皮书 ,决定翻译过来 构造一个最大的,并且对开发者友好的移动区块链网络,连接现有的所有区块 ...

  8. java_web学习(八) jdbc连接mysql

    首先我们来看一下主机与数据库的关系图 实际上是两台服务器 一:下载数据库驱动jar包存放WebContent—WEB-INF—lib目录下 1.2步骤 1. 2. 3 4. 1.3 将jar包导入到W ...

  9. Java内存管理及对Java对象管理

    Java内存管理及对Java对象管理 1Java内存管理 1.1Java中的堆和栈 通常来说,人们会将Java内存氛围栈内存(Stack)和堆内存(Heap). 栈内存用来保存基本类型的变量和对象的引 ...

  10. deeplearning.ai 改善深层神经网络 week3 超参数调试、Batch正则化和程序框架 听课笔记

    这一周的主体是调参. 1. 超参数:No. 1最重要,No. 2其次,No. 3其次次. No. 1学习率α:最重要的参数.在log取值空间随机采样.例如取值范围是[0.001, 1],r = -4* ...