【日期控件】JQueryUI的datepicker日期控件

在輸入日期的時候咱們常常須要日期控件,jQueryUI的datapicker就是一個很好的日期控件。css

 

1.簡單的datepicker控件html

目錄結構:(要將images圖片放到css目錄下面)jquery

代碼:bootstrap

<!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>

 

 

 

結果:api

 

 

2.datepicker結合bootstrap的模態框使用ui

  在模態框中須要設置z-index,不然會出現日期控件被模態框覆蓋spa

  若是想不能鍵盤輸入設置readonly屬性,可是設置readonly屬性以後,bootstrap的樣式會將其變爲灰色,
code

 

  須要修改背景色爲白色便可。orm

 

 

 HTML設置文本框且設爲只讀,修改背景色爲白色htm

<div class="input-group">  <span class="input-group-addon">&nbsp;&nbsp;&nbsp;</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", // 最大日期可設爲五個月五天以後
            });
    
});

 

效果:

相關文章
相關標籤/搜索