how to show datepicker calendar on datefield

Question

This is regarding how to use a jQuery date picker in a django powered site.

models.py is

from django.db import models class holidaytime(models.Model):     holiday_date = models.DateField() 

I am using jquery datepicker.

I am using a model form and created text field for displaying date sucessfully.

But failed to show a datepicker icon. I am using Django model forms.

Answer 1

You can use widget to pass a class to the form when it will be rendered in the html. Then that class will be read by javascript to render the datepicker function.

Here is an example:

from django import forms class HolidayTimeForm(forms.Form):     holiday_date = forms.DateField(widget=forms.TextInput(attrs=                                 {                                     'class':'datepicker'                                 })) 

... or through the widgets attribute in the Meta class when using ModelForm:

class HolidayTimeForm(forms.ModelForm):      class Meta:         model = Holiday         widgets = {             'holiday_date': forms.DateInput(attrs={'class':'datepicker'}),         } 

Now in template:

 /* Include the jquery Ui here */  <script>   $(function() {     $( ".datepicker" ).datepicker({       changeMonth: true,       changeYear: true,       yearRange: "1900:2012",       // You can put more options here.      });   });   </script> 

Answer 2

You can use Bootstrap-datetimepicker (not datepicker), here is an example:

1. Add necessary script & file into your template:

<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker.min.css" rel="stylesheet">  <script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>  <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>  <script src="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>

2. add class/id to your datetime fields by using widget:

   class MyTaskForm(forms.ModelForm): class Meta:    model = MyTask fields = ['completeDateTime'] widgets = {     'completeDateTime': forms.DateTimeInput(attrs={'class': 'datetime-input'}) } 

3. Add the script to your template/html file: (NOTICE the format, it's import to use the same format of the Django)

<script>      $(function () {          $('.datetime-input').datetimepicker({              format:'YYYY-MM-DD HH:mm:ss'          });      });  </script>