Search code examples
djangodjango-formsdjango-widget

django date picker input in template

I´m trying to use a date picker widget from a model form in the template. I´ve seen several posts but couldn´t get it working correctly.

The one I´m trying now is: Answered question

Form.py

My form code looks like

class FormularioTareas(forms.ModelForm):
class Meta:
    model = Tareas
    widgets = {'fecha_limite': forms.DateInput(attrs={'class': 'datepicker'})}
    fields = ["destinatario", "titulo", "tarea", "resuelto", "fecha_limite"]

Template

In the template I add this script:

 /* Include the jquery Ui here */
 <script>
  $(function() {
    $( ".datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "1900:2012",
    });
  });
 </script>

And have this form call in the html

<div style="background: white;">{{ tareas_form.fecha_limite }}</div>

Jquery

I load Jquery as follows and have no problems detected in the browsers console.

<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

What I get

I found out that the picker is working, but the main text box diplays options down when focused so I didn´t see it. The text box is still behaving as a date picker and as a text box. How can I prevent this?

Any clues welcome. Thanks!

Solution

  • I used autocomplete="off" on the form so the usual text input dropdown options don´t show.