How to use Datepicker in django

user_1386218 0
Viewed 31316

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 ?

datepicker django jquery
2 Answers

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

user_144401550
Related