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.
Answers:
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!
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>
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
});
});
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',
]
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
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.
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!
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>
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
});
});
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',
]
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