寫在前面:
日期組件有很多,這里簡單的記錄下bootstrap的一個日期插件datetimepicker，使用方法比較簡單，基本上看一些就會了，但是還是記錄下。
這個就不過多的說了，簡單粗暴上代碼
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>datetimpicker測試</title> <!--圖標樣式--> <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" /> <link href="${baseURL}/Bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script> <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script> <script src="${baseURL}/Bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script> <script src="${baseURL}/Bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> <style type="text/css"> </style> </head> <body> <div style="height:500px;border: 1px solid #f79646"> <div> <form id="header_form" method="" action="" > <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Date</label> <input type="text" id="input_date" name="recordDate" style="border:0.5px solid #fac090"/> </form> </div> </div> </body> <script type="text/javascript"> $(function(){ $("#input_date").datetimepicker({ bootcssVer:3, //bootstrap-datetimepicker＋bootstrap v3，但這個插件使用的時候，並沒有和V3相匹配，仍然調用的是bootstrap V2的圖標 把bootcssVer的值直接設為3，否則datetimepicker不會顯示出上、下個月的箭頭 format: 'yyyy-mm-dd', minView: 'month',//設置時間選擇為年月日 去掉時分秒選擇 todayBtn: true, //如果此值為true 或 "linked"，則在日期時間選擇器組件的底部顯示一個 "Today" 按鈕用以選擇當前日期。如果是true的話，"Today" 按鈕僅僅將視圖轉到當天的日期，如果是"linked"，當天日期將會被選中。 language: 'zh-CN', autoclose: true, //當選擇一個日期之后是否立即關閉此日期時間選擇器。 keyboardNavigation: true, //是否允許通過方向鍵改變日期。 forceParse: true, //當選擇器關閉的時候，是否強制解析輸入框中的值。 todayHighlight: 1 //如果為true, 高亮當前日期 }).on("click", function () { //設置可選的最后日期為當前日期 $("#input_date").datetimepicker("setEndDate", getToday()) }); }); //獲取當前日期 function getToday(){ var today = new Date() var year = today.getFullYear(); var month = today.getMonth() + 1; var day = today.getDate(); var todayStr = year+"-"+month+"-"+day; return todayStr; } </script> </html>
代碼沒什么好說的，大概看下就懂了，也寫了很多的注釋...........