django - 如何在日期字段上显示日期选择器日历

Question

这是关于如何date picker在 django 驱动的站点中使用 jQuery。

models.py是

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

我正在使用jquery datepicker.

我正在使用model formand createdtext field来成功显示日期。

但未能显示日期选择器图标。我正在使用 Django 模型表单。

Answer 1

当它在 html 中呈现时，您可以使用widget将 a 传递给表单。class然后class它将被读取javascript以呈现datepicker函数。

这是一个例子：

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

...或者widgets在使用 ModelForm 时通过 Meta 类中的属性：

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>

Answer 2

您可以使用Bootstrap-datetimepicker（不是 datepicker），这是一个示例：

1. 将必要的脚本和文件添加到您的模板中：

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

2. 使用小部件将类/ID 添加到您的日期时间字段：

   class MyTaskForm(forms.ModelForm):
   class Meta:
      model = MyTask
   fields = ['completeDateTime']
   widgets = {
       'completeDateTime': forms.DateTimeInput(attrs={'class': 'datetime-input'})
   }
   

3. 将脚本添加到您的模板/html 文件中：（注意格式，使用与 Django 相同的格式是导入的）

<script>
    $(function () {
        $('.datetime-input').datetimepicker({
            format:'YYYY-MM-DD HH:mm:ss'
        });
    });
</script>