Javascript month range picker
<p>can anyone suggest me a good javascript month range picker with min and max date functionality.</p>

<p>I have googled it and not able to find a good one. I have seen a JQuery UI datepicker modification. But when i am passing max and min dates it is not working properly and it showing wrong years and months.</p>

<p>below is the code which i have tried.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {  
    $( "#fromMonth, #toMonth" ).datepicker({    
            changeMonth: true,
            changeYear: true,
            showButtonPanel: false,
            dateFormat: 'M yy',
                            minDate:new Date(2010, 1 - 1, 1),
                maxDate:new Date(2012, 4 - 1, 1),   
            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));
                $(this).datepicker('refresh');
            },
            beforeShow : function(input, inst) {
                if ((datestr = $(this).val()).length &gt; 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 == "fromMonth" ? "#toMonth" : "#fromMonth";
                var option = this.id == "fromMonth" ? "maxDate" : "minDate";        
                if ((selectedDate = $(other).val()).length &gt; 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 ($("#fromMonth").val().length == 0 || $("#toMonth").val().length == 0){
            alert('All fields are required');
        }
        else{
            alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
            }
        })

});

&lt;/script&gt;
&lt;style type="text/css"&gt;
.ui-datepicker-calendar {display: none;}
&lt;/style&gt;
</code></pre>

<p>can anyone tell me what is wrong in above code or suggest a good solution?</p>
