Bootstarp日期控件-datetimepicker的用法

转载地址

https://www.cnblogs.com/dazhangli/p/9002329.html
引入文件的说明
相关的事件的写法

具体写法

首先使用日期控件（默认前提引入了Bootstrap框架的js和css）

1. 引入css文件

 <!-- Bootstrap -->
	<link rel="stylesheet" href="${request.contextPath}/public/adminlte/bower_components/bootstrap/css/bootstrap-datepicker.min.css">
	<link rel="stylesheet" href="${request.contextPath}/public/adminlte/bower_components/bootstrap/css/bootstrap-datetimepicker.min.css">

2. 引入js文件

<#--bootstrap日期控件-->
	<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datepicker.min.js"></script>
	<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
	<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datepicker.zh-CN.min.js"></script>

3. html页面

<form id="formSearch" class="form-horizontal">

                                <div class="form-group" style="margin-top:15px">
                                    <label class="control-label col-sm-1" for="txt_search_start">时间区间</label>
                                    <div class="col-sm-3">
                                        <div class='input-group date'>
                                            <input type="text" class="form-control" name="start" id="search_start" placeholder="开始时间"/>
                                            <span class="input-group-addon">到</span>
                                            <input type="text" class="form-control" name="end" id="search_end" placeholder="结束时间"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-primary" id="search">查询</button>
                                            <button type="button" class="btn btn-default" id="reset">重置</button>
                                        </div>
                                    </div>
                                </div>
                            </form>

4. js写法

<script>
$(function() {
    /*表单验证*/
    /*加载日期控件*/
    $("#search_start").datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 'linked',
        clearBtn: true,
        todayHighlight: true,
        autoclose: true
    }).on('changeDate', function (e) {
        var startTime = e.date;
        $("#search_end").datepicker('setStartDate', startTime);
    });
    $("#search_end").datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 'linked',
        clearBtn: true,
        todayHighlight: true,
        autoclose: true
    }).on('changeDate', function (e) {
        var endTime = e.date;
        $("#search_start").datepicker('setEndDate', endTime);
    });


    $('.input-date').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 'linked',
        clearBtn: true,
        todayHighlight: true,
        autoclose: true
    }).on('hide', function (e) {
        e.stopPropagation();//防止日期选择框关闭时引发模态框的关闭
    });

	//=====================当日期控件在模态框中的时候==========================
	//这个时候需要再引入jquery-latest.js
    $('.end-date').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 'linked',
        clearBtn: true,
        startDate: new Date(),
        todayHighlight: true,
        autoclose: true
    }).on('hide', function (e) {
        e.stopPropagation();//防止日期选择框关闭时引发模态框的关闭
    });
});
</script>