如何设置显示月份和年份的日期戳的日期 [英] How to set date of datepicker that displays Month and Year only

查看:130
本文介绍了如何设置显示月份和年份的日期戳的日期的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试显示一个日期戳,只显示这个年份菜单,就像这个Q' jquery日期选择器仅显示月份年份,这不是问题,但是我遇到以下问题:

I'm trying to display a datepicker that shows only month + year menu like in this Q' jquery date picker to show month year only , this is not a problem, but I'm having issue with the following

我想要输入的文本加载日期的字符串值,如01/2011,我想要在focusin事件中,datepicker将加载显示的日期,我的意思是我想要在2011年和01月份打开选择,

I want the input text to be loaded with string value of date , like 01/2011 and I want that on focusin event the datepicker will be loaded with the shown date , i mean i want it to be opened with year 2011 and month 01 already selected,

但是由于某种原因,当我点击文本输入时,原始日期01/2011更改为01/01/2011

But for some reason when i click on the text input the original date "01/2011" changes into "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();
        });     

感谢前方

推荐答案

<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

Here a more general solution jsfiddle

这篇关于如何设置显示月份和年份的日期戳的日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆