title: Javascript month range picker
body: <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>