jQuery UI DatePicker for month and year selection is not working

Question

I am using jquery datepicker as monthpicker and it is working but the only problem is if I select one month from calander then it shows that month in the input field, but when i click on that input field again then it doesn't show selected month but it shows current month.

HTML

<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />

JS

$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 



            function isDonePressed(){
                            return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                        }

                        if (isDonePressed()){

                            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));
                             console.log('Done is pressed')

                        }



        }
    });
});

Here is the fiddle for my question. http://jsfiddle.net/DBpJe/5103/

Can't reproduce your problem. Your fiddle works fine for me. What really is the problem? — Abhitalks, Mar 17 '15 at 12:34
select month of december then press done, again click on input box it will show you march at the place of december. — Shivam, Mar 17 '15 at 12:36

score 4 · Accepted Answer · edited May 23 '17 at 12:15

4

You would have to alter beforeShow like below and also since the months names are in String you would have to have an array like this to map the month against number

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
beforeShow: function(input, inst) {
  inst.dpDiv.addClass('month_year_datepicker')
  if ((datestr = $(this).val()).length > 0) {
    datestr = datestr.split(" ");
    year = datestr[1];
    month = monthNames.indexOf(datestr[0]);
    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
    $(this).datepicker('setDate', new Date(year, month, 1));
    $(".ui-datepicker-calendar").hide();
  }
}

Here is demo 1

Or you can use this much better looking method to convert month to number

function getMonthFromString(mon){
   return new Date(Date.parse(mon +" 1, 2012")).getMonth()+1
}

Courtesy: SO answer

Here is demo 2

edited May 23 '17 at 12:15

Community

1
1

answered Mar 17 '15 at 12:45

Dhiraj

33,140
10
61
78

Hi @Dhiraj Bodicherla, really thanks a lot for your sharing. Based on what you did, I wanted to add a new function: "to" date mustn't be less than "from" date. But this function only works once, not always updated. Could you please help take a look at my question:http://stackoverflow.com/questions/33411152/django-jquery-month-picker-the-to-date-not-always-updated-as-later-than-from . Thanks in advance. – Héléna Oct 30 '15 at 03:23
Bodicherl, here is the fiddle:https://jsfiddle.net/torturedbypython/pLqbx61g/2/. I forked from your link and just changed some id names, then it doesn't work(but works in my computer). So here just for your reference to have a look at the code. thank. – Héléna Oct 30 '15 at 03:30

Héléna · Answer 2 · 2015-10-30T09:31:30.570

Added a new function as well: restrict the to date is later than from date,

 <script type="text/javascript">
        $(function() {
     $( "#from, #to").datepicker(
                    {
                        dateFormat: "yy/mm",
                        changeMonth: true,
                        changeYear: true,
                        showButtonPanel: true,
                        showOn: "button",
                        buttonImage: "../../static/calendar.gif",
                        buttonImageOnly: true,
                        //buttonText: "Select date",
                        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));

                            function isDonePressed(){
                                return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                            }

                            if (isDonePressed()){
                                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)).trigger('change');

                                 $('.from').focusout()//Added to remove focus from datepicker input box on selecting date
                            }
                        },

                        beforeShow : function(input, inst) {

                            inst.dpDiv.addClass('month_year_datepicker')

               if ((datestr = $(this).val()).length > 0) {
                   year = datestr.substring(datestr.length-4, datestr.length);
                   month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
                   $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                   $(this).datepicker('setDate', new Date(year, month, 1));    
               }
               var other = this.id == "from" ? "#to" : "#from";
               var option = this.id == "from" ? "maxDate" : "minDate";        
               if ((selectedDate = $(other).val()).length > 0) {
                   year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
                   month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
                   $(this).datepicker( "option", option, new Date(year, month, 1));
               }
           }
       });
       $("#btnShow").click(function(){ 
       if ($("#from").val().length == 0 || $("#to").val().length == 0){
           alert('All fields are required');
       }
       else{
           alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
           }
       }),

       <!--reset-->
       $(".reset").click(function() {
           $(this).closest('form')[0].reset()
       });

});


        </script>

Arun_SE · Answer 3 · 2015-03-17T12:55:08.077

0

There is a way to do this by setting currentdate to the datetimepicker

$("#datepicker").datepicker("setDate", currentDate);

Here is the working sample JQFAQ Topic.

edited Mar 17 '15 at 12:55

answered Mar 17 '15 at 12:30

Arun_SE

230
1
13

score 0 · Answer 4 · answered Mar 17 '15 at 12:31

0

Try like that

$('#startDate').datepicker({
    dateFormat: 'mm/yy'
});

Edit: I saw now what you said. The same is going on with that ^

answered Mar 17 '15 at 12:31

Jhonatan Gonçalves

53
4

It is working with this format but i want it in dateFromat: "MM yy" – Shivam Mar 17 '15 at 12:33
No this is not working it showing march everytime, It should show selected month. – Shivam Mar 17 '15 at 12:42

jQuery UI DatePicker for month and year selection is not working

4 Answers4