如何在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>