在模型model中用的都是時間字段DateTimeField字段，在背景進行中可以看到，在生成modelform過程中，繼承的是BaseModelForm，而其對時間字段加入了特殊的date_time屬性，這樣通過前端的bootstrapdatetimepicker來進行時間的填充。
class BaseModelForm(BaseRequestModelForm,forms.ModelForm):
def __init__(self,request,*args,**kwargs):
super().__init__(request,*args,**kwargs)
#####給modelform字段加樣式
for name,field in self.fields.items():
attrs_dict={'class':'form-control'}
if 'DateTimeField' in field.__repr__():
attrs_dict = {'class': 'form-control', 'date_time': 'datetimepicker', 'size': '16'}
field.widget.attrs.update(attrs_dict) <script>
$(':input[date_time="datetimepicker"]').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
</script> 當然這種方式是可以的，原生的django插件是這樣的，比如datetime.html
{% include "django/forms/widgets/input.html" %} input.html
<input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %}
value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %} /> 自己也可以寫一個類：
from django import forms
class DateTimePickerInput(forms.TextInput):
template_name = 'datetime_picker.html' 
class TextInput(Input):
input_type = 'text'
template_name = 'django/forms/widgets/text.html' TextInput
在之前的插件上進行修改，主要加入樣式datetime_picker.html
<div class="input-group date date_time">
<input readonly class="form-control" type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %}
value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %} />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div> 模型檔案
class UserInfo(models.Model):
username=models.CharField(max_length=32)
roles=models.ManyToManyField(to='Role')
time=models.DateTimeField(null=True,blank=True)
def __str__(self):
return self.username 在背景進行使用插件
from app01.forms.forms import widgets
# Create your views here.
class UserInfoModelForm(ModelForm):
class Meta:
model=models.UserInfo
fields="__all__"
widgets={
'time':widgets.DateTimePickerInput()
} 在前台引入樣式和js檔案
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'font-awesome/css/font-awesome.css' %}">
<link rel="stylesheet" href="{% static 'datetimepicker/css/bootstrap-datetimepicker.css' %} "/>
<script src="{% static "js/jquery-3.3.1.min.js" %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.js' %} "></script>
<script src="{% static 'datetimepicker/js/bootstrap-datetimepicker.js' %} "></script>
<script src="{% static 'datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %} "></script></head>
<body><form method="post">
{% csrf_token %}
<div class="row"><div class="col-md-2">
{{ form.time }}
</div>
</div>
<button type="submit" class="btn btn-primary">儲存</button>
</form>
<script>
$('.date_time').datetimepicker({
minView: "month",
language: "zh-CN",
sideBySide: true,
format: 'yyyy-mm-dd',
bootcssVer: 3,
startDate: new Date(),
autoclose: true,
pickerPosition: "bottom-left"
});
</script>
</body>
</html> 樣式檔案：https://files.cnblogs.com/files/shenjianping/datetimepicker.zip
作者：iveBoy
出處：http://www.cnblogs.com/shenjianping/
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須在文章頁面給出原文連接配接，否則保留追究法律責任的權利。