Это мои сценарии -
models.py
from django.db import models class Leave(models.Model): ... from_date = models.DateField() to_date = models.DateField() def __str__(self): return self.name
Я хотел бы иметь указатели даты для вышеуказанных DateField (s).
DateField
Это мой шаблон формы: -
{% extends "base.html" %} {% block content %} <div class="container"> <h3> Fill out the form please! </h3> <h4> <form action="." role="form", method="POST"> {% csrf_token %} {{ form.as_p }} <button type = "submit">Submit</button> </form> </h4> </div> {% endblock %}
Пока что я сделал - Я включил это в мой base.html.
base.html
<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>
В моем файле forms.py, поскольку я использую ModelForms, я включил этот код -
class LeaveRequestForm(ModelForm): class Meta: fields = ("from_date", "to_date") model = Leave widgets = { 'from_date' : DateInput(attrs={'class': 'datepicker'}), 'to_date' : DateInput(attrs={'class': 'datepicker'}), }
Но в моем html-шаблоне не отображается ни один указатель даты. Я прочитал много других вопросов, связанных с этим, но не смог понять. Надеюсь, кто-нибудь объяснит мне подробно.
... <html> <head> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> ... </head>
Я думаю, что ваш код правильный. Однако из вашего комментария похоже, что вы используете Bootstrap. Вам нужно импортировать Jquery ДО bootstrap.min.js, а не после. Если на вашей странице есть ошибка javascript, она помешает работе средства выбора даты.
bootstrap.min.js