如何设置仅显示月份和年份的日期选择器的日期

时间:2012-01-30 17:15:28

标签: jquery jquery-ui datepicker

我正在尝试显示一个只显示月份+年份菜单的日期选择器,就像在这个Q'jquery date picker to show month year only中一样,这不是问题,但我遇到了以下问题

我希望输入文本加载日期的字符串值,如01/2011,我希望在focusin事件上,datepicker将加载显示的日期,我的意思是我希望它在2011年开启已经选择了01月,

但由于某些原因,当我点击文字输入时,原始日期“01/2011”变为“01/01/2011”

这是我的代码

            $(document).delegate("#timeSpanFrom, #timeSpanTo", "focusin", function() {
            var $this = $(this);
            var inputDate = $.datepicker.parseDate('dd/mm/yy', "01/"+$this.val());
            if (!$this.data('datepicker_enabled')) {
                $this.datepicker({
                    changeMonth : true,
                    changeYear : true,
                    showButtonPanel : true,
                    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));
                        $(".ui-datepicker-calendar").hide();
                    }
                });
                $this.datepicker({ dateFormat: 'mm/yy' }); 
                $this.datepicker('setDate', inputDate);
                $this.data('datepicker_enabled',true);
            }
        }); 

        $(document).delegate("#timeSpanFrom, #timeSpanTo", "focus", function() {
            $(".ui-datepicker-calendar").hide();
        });     

提前致谢

1 个答案:

答案 0 :(得分:6)

<style>
 .ui-datepicker-calendar {
  display: none;
 }
</style>
<script>
  $(document).ready(function(){
    $('#timeSpanFrom, #timeSpanTo').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));
        },
        beforeShow : function(input, inst) {
          var tmp = $(this).val().split('/');
          $(this).datepicker('option','defaultDate',new Date(tmp[1],tmp[0]-1,1));
          $(this).datepicker('setDate', new Date(tmp[1], tmp[0]-1, 1));
        }
    });
});
</script> 

这是一个更通用的解决方案jsfiddle