2012-01-30 880 views
3

我想显示一个datepicker只显示像这个Q'jquery date picker to show month year only这样的月份+年菜单,这不是一个问题,但我有问题以下如何设置datepicker的日期只显示月份和年份

我想输入文本加载日期的字符串值,如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(); 
     });  

感谢

+0

则可以创建一个的jsfiddle? – 2012-01-30 17:24:22

+0

那么,您是否希望datepick在弹出窗口中显示月份和年份,或者与当前月份中的日期一起显示? – Cheery 2012-01-30 18:12:53

+0

@SérgioMichels:不能做jsfiddle atm:/ @Cheery:我很喜欢弹出窗口(隐藏日子)我希望输入字段只显示月/年而不是日/月/年输入字段以及从日期选择器中选择日期 – Daniel 2012-01-30 18:26:47

回答

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

+0

Thx,但它似乎只在一个方向工作http:///jsfiddle.net/TXm9e/从日期选择器中选择日期并再次打开日期选择器后,先前选择的值无效(原始日期正在日期选择器中显示) – Daniel 2012-01-30 18:52:08

+0

@Daniel对不起,请稍等要做的事情。检查代码的更新版本。最好是使输入字段只读:) – Cheery 2012-01-30 20:48:07

+0

再次感谢,看起来是正确的方式,任何想法为什么年份下拉菜单只包含2011年突然? http://jsfiddle.net/XsRUF/? – Daniel 2012-01-30 21:08:50

相关问题