bootStrap开始结束日期

最新推荐文章于 2024-08-08 07:45:19 发布

qq_44080257

最新推荐文章于 2024-08-08 07:45:19 发布

阅读量518

点赞数

文章标签： javascript bootstrap

本文链接：https://blog.csdn.net/qq_44080257/article/details/116461913

版权

bootstrap开始结束日期，结束日期在开始日期后面

bootStrap开始结束日期

bootStrap开始结束日期

需求：开始日期以今天日期开始往后7天可选，结束日期不能超过开始日期。

js引入

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <%--    <link href="${ctx}/css/bootstrap-datetimepicker.css">--%>
    <link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

HTML

                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <div class="input-group" id='datetimepicker1'>
                                            <span class="input-group-addon">
                                              <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                                             </span>
                                            <input type="text" onkeydown="return false" class="form-control"
                                                   id="datetimeStart"
                                                   placeholder="请选择开始日期" name="entryTime">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <div class="input-group" id='datetimepicker2'>
                                            <span class="input-group-addon">
                                              <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                                             </span>
                                            <input type="text" onkeydown="return false" class="form-control"
                                                   id="datetimeEnd"
                                                   placeholder="请选择结束日期" name="entryTime">
                                        </div>
                                    </div>
                                </div>

javaScript

$("#datetimeStart").datetimepicker({
        format: "yyyy-mm-dd",
        startDate: start_day,
        endDate: "+7d", //控制可选的最晚月份，为当前月
        autoclose: true, // 选择日期后关闭
        startView: 2,
        // 选择器所能够提供的最精确的时间选择视图
        // 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
        minView: 2,
        language: 'zh-CN', //显示语言为中文
    }).on("changeDate",function(ev){
        $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
    });

    $("#datetimeEnd").datetimepicker({
        format: "yyyy-mm-dd",
        startDate: start_day,
        autoclose: true, // 选择日期后关闭
        startView: 2,
        // 选择器所能够提供的最精确的时间选择视图
        // 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
        minView: 2,
        language: 'zh-CN', //显示语言为中文
    });

效果图

开始日期

结束日期