jquery month picker: setting an initial min/max range conflicts with "from" <"to" function

Question

I use jQuery month picker (without date) with format like:201110.

I want to set a min date (see in code), so first define it in django forms.py the date-min, then parse this date to html. There is a min/max range first. (though this not work now).

Then in order to realize the "to" date is always later than "from" date， I need to use min/max function also, then it overrides the previous month ranges I set from SQL.

The currenct situation is I could realize "to" date > "from" date. But the min date(coming from MYSQL) doesn't work now.

How could I solve this conflict, please tell me. Thanks in advance

Thanks for your reply in advance.

<script type="text/javascript">
    $(function() {
 $( "#from, #to" ).datepicker({ 
       changeMonth: true,
       changeYear: true,
       showButtonPanel: true,
       dateFormat: 'yy MM',
       minDate: $(this).date-min, ///it is here doesn't work, the minDate is coming from Django

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


    </script>

How I define my min-date in dJango:

In models.py

class XXX(models.Model):
    start_date=models.DateField(auto_now_add=True)
    end_date=models.DateField(auto_now_add=True)

In forms.py

class Meta:
        model = XXX
        fields = ('start_date','end_date')
        date_min=XXX.objects.all().aggregate(Min('date'))   <this field is NOT defined in models.py, is that OK?; and format is like 2011-11-01 -->

        widgets = {
                'start_date': forms.DateInput(attrs={'class':'datepicker',
                                                     'date-min':date_min,                                                   
                                                     }),                          
            }

Answer 1

First of all, you should do

$(this).attr('date-min')

instead of

$(this).date-min

to get date-min attribute.

Your next problem is that you are calling $(this) inside the dom ready callback, where this refers to the document object not the #from or #to element.

The solution you are looking for is

$(function() {
    $( "#from, #to" ).each(function() {
        $(this).datepicker({
            ....
            minDate: $(this).attr('date-min'),
            ....
        })
    })
) 

And I'm not sure about this line:

date_min=XXX.objects.all().aggregate(Min('date'))   <this field is NOT defined in models.py, is that OK?; and format is like 2011-11-01 -->

It's OK that you have a field in form which is not described in related model, but don't you wand to get something like Min('start-date') or Min('end-date') here? And does your form defined as something like

class XXXForm(forms.ModelForm):
    class Meta:
        ....

not just

class Meta:
    ....