16

I want to implement a django form with datepicker. I made my forms.py

from django import forms

class DateRangeForm(forms.Form):
    start_date = forms.DateField(widget=forms.TextInput(attrs=
                                {
                                    'class':'datepicker'
                                }))
    end_date = forms.DateField(widget=forms.TextInput(attrs=
                                {
                                    'class':'datepicker'
                                }))

and views.py

if request.method == "POST":
        f = DateRangeForm(request.POST)
        if f.is_valid():
            c = f.save(commit = False)
            c.end_date = timezone.now()
            c.save()
    else:
        f = DateRangeForm()
        args = {}
        args.update(csrf(request))
        args['form'] = f


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

balance.html

<div>
    <form action="" method="POST"> {% csrf_token %}
    Start Date:{{ form.start_date }}&nbsp;&nbsp; End Date:{{ form.end_date }}<br/>
    <input  type = "submit" name = "submit" value = "See Results">
    </form>

</div>

And still there is no datepicker in my input box of that form. I also tried with including my files link in the script as in my balance.html

<script src="{{ STATIC_URL }}js/jquery-1.3.2.min.js"></script>

still the datepicker is not working. But when including jquery in my html file, it also makes not to work jquery-treetable which I have implemented in my html file.

How to make the datepicker work ?

Bishnu Bhattarai
  • 2,800
  • 8
  • 36
  • 44
  • Widget will only give you datepicker on admin form. If you wish to have datepicker on page you need to have javascript activating datepicker for that form. – Ogrim Dec 20 '13 at 09:26

2 Answers2

45

You can use forms.DateInput() widget, instead of forms.TextInput():

from functools import partial
DateInput = partial(forms.DateInput, {'class': 'datepicker'})

class DateRangeForm(forms.Form):
    start_date = forms.DateField(widget=DateInput())
    end_date = forms.DateField(widget=DateInput())

To make JQuery Datepicker work, you have to initialise it:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function() {
    $('.datepicker').datepicker();
});
</script>
niekas
  • 8,187
  • 7
  • 40
  • 58
  • 2
    Thank you that was super easy. You might want to include a link to the Datepicker css: `` – Moritz Aug 06 '14 at 10:01
  • 1
    I've been almost an hour looking for different solutions, this is by far the best+simple+easy one. Thanks @niekas! – miguelfg Aug 07 '14 at 10:20
  • The code of the jquery is within the field .js you must call in the html of the template? Which way you have to call it? (I am new in django and I don't understand very well...) – jartymcfly Jun 24 '15 at 10:10
  • @niekas How about if I have a ModelForm? Does this change the situation for using this solution? – hlkstuv_23900 Sep 14 '15 at 14:44
  • @tilaprimera No it doesn't. The only difference is where to specify widget. E.g. in ModelForm you have to use ```class Meta: widgets = {'my_date': DateInput(),}```. – niekas Sep 16 '15 at 07:48
  • @niekas could you give an example for DateTimePicker as well? I can't convert this to that. Thank you! – Laci Jun 28 '16 at 14:52
  • The popup just shows date, how I can have Date+Time simultaneously? – Sajjad Rostami Jul 15 '20 at 22:05
0

The example below uses Django's generic.CreateView:

models.py file

class Task(models.Model):
    task_due_date = models.DateField()

views.py file

from bootstrap_datepicker_plus import DatePickerInput

class add_task(LoginRequiredMixin,generic.CreateView):
    model = Task
    fields = '__all__'
    def get_form(self):
        form = super().get_form()
        form.fields['task_due_date'].widget = DatePickerInput()
        return form
    template_name = 'team/add_task.html'

templates/add_task.html

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block body %}

{% bootstrap_javascript jquery='full' %}
{{ form.media }}

<h1>Add a Task</h1>
<br>
<div class="container">
  <div class="row">
    <form method="POST" action="{% url 'team:add_task' %}" id="taskForm">
        {% csrf_token %}
        {% bootstrap_form form %}
        {% buttons %}
            <button type="submit" class="btn btn-primary btn-large">Add</button>
        {% endbuttons %}
    </form>
  </div>
</div>

{% endblock %}

With the end result being:

Show end result

Ben Anton
  • 31
  • 2