如何在datefield上显示日期选择日历

Question

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

models.py是

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

我使用jquery datepicker。

我正在使用model form并创建了text field以显示日期成功。

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

Answer 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' 
           })) 

...或通过在Meta类widgets属性时使用的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> 

Answer 2

你可以使用Bootstrap-datetimepicker（不是日期选择器），这里是一个例子：

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>

使用

添加类/ ID到您的日期时间字段部件：

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

添加脚本到你的模板/ HTML文件：（注意格式，它的导入使用的Django的相同的格式）

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