layui laydate 从当天开始选择时间段

最新推荐文章于 2024-06-27 15:05:15 发布

hmily43

最新推荐文章于 2024-06-27 15:05:15 发布

阅读量730

点赞数

本文链接：https://blog.csdn.net/hmily43/article/details/109235303

版权

layui 时间选择器日期校验 javascript 前端开发

关键词由CSDN通过智能技术生成


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="/CSS/common.css" />
        <link rel="stylesheet" href="/layui/css/layui.css" />
    <title></title>
    <style>
        .container {
            width:100%;
            height:100%;
        }


    </style>
</head>
<body>
    <div class="container">
         <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label layui-required">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="startTime" id="startTime" lay-verify="title" autocomplete="off" placeholder="" class="layui-input programInput startTime">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-required">结束时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="endTime" id="endTime" lay-verify="title" autocomplete="off" placeholder="" class="layui-input programInput endTime">
                </div>
            </div>
        </div>

    </div>
<script src="/JS/jquery.min.js"></script>
<script src="/Layui/layui.all.js"></script>
 <script src="/JS/common.js"></script>
 <script src="/JS/base64.js"></script>

    <script>
        function timeSelectFun(start,end) {
            var startVal = "";
            var endVal = "";
            if (start) {
                startVal = start;
            } 
            if (end) {
                endVal = end;
            }

            layui.use(['laydate'], function () {
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#startTime',
                    format: 'yyyy-MM-dd',
                    min: 0,
                    max: 9999,
                    value: startVal,
                    done: function (value, date, endDate) {
                        var startDate = new Date(value).getTime();
                        var endTime = new Date($('#endTime').val()).getTime();
                        if (endTime < startDate) {
                            layer.msg('结束时间不能小于开始时间');
                            $('#endTime').val($('#startTime').val());
                        }
                    }
                })
                laydate.render({ //结束时间
                    elem: '#endTime',
                    format: 'yyyy-MM-dd',
                    value: endVal,
                    min: 0,
                    max: 9999,
                    done: function (value, date, endDate) {
                        var startDate = new Date($('#startTime').val()).getTime();
                        var endTime = new Date(value).getTime();
                        if (endTime < startDate) {
                            layer.msg('结束时间不能小于开始时间');
                            $('#endTime').val($('#startTime').val());
                        }
                    }
                })
            })

        }
        timeSelectFun();
    </script>
    </body>
</html>