How do I use a datepicker on a simple Django form?

Question

Before you mark this as a duplicate to the most famous django datepicker question on SO, hear me out. I have gone through all the questions in the first ten pages of the search results, but no one seems to be explaining anything from the beginning.

What I am looking for is the most simple way to have a datepicker on my form, I don't know if the most simple way is importing it from Admin or using an existing jQuery thing, but whatever it is, can someone please explain step by step like you would do to a baby? This, I believe will help any new programmer like me out there who's looking to learn. This is what I have so far.

My Form:

class SampleForm(forms.Form):
    date_of_birth = forms.DateField(label='Enter Date')

My View:

def dlp_test(request):
    form = SampleForm()
    return render(request, 'dlp_test.html', {'form': form})

My Template:

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit" />
</form>

This is the most simple setup anyone can start from, how do I take it from here? When someone clicks on the datefield in the HTML, I want a calendar to pop up so that they can select a date.

If achieving this requires me to have locally stored JS or jQuery files, I'd prefer the URL be embedded in the HTML, rather than downloading and then mentioning the source, because my paths are messed up right now. You can assume that I don't have anything else downloaded or installed other than Django and Python.

score 3 · Answer 1 · edited Nov 27 '22 at 11:40

I searched and struggled a lot to get the problem fixed I recommend this source.

In forms.py:

# Create custom widget in your forms.py file.
class DateInput(forms.DateInput):
    input_type = 'date'

In the same forms.py:

# Form class in forms.py
class LastActiveForm(forms.Form):
    """
    Last Active Date Form
    """
    last_active = forms.DateField(widget=DateInput)

This works perfectly with formset too.

In the template file:

{ form.as_p }

# Only without any external libraries or add-ons

score 2 · Answer 2 · answered Feb 10 '17 at 17:43

This is probably somewhat hacky, but when I want to use the jQueryUI datepicker for a specific form field I do this:

Add the stylesheet in the <head> of my template:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

Add the javascript file at the end of my template:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

The field of your form with which you want to use the datepicker will have a specific ID. In your case it will probably be id_date_of_birth. So you can select the date of birth textbox by ID and apply the datepicker to it (this assumes you are also using jQuery):

<script>
    $(document).ready(function() {
       $('#id_date_of_birth').datepicker({firstDay: 1,
          dateFormat: "dd/mm/yy",
          defaultDate: "16/06/2017",
          minDate: "16/06/2017",
          maxDate: "25/06/2017"});
    });
</script>

Note that this snippet has to come AFTER you include the javascript file. Also, I am setting some defaults you may not need - the simplest way to make it work would be:

<script>
    $(document).ready(function() {
      $('#id_date_of_birth').datepicker();
    });
</script>

Hopefully that helps you out!

@DeA glad to hear that it helps! – voodoo-burger Feb 10 '17 at 19:47 — voodoo-burger, Feb 10 '17 at 19:47

score 1 · Answer 3 · answered Nov 08 '18 at 15:48

I recently needed to add a date field with a datepicker to a form. I did this quick so please forgive a typo or 3 :)

The Jquery is referencing an id "#id_date_of_birth", but it would be better practice to make this a class like "datechooser" so you can use it on any form instead of just the "date_of_birth" form field.

Models.py

from django.db import models

class Sample(models.Model):
    date_of_birth = models.DateTimeField(help_text='date_of_birth', null=True)

Forms.py

from django.forms import ModelForm, widgets, DateTimeField, DateField, DateInput

class SampleForm(ModelForm):
    date_of_birth = DateTimeField(widget = DateInput(format='%Y-%m-%d'),
                                   input_formats=('%Y-%m-%d',),
                                   required=False)
    class Meta:
        model = Sample
        fields = ["date_of_birth",]

Views.py

from django.views import generic
from sample.models import Sample
from sample.forms import SampleForm

def dlp_test(request):
    form = SampleForm()
    form = SampleForm(initial={'date_of_birth': timezone.now().date()}) # Set an initial value for today

    return render(request, 'dlp_test.html', {'form': form})

dlp_test.html

{{ form.date_of_birth }}
{{ form.date_of_birth.errors }}

Datepicker via Jquery for a form field

Header.html

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        $( function() {
            $( "#id_date_of_birth" ).datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true
            });
        });

score 0 · Accepted Answer · answered Feb 10 '17 at 19:03

This is what I added to my template and it is working now. To someone in the future looking for an answer, here it is. Although, I must tell you that this might not scale well on large projects, you might have to use this function everywhere or something like that, but for now, this works for me.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>

<body>
<form action="." method="post">
    {% csrf_token %}
    {{form.as_p}}
    <p>Date: <input type="text" id="datepicker"></p>
    <input type="submit" value="Submit" />
</form>


<script>

      $( function()
      {
        $( "#id_date_of_birth" ).datepicker();
        $( "#datepicker" ).datepicker();
      } );
</script>


</body>
</html>

Viswanathan L · Answer 5 · 2019-01-23T10:46:36.443

0

This is what i do to get datepicker in django forms.

install bootstrap_datepicker_plus by pip command.

pip install django-bootstrap_datepicker_plus

forms.py

from .models import Hello
from django import forms
from bootstrap_datepicker_plus import DatePickerInput

class CreateForm(forms.ModelForm):
    class Meta:
        model = Hello
        fields =[            
            "Date",
        ]

    widgets = {
        'Date': DatePickerInput(),
    }

settings.py

INSTALLED_APPS = [
    'bootstrap_datepicker_plus',
]

edited Jan 23 '19 at 10:46

answered Jan 23 '19 at 10:40

Viswanathan L

193
2
14

1

You need bootstrap for this to work properly. – blockhead Dec 02 '20 at 17:18

How do I use a datepicker on a simple Django form?

5 Answers5