bootstrap以它優美的外觀和豐富的組件，使它成為目前最流行的前端框架。在項目開發中，我們使用它的日期控件確實遇到了一些問題：
1.日期控件后面兩個圖標點擊觸發失效
2.雙日期關聯問題
3.雙日期清空時，之前輸入日期關聯仍然有效
4.輸入年月
5.圖標不顯示（這個直接在引入圖標的文件里搜url地址，修改地址就可以解決）
下面的代碼都會一一解決。
<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="bootstrap.css" rel="external nofollow" type="text/css" /><link rel="stylesheet" href="bootstrap-datetimepicker.css" rel="external nofollow" 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>
新聞熱點
疑難解答
圖片精選
