stark组件之时间插件

Posted shenjianping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

 

以上是关于stark组件之时间插件的主要内容,如果未能解决你的问题,请参考以下文章

django 之 stark组件

stark组件之批量操作模仿Django的admin

CRM项目之stark组件

11 stark组件之delete按钮filter过滤

stark组件之删除页面内容搭建

stark组件开发之提取公共视图函数