在模型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. influxdb数据库增加身份认证(windows)三

    接上一节,增加数据库身份认证 1.修改Config配置文件auth-enabled为true 2.然后重新载入最新的config配置文件打开数据库 3.验证身份认证功能是否已打开 说明身份认证功能已打 ...

  2. Java实现Excel数据批量导入数据库

    Java实现Excel数据批量导入数据库 概述: 这个小工具类是工作中的一个小插曲哦,因为提数的时候需要跨数据库导数... 有的是需要从oracle导入mysql ,有的是从mysql导入oracle ...

  3. JS 自写datapage.js 通用分页

    var Page = function () { }; Page.prototype = {     Loading: "<img src='/Content/Scripts/Data ...

  4. Rabbitmq笔记二

    消息何去何从 mandatory 和 immediate 是 channel . basicPublish 方法中的两个参数,它们都有 当消息传递过程中不可达目的地时将消息返回给生产者的功能. 当 m ...

  5. 11.Flask-钩子函数

    在Flask中钩子函数是使用特定的装饰器的函数.为什么叫做钩子函数呢,是因为钩子函数可以在正常执行的代码中,插入一段自己想要执行的代码,那么这种函数就叫做钩子函数. before_first_requ ...

  6. Python生成器实现斐波那契数列

    比如,斐波那契数列:1,1,2,3,5,8,13,21,34.... 用列表生成式写不出来,但是我们可以用函数把它打印出来: def fib(number): n, a, b = 0, 0, 1 wh ...

  7. [luogu4931]情侣?给我烧了!

    题解 有\(i\)对情侣全都不和谐那里推不出来只好写了一个暴力容斥然后大力卡常卡过去了== 容斥太过暴力,还是说正解吧 可以考虑直接计算\(n\)对情侣有\(k\)对和谐的方案数 设\(g[i]\)表 ...

  8. 在linux环境下使用itext生成pdf

    转载请注明出处 https://www.cnblogs.com/majianming/p/9537173.html 项目中需要对订单生成pdf文件,在不断的尝试之后,终于生成了比较满意的pdf文档. ...

  9. AJPFX解析关于编码ansi、GB2312、unicode与utf-8的区别

    大家平时遇到乱码问题是否有自己的一套解决方案?这篇文章就是介绍一下常用的编码方式关于编码ansi.GB2312.unicode与utf-8的区别 先做一个小小的试验: 在一个文件夹里,把一个txt文本 ...

  10. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...