django项目实战四(django+bootstrap实现增删改查)进阶时间控件
接上一篇《django项目实战三(django+bootstrap实现增删改查)进阶分页》
知识点:
使用bootstrap-datepicker实现时间控件
一、优化layout.html模版
主要新增2个块
{% block css %}{% endblock %}{% block js %}{% endblock %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">{% block title %}{% endblock %}<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}"/><style>.navbar{border-radius: 0;}</style>{% block css %}{% endblock %}
</head>
<body><nav class="navbar navbar-default"><div class="container"> <!-- <div class="container-fluid"> --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">测试管理系统</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="/depart/list/">部门管理</a></li><li><a href="/user/list/">用户管理</a></li><li><a href="/case/list/">用例管理</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">春天的菠菜 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">个人资料</a></li><li><a href="#">我的信息</a></li><li role="separator" class="divider"></li><li><a href="#">注销</a></li></ul></li></ul></div></div>
</nav><div>{% block content %}{% endblock %}</div><script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
二、下载导入bootstrap-datepicker
1、下载
略
2、放入对应文件夹目录

三、引入
1、在user_add.html引入
知识点:id_create_time是modelform框架依据字段自动生成的id
如果是非modelform框架,可以未入职时间字段加个id="dt" 然后id_create_time替换成dt
{% extends 'layout.html' %}
{% load static %}
{% block title %}<title>新增用户(ModelForm)</title>
{% endblock %}
{% block css %}<link rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.css' %}" />
{% endblock %}
{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">新增用户</h3></div><div class="panel-body"><form method="post" novalidate>{% csrf_token %}{% for field in form %}<div class="form-group"><label>{{ field.label }}</label>{{ field }}<span style="color: red">{{ field.errors.0 }}</span></div>{% endfor %}<button type="submit" class="btn btn-primary">保 存</button></form></div></div></div>{% endblock %}
{% block js %}<script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"> </script><script src="{% static 'plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"> </script><script>$(function () {$('#id_create_time').datepicker({format: 'yyyy-mm-dd',startDate: '0',language: 'zh-CN',autoclose: true});})</script>
{% endblock %}
2、在user_edit.html
{% extends 'layout.html' %}
{% load static %}
{% block title %}<title>编辑用户</title>
{% endblock %}
{% block css %}<link rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">{% endblock %}
{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">编辑用户</h3></div><div class="panel-body"><form method="post" novalidate>{% csrf_token %}{% for field in form %}<div class="form-group"><label>{{ field.label }}</label>{{ field }}<span style="color: red">{{ field.errors.0 }}</span></div>{% endfor %}<button type="submit" class="btn btn-primary">保 存</button></form></div></div></div>
{% endblock %}
{% block js %}<script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.js' %}"> </script><script src="{% static 'plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"> </script><script>$(function () {$('#id_create_time').datepicker({format: 'yyyy-mm-dd',startDate: '0',language: 'zh-CN',autoclose: true});})</script>
{% endblock %}

相关文章:
django项目实战四(django+bootstrap实现增删改查)进阶时间控件
接上一篇《django项目实战三(djangobootstrap实现增删改查)进阶分页》 知识点: 使用bootstrap-datepicker实现时间控件 一、优化layout.html模版 主要新增2个块 {% block css %}{% endblock %}{% block js %}{% endblock %} {% load static…...
Jetpack之ViewModel
The ViewModel class is a business logic or screen level state holder. 上面是官方给的定义,ViewModel 类是业务逻辑或屏幕级状态持有者。 一、业务逻辑持有者 在此之前,无论是MVC模式,还是MVP模式,在视图层,都会…...
追梦之旅【数据结构篇】——详解C语言动态实现顺序表
详解C语言动态实现顺序表~😎前言🙌顺序表概念及结构🙌功能函数的具体实现分析:🙌尾插函数具体实现:尾删函数具体实现:头插函数具体实现:头删插函数具体实现:任意插函数具…...
xss基础
目录标题一、XSS的原理二、XSS漏洞分类1、反射型xss2、存储型XSS3、基于DOM的XSS三、XSS漏洞的危害及验证四、XSS漏洞的黑盒测试五、XSS漏洞的白盒测试一、XSS的原理 跨站脚本攻击XSS(Cross Site Scripting),为了不和层叠样式表(…...
移动WEB开发二、流式布局
零、文章目录 文章地址 个人博客-CSDN地址:https://blog.csdn.net/liyou123456789个人博客-GiteePages:https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee:https://gitee.com/bluecusliyou/TechLearnGithub:https:…...
分享在线预约系统制作步骤_在线预约链接怎么做
在微信小程序上进行在线预约,不管是商家还是顾客,都可以自由选择时间,顾客还可以通过预约小程序,了解到所选服务的详情和功能特色,不必等到去店内听介绍,顾客能节省等候时间,商家能解放招待人力…...
【每日一题Day125】LC1326灌溉花园的最少水龙头数目 | 动态规划 贪心
灌溉花园的最少水龙头数目【LC1326】 在 x 轴上有一个一维的花园。花园长度为 n,从点 0 开始,到点 n 结束。 花园里总共有 n 1 个水龙头,分别位于 [0, 1, ..., n] 。 给你一个整数 n 和一个长度为 n 1 的整数数组 ranges ,其中 …...
C# FFmpeg推流Vlc.DotNet拉流优化参数
FFmpeg是流媒体开源神器,视频转换、剪裁包括推流,无所不能,很多系统都是基于其开发的。拉流可以用FFplay,但是不利于集成到自己的代码中,因此拉流选择了Vlc.DotNet。 在使用中,仅使用默认参数,…...
pnpm v8版本升级变化关注点(前瞻速攻版)
前言 pnpm v8.0.0-alpha.0 版本已经发布,包含少量变化,但其中还是有令人在意的点的。 本文将默认读者拥有大部分 pnpm v7 版本的知识储备,进行 v8 版本的前瞻速攻。 安装方法 目前通过指定 Tag 方式可以安装 v8 alpha 版: npm…...
Python基础-环境安装
Python安装1.下载PythonPython网址:https://www.python.org/进入Python官网,点击Downloads,选择自己对应的操作系统(此处以Windows为例)在左侧的稳定发行版中,选择一个3.5版本以上的,然后点击对…...
重载、重写、重构概念辨析
首先,重载、重写、重构都表现为方法名相同 重载 重载(overload),表示同一类的方法之间的关系,至少有以下其中一种情况 参数个数不同参数类型不同参数顺序不同 注意,返回值类型不同不能作为重载依据 重…...
第九章 - 多表查询(join,left join 等)与合并查询(union union all)
第九章 - 多表查询(join,left join 等)与合并查询(union)交叉链接(笛卡尔积)内连接查询外连接查询左链接: left join右链接:right join组合查询 union & union all使…...
matplotlib学习笔记(持续更新中…)
目录 1. 安装,导入 2. figure,axes(图形,坐标图形) 2.1 figure对象 2.2 axes对象 2.3 代码演示 2.3 subplot() 方法 3. 图表的导出 3.1 savefig() 方法 3.2 代码演示 1. 安装,导入 pip install m…...
STM32 SystemInit()函数学习总结
拿到程序后如何看系统时钟?User文件夹——system_stm32f4xx程序,先找systemcoreclock(系统时钟)但是这里这么多个系统时钟应该如何选择?点击魔法棒,然后点击C/C可以看到define的是F40_41XXX.USE这一款 ,对应着就找出了…...
【Spring Boot 原理分析】- 自动配置
【Spring Boot 原理分析】- 自动配置 Condition 注解 Condition 是 Spring 4.0 增加的条件判断功能,通过这个功能可以实现选择的创建 Bean 操作 👑 我们在使用 Spring 的时候,只需导入某个依赖的坐标,就可以直接通过 Autwired 注…...
简明易懂的JVM理解
文章目录简明易懂的JVM和GC理解写在前面Java虚拟机(JVM)的组成基本介绍结构类加载子系统(ClassLoader SubSystem)介绍类加载过程类加载过程小结双亲委派模型(Parent-Delegation Model)简介优点Java9的类加载的委派关系变动双亲委派模型小结运行时数据区(Runtime Data Areas)介绍…...
新考纲下的PMP考试有多难?
PMP考试在6月25号考试结束后,在网上引起一片哗然,新考纲领域与考点的转变使得考试难度加大:PMP考试敏捷和混合内容比重大,考试难度加大很多;考题更加注重考生的知识应用能力,领域更宽; 接下来我…...
朗润国际期货:知名投行/大佬打Call记
知名投行/大佬打Call记 2023年知名投行/大佬看好哪些投资标的 中国股市 高盛(2023年1月):将上涨15% 花旗(2023年1月):上半年会成为投资两点 摩根大通(2022年11月):M…...
遗传算法及Python实现
0 建议学时 4学时 1 人工智能概述 2020中国人工智能产业年会在苏州召开,会上发布的《中国人工智能发展报告2020》显示,过去十年(2011-2020) ,中国人工智能专利申请量达389571件,占全球总量的74.7%,位居世界第一。 报…...
零基础 Ubuntu 20.04.01 下搭建51单片机开发环境[开源编译器SDCC]
原创首发于CSDN,转载请注明出处,谢谢! 文章目录为何会在Linux下开发单片机个人系统环境与所用开发板安装开源编译器 sdccSTC MCU ISP 闪存工具 stcgal 的安装单片机代码的编译与测试|编写主代码 main.c|使用 sdcc 编译…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
