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)