bootstrap日期控件，双日期、清空等问题解决
bootstrap以它优美的外观和丰富的组件，使它成为目前最流行的前端框架。在项目开发中，我们使用它的日期控件确实遇到了一些问题：
1.日期控件后面两个图标点击触发失效
2.双日期关联问题
3.双日期清空时，之前输入日期关联仍然有效
4.输入年月
5.图标不显示（这个直接在引入图标的文件里搜url地址，修改地址就可以解决）
下面的代码都会一一解决。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5
6 <link rel="stylesheet" href="bootstrap.css" type="text/css" />
7 <link rel="stylesheet" href="bootstrap-datetimepicker.css" type="text/css" />
8
9 <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
10 <script src="bootstrap.js" type="text/javascript" ></script>
11 <script src="bootstrap-datetimepicker.js" type="text/javascript" ></script>
12 <script src="bootstrap-datetimepicker.zh-CN.js" type="text/javascript" ></script>
13
14 <title>bootstrap日期</title>
15 <style>
16
17 </style>
18 <script type="text/javascript">
19 $(function(){
20
21 //输入开始日期和结束日期
22 //定位div上的id，不是input上id，否则后面两个小图标会失效
23 $("#startdiv").datetimepicker({
24 pickerPosition : "bottom-left",
25 language : 'zh-CN',
26 format : "yyyy-mm-dd",
27 weekStart : 1,
28 todayBtn : 1,
29 autoclose : 1,
30 todayHighlight : 1,
31 startView : 2,
32 minView : 2,
33 forceParse : 0
34 });
35 $("#endDiv").datetimepicker({
36 pickerPosition : "bottom-left",
37 language : 'zh-CN',
38 format : "yyyy-mm-dd",
39 weekStart : 1,
40 todayBtn : 1,
41 autoclose : 1,
42 todayHighlight : 1,
43 startView : 2,
44 minView : 2,
45 forceParse : 0
46 });
47
48 //输入年月
49 $("#birthMonth").datetimepicker({
50 language: 'zh-CN',
51 format: 'yyyy-mm',
52 autoclose: true,
53 // todayBtn: true, 今天提示
54 startView: 'year',
55 minView:'year',
56 maxView:'decade'
57 });
58
59 $('#startdiv').unbind("change");
60 $('#startdiv').change(function(){
61 $('#endDiv').datetimepicker('setStartDate', $("#start").val());
62 });
63 $('#endDiv').unbind("change");
64 $('#endDiv').change(function(){
65 $('#startdiv').datetimepicker('setEndDate', $("#end").val());
66 });
67 });
68 function clearForm(){
69 $('#start').val('');
70 $('#end').val('');
71 //用于解决清空后，前后日期还会关联的问题
72 $('.input-group-addon:has(span.glyphicon-remove)').click();
73 }
74 </script>
75
76 </head>
77 <body>
78 <h1>bootstrap日期控件</h1>
79 <hr/>
80 <div class="input-group date width100">
81 <input
82 name="start" class="form-control" type="text"
83 value="" placeholder="请输入开始日期" readonly="readonly"> <span
84 class="input-group-addon"> <span
85 class="glyphicon glyphicon-remove"></span>
86 </span> <span class="input-group-addon"> <span
87 class="glyphicon glyphicon-calendar"></span>
88 </span>
89 </div>
90 <br>
91 <div class="input-group date width100">
92 <input
93 name="end" class="form-control" type="text"
94 value="" placeholder="请输入结束日期" readonly="readonly"> <span
95 class="input-group-addon"> <span
96 class="glyphicon glyphicon-remove"></span>
97 </span> <span class="input-group-addon"> <span
98 class="glyphicon glyphicon-calendar"></span>
99 </span>
100 </div>
101 <br>
102 <button type="button" class="btn btn-sm btn-warning" onclick="clearForm()">清空</button>
103 <hr>
104
105 <div class="input-group date width100">
106 <input
107 name="birthDay" class="form-control" type="text"
108 value="" placeholder="请输入出生年月" readonly="readonly"> <span
109 class="input-group-addon"> <span
110 class="glyphicon glyphicon-remove"></span>
111 </span> <span class="input-group-addon"> <span
112 class="glyphicon glyphicon-calendar"></span>
113 </span>
114 </div>
115
116 </body>
117 </html>