Как показать календарь datepicker на поле даты

Это касается использования jQuery date picker на сайте, работающем на django.

models.py является

from django.db import models
class holidaytime(models.Model):
    holiday_date = models.DateField()

Я использую jquery datepicker.

Я использую model form и создал text field для успешного отображения даты.

Но не отображается значок datepicker. Я использую формы модели Django.

Ответ 1

Вы можете использовать widget для передачи class в форму, когда она будет отображаться в html. Затем class будет читаться javascript для рендеринга функции datepicker.

Вот пример:

from django import forms
class HolidayTimeForm(forms.Form):
    holiday_date = forms.DateField(widget=forms.TextInput(attrs=
                                {
                                    'class':'datepicker'
                                }))

... или через атрибут widgets в классе Meta при использовании ModelForm:

class HolidayTimeForm(forms.ModelForm):

    class Meta:
        model = Holiday
        widgets = {
            'holiday_date': forms.DateInput(attrs={'class':'datepicker'}),
        }

Теперь в шаблоне:

 /* Include the jquery Ui here */
 <script>
  $(function() {
    $( ".datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "1900:2012",
      // You can put more options here.

    });
  });
  </script>

Ответ 2

Вы можете использовать Bootstrap-datetimepicker (not datepicker), вот пример:

Добавьте в ваш шаблон необходимые script и файл:

<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>