模板中的 django 日期选择器输入

django date picker input in template

我正在尝试使用模板中模型表单中的日期选择器小部件。我看过几个帖子,但无法正常工作。

我现在尝试的是:Answered question

Form.py

我的表单代码看起来像

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

模板

在模板中我添加了这个脚本:

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

并在 html

中调用此表单
<div style="background: white;">{{ tareas_form.fecha_limite }}</div>

Jquery

我按如下方式加载 Jquery,在浏览器控制台中未检测到任何问题。

<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>

我得到的

我发现选择器可以正常工作,但主文本框在聚焦时会显示选项,所以我没有看到它。文本框仍然充当日期选择器和文本框。我怎样才能防止这种情况发生?

欢迎提供任何线索。谢谢!

我在表单上使用了自动完成="off",所以通常的文本输入下拉选项不会显示。