星期二, 4月 06, 2010

Jquery MonthPicker

最近有個需求需要使用一個只能選擇月份的選擇器,
從google大神找到有相同需求的人,利用原本的Jquery UI date picker就可以很快實現。
以下是詳細解法:


<script type="text/javascript">
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});
</script>


修改原本date picker的css讓calendar不要顯示:
.ui-datepicker-calendar {
    display: none;
    }
 
頁面配置:
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
 
Reference:jquery date picker to show month year only 
 

1 則留言:

  1. 請問怎麼再第二次點選picker的時候,保留原本選擇的時間?
    上網找了很多資料跑起來都沒有用
    謝謝~

    回覆刪除

留個話吧:)

其他你感興趣的文章

Related Posts with Thumbnails