28

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Monk L
  • 3,358
  • 9
  • 26
  • 41

2 Answers2

40

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>
FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
Amit Yadav
  • 1,861
  • 2
  • 20
  • 27
  • 3
    You probably should use a class, not an id. What if you have more than one copy of this form on the page, or two dates in the same form? – GDorn Jul 10 '13 at 01:25
  • Couldn't get this to work. The answer below worked, and provided me with more flexibility. – Devin B. Apr 19 '19 at 19:47
15

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>

  1. 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'})
}

  2. 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>
Lushang
  • 191
  • 1
  • 4