標籤：bit nsa aot vcl jbpm vpn adb roi nfa
在輸入日期的時候我們經常需要日期控制項，jQueryUI的datapicker就是一個很好的日期控制項。
1.簡單的datepicker控制項
目錄結構:(要將images圖片放到css目錄下面)
代碼:
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期選取器（Datepicker） - 限制日期範圍</title> <link rel="stylesheet" href="../css/jquery-ui.css"> <script src="../js/jquery.js"></script> <script src="../js/jquery-ui.js"></script> <link rel="stylesheet" href="../css/jquery_ui.style.css"> <script>$(function() { $("#from").datepicker({ changeMonth: true, //顯示查詢月是輸入框 changeYear: true, //顯示查詢年的輸入框 showButtonPanel: true, //顯示今天按鈕 monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十月", "十二月"], dateFormat: "yy-mm-dd", //設定日期格式 dayNamesMin: ["日","一", "二", "三", "四", "五", "六"], maxDate: "+0M +0d", //最大日期可設為五個月五天之後 });});</script></head><body> <p>日期：<input type="text" id="from"></p> </body></html>
結果:
2.datepicker結合bootstrap的模態框使用
在模態框中需要設定z-index，否則會出現日期控制項被模態框覆蓋
如果想不能鍵盤輸入設定readonly屬性，但是設定readonly屬性之後，bootstrap的樣式會將其變為灰色，
需要修改背景色為白色即可。
HTML設定文字框且設為唯讀，修改背景色為白色
<div class="input-group"> <span class="input-group-addon">購 建 日 期</span> <input type="text" class="form-control datepicker" style="z-index: 9999;background-color: #ffffff" placeholder="請輸入購建日期" id="buytime2" name="buytime2" readonly="readonly"> </div>
JS動態開啟日期控制項
/* 日期控制項* */$(function() { $(".datepicker").datepicker( { // changeMonth : true, // changeYear : true, showButtonPanel : true, monthNamesShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十月", "十二月" ], dateFormat : "yy-mm-dd", // 設定日期格式 dayNamesMin : [ "一", "二", "三", "四", "五", "六", "日" ], // maxDate : "+0M +0d", // 最大日期可設為五個月五天之後 }); });
效果:
JQueryUI的datepicker日期控制項
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
