bootstrap日期控件（双日期、清空等问题解决）

　　bootstrap以它优美的外观和丰富的组件，使它成为目前最流行的前端框架。在项目开发中，我们使用它的日期控件确实遇到了一些问题：

　　　　1.日期控件后面两个图标点击触发失效

　　　　2.双日期关联问题

　　　　3.双日期清空时，之前输入日期关联仍然有效

　　　　4.输入年月

　　　　5.图标不显示（这个直接在引入图标的文件里搜url地址，修改地址就可以解决）

　　下面的代码都会一一解决。

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <link rel="stylesheet" href="bootstrap.css" type="text/css" />

 <link rel="stylesheet" href="bootstrap-datetimepicker.css" type="text/css" />

 <script src="jquery-1.11.1.min.js" type="text/javascript"></script>

 <script src="bootstrap.js" type="text/javascript" ></script>

 <script src="bootstrap-datetimepicker.js" type="text/javascript" ></script>

 <script src="bootstrap-datetimepicker.zh-CN.js" type="text/javascript" ></script>

 <title>bootstrap日期</title>

 <style>

 </style>

 <script type="text/javascript">

 $(function(){

     //输入开始日期和结束日期

     //定位div上的id，不是input上id，否则后面两个小图标会失效

     $("#startdiv").datetimepicker({

         pickerPosition : "bottom-left",

         language : 'zh-CN',

         format : "yyyy-mm-dd",

         weekStart : 1,

         todayBtn : 1,

         autoclose : 1,

         todayHighlight : 1,

         startView : 2,

         minView : 2,

         forceParse : 0

     });

     $("#endDiv").datetimepicker({

         pickerPosition : "bottom-left",

         language : 'zh-CN',

         format : "yyyy-mm-dd",

         weekStart : 1,

         todayBtn : 1,

         autoclose : 1,

         todayHighlight : 1,

         startView : 2,

         minView : 2,

         forceParse : 0

     });

     //输入年月

     $("#birthMonth").datetimepicker({

         language:  'zh-CN',

         format: 'yyyy-mm',

         autoclose: true,

         // todayBtn: true, 今天提示

         startView: 'year',

         minView:'year',

         maxView:'decade'

     });

     $('#startdiv').unbind("change");

     $('#startdiv').change(function(){

         $('#endDiv').datetimepicker('setStartDate', $("#start").val());

     });

     $('#endDiv').unbind("change");

     $('#endDiv').change(function(){

         $('#startdiv').datetimepicker('setEndDate', $("#end").val());

     });

 });

 function clearForm(){

     $('#start').val('');

     $('#end').val('');

     //用于解决清空后，前后日期还会关联的问题

     $('.input-group-addon:has(span.glyphicon-remove)').click();

 }

     </script>

 </head>

 <body>

     <h1>bootstrap日期控件</h1>

     <hr/>

                                         <div id="startdiv" class="input-group date width100">

                                             <input id="start"

                                                 name="start" class="form-control" type="text"

                                                 value="" placeholder="请输入开始日期" readonly="readonly"> <span

                                                 class="input-group-addon"> <span

                                                 class="glyphicon glyphicon-remove"></span>

                                             </span> <span class="input-group-addon"> <span

                                                 class="glyphicon glyphicon-calendar"></span>

                                             </span>

                                         </div>

                                         <br>

                                         <div id="endDiv" class="input-group date width100">

                                             <input id="end"

                                                 name="end" class="form-control" type="text"

                                                 value="" placeholder="请输入结束日期" readonly="readonly"> <span

                                                 class="input-group-addon"> <span

                                                 class="glyphicon glyphicon-remove"></span>

                                             </span> <span class="input-group-addon"> <span

                                                 class="glyphicon glyphicon-calendar"></span>

                                             </span>

                                         </div>

                                         <br>

                                         <button type="button" class="btn btn-sm btn-warning" id="clear" onclick="clearForm()">清空</button>

                                         <hr>

                                         <div id="birthMonth" class="input-group date width100">

                                             <input id="birthDay"

                                                 name="birthDay" class="form-control" type="text"

                                                 value="" placeholder="请输入出生年月" readonly="readonly"> <span

                                                 class="input-group-addon"> <span

                                                 class="glyphicon glyphicon-remove"></span>

                                             </span> <span class="input-group-addon"> <span

                                                 class="glyphicon glyphicon-calendar"></span>

                                             </span>

                                         </div>

 </body>

 </html>