stark组件之时间插件（九）

在模型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