1. 程式人生 > >jquery-ui裡面的日期控制元件 datepicker只顯示年和月

jquery-ui裡面的日期控制元件 datepicker只顯示年和月

1.jquery-ui 日期控制元件可以理解有三個部分組成。頭部包含年月兩個下拉框,中間部分包每月對應的天數,尾部包含時間(時分秒)

2.要樣式上不顯示天數通過CSS樣式控制

程式碼如下:

<style type="text/css">         .ui-datepicker-calendar {             display: none;// 不顯示日期面板         }  </style>

3.顯示年月通過js程式碼動態的顯示

 <script type="text/javascript">      $(function() {          $('#stateDate').datepicker({                  currentText:'本月',                  closeText: "關閉",                  changeMonth: true,                  changeYear: true,                  dateFormat: 'yymm',                  showButtonPanel: true,                  onClose: function(stateDate, inst) {                      var month = $("#ui-datepicker-div .ui-datepicker-month option:selected").val();//得到選中的月份值                      var year = $("#ui-datepicker-div .ui-datepicker-year option:selected").val();//得到選中的年份值                                            if(parseInt(month) + 1 < 10 ){                       var temp = '0'+ (parseInt(month) + 1);                      }else{                       var temp  = parseInt(month) + 1;                      }                      $('#stateDate').val(year+''+temp);//給input賦值,其中要對月值加1才是實際的月份                                        }              });          });      </script>

4.應用程式碼如下:

          <tr>                  <th>活動時間</th>                  <td>                     <input type="text" id="stateDate" name="stateDate" placeholder="請選擇活動時間,非必填" style="width:220px"/>                  </td>             </tr>

5:效果圖如下:

ps:時分秒的js格式需要注意點如下:

timeFormat: 'HH:mm:ss',H:表示24小時制(0-23)

timeFormat: 'hh:mm:ss',h:表示12小時制(0-11)