bootstrap以它优美的外观和丰富的组件，使它成为目前最流行的前端框架。在项目开发中，我们使用它的日期控件确实遇到了一些问题： 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期清空时，之前输入日期关联仍然有效 4.输入年月 5 ...
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='/images/loading.gif' data-original="jquery-1.11.1.min.js" type="text/javascript"></script> 10 <script src='/images/loading.gif' data-original="bootstrap.js" type="text/javascript" ></script> 11 <script src='/images/loading.gif' data-original="bootstrap-datetimepicker.js" type="text/javascript" ></script> 12 <script src='/images/loading.gif' data-original="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 id="startdiv" class="input-group date width100"> 81 <input id="start" 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 id="endDiv" class="input-group date width100"> 92 <input id="end" 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" id="clear" onclick="clearForm()">清空</button>103 <hr>104 105 <div id="birthMonth" class="input-group date width100">106 <input id="birthDay"107 name="birthDay" class="form-control" type="text"108 value="" placeholder="请输入出生年月" readonly="readonly"> <span109 class="input-group-addon"> <span110 class="glyphicon glyphicon-remove"></span>111 </span> <span class="input-group-addon"> <span112 class="glyphicon glyphicon-calendar"></span>113 </span>114 </div>115 116 </body>117 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：bootstrap日期控件（双日期、清空等问题解决）
关键词：日期
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
