使用layui在规定的期限内选择日期

时间：2022-08-15 07:03:56

　　这几天碰到了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>

相关文章