how to show datepicker calendar on datefield
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.
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>
You can use Bootstrap-datetimepicker (not datepicker), here is an example:
- 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>
-
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'}) }
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>