How to set date of datepicker that displays Month and Year only

Question

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

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,

But for some reason when i click on the text input the original date "01/2011" changes into "01/01/2011"

here is my code

            $(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();
        });

Thanks ahead

So, do you want the datepick to show only months and years in popup or together with days in the current month? — Cheery, Jan 30 '12 at 18:12
@ Sérgio Michels : cant do the jsfiddle atm :/ @Cheery : i'm fine with the popup (hide the days) i want that the input field will display month/year only instead of days/month/year when i click on the input filed and upon date selection from date picker — Daniel, Jan 30 '12 at 18:26
added jsfiddle , its not completely the same, but i;m @home now , so its the best i can do http://jsfiddle.net/kWMV6/ — Daniel, Jan 30 '12 at 18:48

score 8 · Accepted Answer · edited Jan 31 '12 at 00:01

8

<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>

Here a more general solution jsfiddle

edited Jan 31 '12 at 00:01

Daniel

36,833
10
119
200

answered Jan 30 '12 at 18:45

Cheery

16,063
42
57

Thx, but it seems to work in one direction only http://jsfiddle.net/TXm9e/ after selecting a date from date picker and opening the datepicker again , the previously selected value got no effect (the original date is being show in the date picker) – Daniel Jan 30 '12 at 18:52
@Daniel Sorry for the delay, have some other things to do. check an updated version of the code. It is better to make input field read-only :) – Cheery Jan 30 '12 at 20:48
thanks again,looks like it the right way, any idea why the year drop down menu contains only 2011 all of the sudden? http://jsfiddle.net/XsRUF/ ? – Daniel Jan 30 '12 at 21:08
@Daniel My test sample shows from 2001 to 2021. Your link shows the same too. Basically is shows setDate +-10 years – Cheery Jan 30 '12 at 21:14
Thanks , it works 100% in Chrome and IE , but in FF it does not :| it the year drop down shows 2011 only... weird... If you got any ideas I'll really appreciate it, (b.t.w with 2012 it work ok in FF too , but with 2011 or 2009 or 2010 it does not , it allows to select only the specified year in the html code) – Daniel Jan 30 '12 at 21:27
1

@Daniel It has to do with the jsfiddle. You've selected there an outdated version of jQuery and UI. Check this one http://jsfiddle.net/XsRUF/1/ – Cheery Jan 30 '12 at 21:33

How to set date of datepicker that displays Month and Year only

1 Answers1

Linked