How can i add a date/calender widget to django forms?

Question

I tried following these links and this but it didn't work. the widget doesn't load in the form and the js files gives 404 error in the console while it's accessible from the link. I use crispy forms to render my form.

forms.py

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

    # patient Form
    class PatientForm(ModelForm):

        birth_date = forms.DateField(label='Birth Date',widget=DateInput())
        class Meta:
            model = Patient
            exclude = ['user',]

The Template

           <h2>Add Patient</h2>
            <form method="POST" action="{% url 'patients:patient_create' %}">

                {% csrf_token %}
                 {{ form|crispy }}
                <button type="submit" class="btn btn-primary" >Add Patients</button>
                <p></p>
            </form>
</div>
    {% endblock %}

    <script>
    $(document).ready(function() {
        $('.datepicker').datepicker();
    });
    </script>

The links of js files + 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>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>

The errors in the console

Not Found: /patients/”https://code.jquery.com/jquery-1.12.4.js”
Not Found: /patients/”https://code.jquery.com/ui/1.12.1/jquery-ui.js”
[18/Jul/2019 15:29:09] "GET /patients/%E2%80%9Dhttps://code.jquery.com/jquery-1.12.4.js%E2%80%9D HTTP/1.1" 404 6742
[18/Jul/2019 15:29:09] "GET /patients/%E2%80%9Dhttps://code.jquery.com/ui/1.12.1/jquery-ui.js%E2%80%9D HTTP/1.1" 404 6760
Not Found: /patients/”https://code.jquery.com/jquery-1.12.4.js”
[18/Jul/2019 15:29:10] "GET /patients/%E2%80%9Dhttps://code.jquery.com/jquery-1.12.4.js%E2%80%9D HTTP/1.1" 404 6742
Not Found: /patients/”https://code.jquery.com/ui/1.12.1/jquery-ui.js”
[18/Jul/2019 15:29:10] "GET /patients/%E2%80%9Dhttps://code.jquery.com/ui/1.12.1/jquery-ui.js%E2%80%9D HTTP/1.1" 404 6760
Not Found: /favicon.ico

in my code i have many jquery versions can that cause the problem.I want a widget that's more user friendly than jquery ui so is there any other method that i can use to add a widget with the same way of jquery ui ?

score 1 · Answer 1 · answered Jul 18 '19 at 13:48

1

in your forms.py:

class DateInput(forms.DateInput):
     input_type = 'date'

class PatientForm(ModelForm):


        class Meta:
            model = Patient
            exclude = ['user',]
            widgets = {
                'birth_date':DateInput,
               }

Try this

answered Jul 18 '19 at 13:48

Shubham Devgan

609
6
18

now i get this error 'functools.partial' object has no attribute 'is_hidden' – Jul 18 '19 at 13:55
have you removed this line `DateInput = partial(forms.DateInput, {'class': 'datepicker'})` if not try removing it – Shubham Devgan Jul 18 '19 at 13:57
so how can i refer to `DateInput` in the class ? – Jul 18 '19 at 14:00
@AMMARRADY I'm not getting what you are trying to say – Shubham Devgan Jul 18 '19 at 14:03
`DateInput` is defined in the line you want me to delete. – Jul 18 '19 at 14:11
yeah,but maybe that's what is causing error, try defining it the way I answered. Just copy paste my code instead of your,and tell me result – Shubham Devgan Jul 18 '19 at 14:14

score 0 · Answer 2 · answered Jul 18 '19 at 14:11

The problem was that the modern browsers won't show a select date without making the type to date

here's what solved it for me

DateInput = partial(forms.DateInput, {'class': 'datepicker','type': 'date'})
# patient Form
class PatientForm(ModelForm):

    birth_date = forms.DateField(label='Birth Date',widget=DateInput())
    class Meta:
        model = Patient
        exclude = ['user',]

How can i add a date/calender widget to django forms?

2 Answers2