[Django]-How do I use a datepicker on a simple Django form?

by

0👍

✅

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>
👤DeA

3👍

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
👤Bassam Msmar

2👍

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!

👤voodoo-burger

1👍

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
            });
        });
👤DBTales

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',
]
👤Viswanathan L

Leave a comment