Disable JQuery Validation while Datepicker is showing the calendar

Question

The problem that I am having is that when the user opens the calendar to the jquery datepicker, and they change the year. If they then change the month, it will revert the year to what it was before.

The problem seems to be with my custom validator methods, if I remove them, then everything works again.

Here is some simplified code that illustrates the problem, I've only kept one validator method in the sample:

The html:

<ul id="messageBox">
</ul> 
<form id="form1">
  <input type="textbox" id="date" class="date" value="2010/01/10"/>
  <input type="submit" value="Submit">
</form>

The script:

 <script type="text/javascript">
    $(document).ready(function() {
      $('#date').datepicker({ 
                  changeMonth: true, 
                  changeYear: true, 
                  dateFormat: 'yy/mm/dd',  
                  showOn: 'button', 
                  buttonImage: 'calendar_button.gif', 
                  buttonImageOnly: true 
                  });

      $('#form1').validate({ 
          errorLabelContainer: "#messageBox",
          wrapper: "li"
          }); 

      $.validator.addClassRules({
            date: {
                required: true,
                minDate: true
            }
        });

      $.validator.addMethod("minDate",
          function(){
              var ourDate = $('#date').datepicker('getDate');
              if( ourDate < new Date(2005, 01, 01) ){
                  return false;
              }
              return true;
          },
          'Date is too small'
      );

    });

  </script>

Anybody have any suggestions on how to fix?

Solved:

I had to check to see if the datepicker was shown before I validated: (Here are the relevant changes)

$('#date').datepicker({ 
            changeMonth: true, 
            changeYear: true, 
            dateFormat: 'yy/mm/dd',  
            showOn: 'button', 
            buttonImage: '../../content/images/calendar/calendar_button.gif', 
            buttonImageOnly: true,
            beforeShow: function(input, inst){
              input.setAttribute('shown', true);
            },
            onClose: function(dateText, inst){
              this.setAttribute('shown', false);
            }
            });



$.validator.addMethod("minDate",
    function(){
        if( $('#date')[0].getAttribute('shown') == true ){
          return true;
        }
        var ourDate = $('#date')[0].datepicker('getDate');
        //var ourDate = new Date(2007, 04, 04);
        if( ourDate < new Date(2005, 01, 01) ){
            return false;
        }
        return true;
    },
    'Date is too small'
);