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': ''}
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组件之时间插件(九)的更多相关文章
- AngularJs的UI组件ui-Bootstrap分享(九)——Alert
alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- yii2超好用的日期组件和时间组件
作者:白狼 出处:http://www.manks.top/yii2_datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...
- 【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
- 【django之stark组件】
一.需求 仿照django的admin,开发自己的stark组件.实现类似数据库客户端的功能,对数据进行增删改查. 二.实现 1.在settings配置中分别注册这三个app # Applicatio ...
- django 之 stark组件
----------------------------------------------------------------烦恼没完没了,内心动荡不安,呜呼哀哉. 一.有个特殊的需求,需要用sta ...
- 时间插件--daterangepicker使用和配置详解
1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...
- CRM项目之stark组件
. stark也是一个app(用startapp stark创建),目标时把这个做成一个可以拔插的组件 . setting文件下INSTALLED_APPS 路径要配置好(app的注册) . 写好si ...
- python 全栈开发,Day112(内容回顾,单例模式,路由系统,stark组件)
一.内容回顾 类可否作为字典的key 初级 举例: class Foo(object): pass _registry = { Foo:123 } print(_registry) 执行输出: {&l ...
随机推荐
- P3161 [CQOI2012]模拟工厂
传送门 先枚举选择哪些订单,然后转为判定是否可行 在能完成的情况下肯定是花越多时间提高生产力越优 我们设可以有\(x\)单位时间来提高生产力,那么如果当前离下一个订单的时间为\(T\)时,这个订单要\ ...
- Go基于协程的归并排序简单实现
归并排序这个可能很多人都不知道,今天用Go语言简单的实现下,其他语言可能要基于线程来实现. //产生一个源 func ArraySource(a ...int) chan int{ out :=mak ...
- 使用python计算softmax函数
softmax计算公式: Softmax是机器学习中一个非常重要的工具,他可以兼容 logistics 算法.可以独立作为机器学习的模型进行建模训练.还可 ...
- layui配置
layui是一个全局变量,可以在任何地方访问到 layui.config 方法主配置信息(经测试好像不能添加额外属性) layui.setter读取主配置属性 layui.extend 方法增加主配置 ...
- [ZJOI2011]道馆之战
Description 口袋妖怪(又名神奇宝贝或宠物小精灵)红/蓝/绿宝石中的水系道馆需要经过三个冰地才能到达馆主的面前,冰地中的每一个冰块都只能经过一次.当一个冰地上的所有冰块都被经过之后,到下一个 ...
- Rooks LightOJ - 1005
https://vjudge.net/problem/LightOJ-1005 题意:在n*n的矩形上放k个车,使得它们不能互相攻击,求方案数. ans[i][j]表示在i*i的矩形上放j个车的方案数 ...
- 修改SolrCloud在ZooKeeper中的配置文件操作记录
修改SolrCloud在ZooKeeper中的配置文件操作记录. 命令执行目录: /opt/solr-/server/scripts/cloud-scripts/ 1.下载配置文件 ./zkcli., ...
- Android偏好设置(2)为应用定义一个偏好设置xml
1.Defining Preferences in XML Although you can instantiate new Preference objects at runtime, you sh ...
- 转如何升级oracle版本?(11.2.0.1至11.2.0.4)
dbua from 11.2,0.2 to 11.2.0.4 need 2hours 升级结果: 步骤名 日志文件名 状态 升级前操作 PreUpgrade.l ...
- UML 活动图(转载)
活动图:用于表示系统中各种活动的次序,它的应用非常广泛,即可用来描述用例的工作流程,也可用来描述类中某个方法的操作行为.常用于表示业务流程,对系统功能建模,强调对象之间的控制流.活动图是由状态图变化而 ...