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 编译…...
Ender3V2S1切片器脚本配置指南：优化3D打印效果的完整教程
Ender3V2S1切片器脚本配置指南：优化3D打印效果的完整教程 【免费下载链接】Ender3V2S1 This is optimized firmware for Ender3 V2/S1 3D printers. 项目地址: https://gitcode.com/gh_mirrors/en/Ender3V2S1 Ender3V2S1是一款备受欢迎的3D打印机，…...
Vue项目发版后用户总看到旧页面？3种缓存清理方案实测（含Vue2/Vue3对比）
Vue项目发版后用户总看到旧页面？3种缓存清理方案实测（含Vue2/Vue3对比） 每次发版后，总有用户反馈"页面没变化"，这可能是浏览器缓存在作祟。作为前端开发者，我们常遇到这类问题——明明服务端已更…...
Anthropic员工失误导致Claude Code源代码泄露
事件概述：npm源映射文件暴露专有代码Anthropic公司一名员工在npm公开注册账户发布的AI编程工具Claude Code版本中意外包含源映射（source map）文件，导致该工具的完整专有源代码暴露。AI专家指出，这种失误存在重大安全风…...
Flowise语音交互扩展：Whisper+TTS构建全模态助手
Flowise语音交互扩展：WhisperTTS构建全模态助手 1. 引言：为什么需要语音交互？ 想象一下这样的场景：你正在厨房做饭，手上沾满了面粉，突然想到一个技术问题需要查询。这时候如果还要打字输入，简…...
探索marked：高性能Markdown解析的Web开发工具解决方案
探索marked：高性能Markdown解析的Web开发工具解决方案 【免费下载链接】marked A markdown parser and compiler. Built for speed. 项目地址: https://gitcode.com/gh_mirrors/ma/marked 在现代Web开发中，Markdown解析作为内容呈现的关键环节&am…...
云顶之弈策略优化工具：TFT Overlay如何提升游戏决策效率
云顶之弈策略优化工具：TFT Overlay如何提升游戏决策效率 【免费下载链接】TFT-Overlay Overlay for Teamfight Tactics 项目地址: https://gitcode.com/gh_mirrors/tf/TFT-Overlay 在云顶之弈激烈的对战中，玩家常常面临装备合成路径混乱、羁绊触发…...
3个技巧：如何用开源工具彻底解决Beyond Compare授权难题
3个技巧：如何用开源工具彻底解决Beyond Compare授权难题 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 当Beyond Compare 5的30天评估期结束后，用户常常会遇到"评估…...
PyTorch模型调试神器：用TensorBoard+torchsummary快速定位网络结构问题
PyTorch模型调试神器：用TensorBoardtorchsummary快速定位网络结构问题 当你在PyTorch中构建复杂的神经网络时，是否经常遇到以下困扰：模型训练时突然报出维度不匹配的错误，却不知道具体是哪一层出了问题？或者模型参数数…...
palworld-host-save-fix：跨环境存档迁移的技术突破与实践指南
palworld-host-save-fix：跨环境存档迁移的技术突破与实践指南 【免费下载链接】palworld-host-save-fix 项目地址: https://gitcode.com/gh_mirrors/pa/palworld-host-save-fix 一、问题溯源：幻兽帕鲁存档迁移的核心挑战 核心价值：深…...
小型工作室利器：OpenClaw+Qwen3.5-9B实现设计稿自动标注
小型工作室利器：OpenClawQwen3.5-9B实现设计稿自动标注 1. 为什么我们需要设计稿自动标注 作为一个小型设计工作室的技术负责人，我最近一直在寻找解决团队协作痛点的方案。设计师们每天都要花费大量时间手动标注PSD文件中的图层尺寸、间距和颜色值&…...