在模型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': ''}

            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组件之时间插件（九）的更多相关文章

  1. AngularJs的UI组件ui-Bootstrap分享（九）——Alert

    alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" ...

  2. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  3. yii2超好用的日期组件和时间组件

    作者:白狼 出处:http://www.manks.top/yii2_datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  4. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  5. 【django之stark组件】

    一.需求 仿照django的admin,开发自己的stark组件.实现类似数据库客户端的功能,对数据进行增删改查. 二.实现 1.在settings配置中分别注册这三个app # Applicatio ...

  6. django 之 stark组件

    ----------------------------------------------------------------烦恼没完没了,内心动荡不安,呜呼哀哉. 一.有个特殊的需求,需要用sta ...

  7. 时间插件--daterangepicker使用和配置详解

    1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...

  8. CRM项目之stark组件

    . stark也是一个app(用startapp stark创建),目标时把这个做成一个可以拔插的组件 . setting文件下INSTALLED_APPS 路径要配置好(app的注册) . 写好si ...

  9. python 全栈开发，Day112(内容回顾,单例模式,路由系统,stark组件)

    一.内容回顾 类可否作为字典的key 初级 举例: class Foo(object): pass _registry = { Foo:123 } print(_registry) 执行输出: {&l ...

随机推荐

  1. Java标准输入流system.in报错: java.util.NoSuchElementException解决方法

    我的程序大概是这样的: main()主函数里面,调用两个自定义的方法,这里我们称之为方法a和方法b: 主函数main()里有一个:Scanner scanner = new Scanner(Syste ...

  2. 只需3步，即可将你的Chromium Edge 浏览器设置成中文

    最近,Chromium Edge 浏览器推出了添加语言包的功能,于是我们可以轻松将其界面设置成中文的. 第1步: 升级浏览器到最新版 在Chromium Edge 浏览器的地址栏中输入: edge:/ ...

  3. VS2010编译错： #error : This file requires _WIN32_WINNT to be #defined at least to 0x0403...的解决方法

        最近拿到一个别人的工程,是使用VS.net创建的,而我的机器上只有vs2010,于是用自带的转换工具将它转换成vs2010的工程,转换之前我就很担心,怕转换完后会出问题,但是没有办法,我实在是 ...

  4. php 文件锁flock解决并发

    方案一:使用文件锁排它锁 flock函数用于获取文件的锁,这个锁同时只能被一个线程获取到,其它没有获取到锁的线程要么阻塞,要么获取失败 在获取到锁的时候,先查询,如果查询成功则进行操作,然后释放锁 f ...

  5. /bin,/sbin,/usr/sbin,/usr/bin 目录之简单区别

    /bin,/sbin,/usr/sbin,/usr/bin 目录 这些目录都是存放命令的,首先区别下/sbin和/bin: 从命令功能来看,/sbin 下的命令属于基本的系统命令,如shutdown, ...

  6. 构造水题 Codeforces Round #206 (Div. 2) A. Vasya and Digital Root

    题目传送门 /* 构造水题:对于0的多个位数的NO,对于位数太大的在后面补0,在9×k的范围内的平均的原则 */ #include <cstdio> #include <algori ...

  7. 题解报告：poj 2823 Sliding Window（单调队列）

    Description An array of size n ≤ 106 is given to you. There is a sliding window of size k which is m ...

  8. webform 基础一

    WebForm是微软开发的一款产品,它将用户的请求和响应都封装为控件.让开发者认为自己是在操作一个windows界面.极大地提高了开发效率.区别于dreamweaver,可以用代码写,也可以把控件像w ...

  9. 掌握Spark机器学习库-07-回归算法原理

    1)机器学习模型理解 统计学习,神经网络 2)预测结果的衡量 代价函数(cost function).损失函数(loss function) 3)线性回归是监督学习

  10. jQuery 点击查看 收起

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...