Search code examples
pythonjquerydjangojquery-ui-datepicker

datepicker is not working in django?


Script added in base.html

$(function() {
  $('.datepicker').datepicker({
    format: 'mm/dd/yyyy',
    // startDate: '-3d'
    startDate: "2013-02-14 10:00",
    changeMonth: true,
    changeYear: true,
    yearRange: "1900:2012",
    uiLibrary: 'bootstrap4',
    autoclose: true,
  });
})

My class MessLeaveForm in forms.py

class MessLeaveForm(forms.ModelForm):

    departure_date = forms.DateField()
    arrival_date = forms.DateField(widget=forms.DateInput(format='%d/%m/%Y'))
    departure_time = forms.TimeField(widget=forms.TimeInput(format='%H:%M'))
    arrival_time = forms.TimeField(widget=forms.TimeInput(format='%H:%M'))
    verification = forms.ChoiceField(choices=BOOL_VALUES,initial="Pending",widget=forms.HiddenInput(),required=False)
    approval = forms.ChoiceField(choices=BOOL_VALUES,initial="Pending",widget=forms.HiddenInput(),required=False)
    status = forms.ChoiceField(choices=BOOL_VALUES,initial="Pending",widget=forms.HiddenInput(),required=False)
    hostel_suscribed = forms.ChoiceField(choices = HOSTEL_CHOICES,required = True)
    mess_manager_doc = forms.FileField(required=False)
    faculty_doc = forms.FileField(required=False)

    class Meta:
        model = MessLeaveModel
        fields = ('idNo','hostel_suscribed','departure_date','departure_time','arrival_date','arrival_time','mess_manager_doc','faculty_doc','verification','approval','status')
        widgets = {
            'departure_date': forms.DateInput(attrs={'class':'datepicker'}),
        }

My model MessLeaveModel in models.py

class MessLeaveModel(models.Model):
    # user = models.ForeignKey(OccupantDetails,null=True,on_delete=models.CASCADE)
    idNo = models.ForeignKey(OccupantDetails,on_delete = models.CASCADE)
    username = models.CharField(max_length=255, null=False,blank=False,default="")
    hostel_suscribed = models.CharField(max_length=255,choices = HOSTEL_CHOICES,null=True)
    departure_date = models.DateField()
    arrival_date = models.DateField()
    departure_time = models.TimeField(null = True,blank = True)
    arrival_time = models.TimeField(null=True,blank=True)
    faculty_doc = models.FileField(upload_to='documents/',null=True,blank=True)
    mess_manager_doc = models.FileField(upload_to='documents/',null=True,blank=True)
    verification = models.CharField(max_length=255,choices=BOOL_VALUES,default="Pending")
    approval = models.CharField(max_length=255,choices=BOOL_VALUES,default="Pending")
    status = models.CharField(max_length=255,choices=BOOL_VALUES,default="Pending")
    comment = models.CharField(max_length=255,blank=True,null=True,default="")


    def __str__(self):
        return '%s_%s_%s' %(self.idNo,self.departure_date,self.arrival_date)

My Django HTML where I am taking departure date

<label class="control-label col-sm-2"> Departure Date</label>
<div class="col-sm-10">{{form.departure_date}}

I am trying to add datepicker in departure_date field of MessLeaveModel model. I have added the relevant script in base.html and added this class through widget in meta class of MessLeaveForm. I have extended base.html in my messLeaveForm.html and taking input there. The datepicker in not responding at all.


Solution

  • You may want to look at the django-tempus-dominus package, which contains Bootstrap 4 datepicker widgets for Django:

    https://pypi.org/project/django-tempus-dominus/

    It's a set of shims for the jQuery Tempus Dominus library, the full-rewrite successor to Bootstrap Date Picker. Good luck!