Thymeleaf使用bootstrap及其bootstrap相關插件（二）

接上文http://www.cnblogs.com/conswin/p/7929772.html

接下來bootstrap-datepicker的簡單使用。

1、引入添加js 和 css

2、然后是html頁面代碼，很簡單，一個標簽即可：

 <div class="rowGroup" >    
                         <label class="col-sm-1 control-label" >開始日期</label>
                         <div class="col-sm-2 ">
                            <div class="input-group"  >
                                <input type="text" class="form-control form_datetime" id="hd_begdate" name="hd_begdate"/>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
                            </div>
                         </div>
                     </div>
 <div class="rowGroup" >    
                         <label class="col-sm-1 control-label" >結束日期</label>
                         <div class="col-sm-2 ">
                            <div class="input-group"  >
                                <input type="text" class="form-control form_datetime" id="hd_enddate" name="hd_enddate"/>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
                            </div>
                         </div>
                     </div>

 

3、在JS文件中初始化，此時還可以設定開始日期不能大於結束日期

          
        $(document).ready(function() {
            
            
            //設定日期選擇格式
            $('.form_datetime').datetimepicker({
                    minView: "month", //選擇日期后，不會再跳轉去選擇時分秒 
                   language:  'zh-CN',
                   format: 'yyyy-mm-dd',
                   todayBtn: 1,
                   autoclose: 1
            }) .on("click",function(){
                     
                   //設定日期選擇開始日期需要小於結束日期
                   $("#hd_begdate").datetimepicker("setEndDate",$("#hd_enddate").val());
                   $("#hd_enddate").datetimepicker("setStartDate",$("#hd_begdate").val());

　　　　});

 效果圖：