当前位置：首页 > news >正文

django项目实战四（django+bootstrap实现增删改查）进阶时间控件

news 2026/5/29 5:25:35

接上一篇《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…...

编程日记 2023/2/21 18:01:38

Jetpack之ViewModel

The ViewModel class is a business logic or screen level state holder. 上面是官方给的定义，ViewModel 类是业务逻辑或屏幕级状态持有者。一、业务逻辑持有者在此之前，无论是MVC模式，还是MVP模式，在视图层，都会…...

编程日记 2023/2/21 18:00:30

追梦之旅【数据结构篇】——详解C语言动态实现顺序表

详解C语言动态实现顺序表~😎前言🙌顺序表概念及结构🙌功能函数的具体实现分析：🙌尾插函数具体实现：尾删函数具体实现：头插函数具体实现：头删插函数具体实现：任意插函数具…...

编程日记 2023/2/21 17:59:23

xss基础

目录标题一、XSS的原理二、XSS漏洞分类1、反射型xss2、存储型XSS3、基于DOM的XSS三、XSS漏洞的危害及验证四、XSS漏洞的黑盒测试五、XSS漏洞的白盒测试一、XSS的原理跨站脚本攻击XSS（Cross Site Scripting），为了不和层叠样式表（…...

编程日记 2023/2/21 17:58:18

移动WEB开发二、流式布局

零、文章目录文章地址个人博客-CSDN地址：https://blog.csdn.net/liyou123456789个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee：https://gitee.com/bluecusliyou/TechLearnGithub：https:…...

编程日记 2023/2/21 17:57:08

分享在线预约系统制作步骤_在线预约链接怎么做

在微信小程序上进行在线预约，不管是商家还是顾客，都可以自由选择时间，顾客还可以通过预约小程序，了解到所选服务的详情和功能特色，不必等到去店内听介绍，顾客能节省等候时间，商家能解放招待人力…...

编程日记 2023/2/21 17:56:02

【每日一题Day125】LC1326灌溉花园的最少水龙头数目 | 动态规划贪心

灌溉花园的最少水龙头数目【LC1326】在 x 轴上有一个一维的花园。花园长度为 n，从点 0 开始，到点 n 结束。花园里总共有 n 1 个水龙头，分别位于 [0, 1, ..., n] 。给你一个整数 n 和一个长度为 n 1 的整数数组 ranges ，其中 …...

编程日记 2023/2/21 17:54:54

C# FFmpeg推流Vlc.DotNet拉流优化参数

FFmpeg是流媒体开源神器，视频转换、剪裁包括推流，无所不能，很多系统都是基于其开发的。拉流可以用FFplay，但是不利于集成到自己的代码中，因此拉流选择了Vlc.DotNet。在使用中，仅使用默认参数，…...

编程日记 2023/2/21 17:53:47

pnpm v8版本升级变化关注点（前瞻速攻版）

前言 pnpm v8.0.0-alpha.0 版本已经发布，包含少量变化，但其中还是有令人在意的点的。本文将默认读者拥有大部分 pnpm v7 版本的知识储备，进行 v8 版本的前瞻速攻。安装方法目前通过指定 Tag 方式可以安装 v8 alpha 版： npm…...

编程日记 2023/2/21 17:52:40

Python基础-环境安装

Python安装1.下载PythonPython网址：https://www.python.org/进入Python官网，点击Downloads，选择自己对应的操作系统（此处以Windows为例）在左侧的稳定发行版中，选择一个3.5版本以上的，然后点击对…...

编程日记 2023/2/21 17:51:33

重载、重写、重构概念辨析

首先，重载、重写、重构都表现为方法名相同重载重载（overload），表示同一类的方法之间的关系，至少有以下其中一种情况参数个数不同参数类型不同参数顺序不同注意，返回值类型不同不能作为重载依据重…...

编程日记 2023/2/21 17:50:27

第九章 - 多表查询（join，left join 等）与合并查询（union union all）

第九章 - 多表查询（join，left join 等）与合并查询（union）交叉链接（笛卡尔积）内连接查询外连接查询左链接： left join右链接：right join组合查询 union & union all使…...

编程日记 2023/2/21 17:49:19

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…...

编程日记 2023/2/21 17:48:11

STM32 SystemInit()函数学习总结

拿到程序后如何看系统时钟？User文件夹——system_stm32f4xx程序，先找systemcoreclock(系统时钟）但是这里这么多个系统时钟应该如何选择?点击魔法棒，然后点击C/C可以看到define的是F40_41XXX.USE这一款 ，对应着就找出了…...

编程日记 2023/2/21 17:47:03

【Spring Boot 原理分析】- 自动配置

【Spring Boot 原理分析】- 自动配置 Condition 注解 Condition 是 Spring 4.0 增加的条件判断功能，通过这个功能可以实现选择的创建 Bean 操作 👑 我们在使用 Spring 的时候，只需导入某个依赖的坐标，就可以直接通过 Autwired 注…...

编程日记 2023/2/21 17:45:55

简明易懂的JVM理解

文章目录简明易懂的JVM和GC理解写在前面Java虚拟机(JVM)的组成基本介绍结构类加载子系统(ClassLoader SubSystem)介绍类加载过程类加载过程小结双亲委派模型(Parent-Delegation Model)简介优点Java9的类加载的委派关系变动双亲委派模型小结运行时数据区(Runtime Data Areas)介绍…...

编程日记 2023/2/21 17:44:46

新考纲下的PMP考试有多难？

PMP考试在6月25号考试结束后，在网上引起一片哗然，新考纲领域与考点的转变使得考试难度加大：PMP考试敏捷和混合内容比重大，考试难度加大很多；考题更加注重考生的知识应用能力，领域更宽； 接下来我…...

编程日记 2023/2/21 17:43:39

朗润国际期货：知名投行/大佬打Call记

知名投行/大佬打Call记 2023年知名投行/大佬看好哪些投资标的中国股市高盛（2023年1月）：将上涨15% 花旗（2023年1月）：上半年会成为投资两点摩根大通（2022年11月）：M…...

编程日记 2023/2/21 17:42:30

遗传算法及Python实现

0 建议学时 4学时 1 人工智能概述 2020中国人工智能产业年会在苏州召开，会上发布的《中国人工智能发展报告2020》显示，过去十年(2011-2020) ，中国人工智能专利申请量达389571件，占全球总量的74.7%，位居世界第一。报…...

编程日记 2023/2/21 17:41:21

零基础 Ubuntu 20.04.01 下搭建51单片机开发环境[开源编译器SDCC]

原创首发于CSDN，转载请注明出处，谢谢！ 文章目录为何会在Linux下开发单片机个人系统环境与所用开发板安装开源编译器 sdccSTC MCU ISP 闪存工具 stcgal 的安装单片机代码的编译与测试｜编写主代码 main.c｜使用 sdcc 编译…...

编程日记 2023/2/21 17:40:14

Stitches API完全指南：从基础配置到自定义扩展

Stitches API完全指南：从基础配置到自定义扩展【免费下载链接】stitches HTML5 Sprite Sheet Generator 项目地址: https://gitcode.com/gh_mirrors/sti/stitches Stitches是一款强大的HTML5 Sprite Sheet Generator，它提供了直观的API接口&…...

编程新知 2026/5/26 4:16:16

Unity安卓打包实战指南：从环境配置到APK生成全链路排错

1. 这不是“入门教程”，而是一份写给真实开发现场的生存指南你打开Unity，新建一个3D项目，拖进一个Cube，点击Play——它动了。你松了口气，觉得“Unity好像也没那么难”。但当你把APK打包发给测试同事，对方回…...

编程新知 2026/5/26 3:28:08

用STM32CubeMX和HAL库快速上手WS2812B：告别手动计算延时，一键生成驱动框架

基于STM32CubeMX的WS2812B智能灯光控制：从零构建现代化驱动方案在智能硬件和物联网设备快速发展的今天，WS2812B可编程LED灯带因其丰富的色彩表现和简单的单线控制方式，成为创客和工程师们最喜爱的显示组件之一。然而，传统的寄存器…...

编程新知 2026/5/26 2:41:39

AArch64内存管理：MAIR_EL3寄存器详解与应用

1. AArch64内存管理基础与MAIR_EL3寄存器定位在Armv8-A/v9-A架构中，内存管理单元(MMU)通过多级页表实现虚拟地址到物理地址的转换。当处理器执行内存访问时，MMU会遍历页表条目(Translation Table Entry)，其中包含两个关键信息：目…...

编程新知 2026/5/26 2:25:34

PCB虚焊/走线断裂/焊盘脱落工程师易漏判

PCB 故障中，30% 并非元件损坏，而是 PCB 本身的隐性故障—— 虚焊、走线断裂、焊盘脱落、过孔开路。这类故障外观隐蔽、时好时坏、排查难度大，很多工程师反复更换元件仍无法解决，最终误判为 “板报废”。一、PCB 隐性故障核心成因…...

编程新知 2026/5/26 0:18:08

Windows文件夹共享

目标：同一局域网实现在一台计算机上共享文件夹，在另一台电脑访问一、电脑A 1.点击要共享的文件夹 -> 属性 -> 共享2.添加Everyone用户组3.控制面板中网络共享关闭密码保存，在访问时不用输入账号密码。二、电脑B 1.在文件资源管理器路径…...

编程新知 2026/5/25 23:39:42

基于Arduino与nRF24L01+的无线传感器平台设计与部署指南

1. 项目概述与设计思路如果你和我一样，喜欢在阳台或者小院子里种点蔬菜瓜果，那你肯定也遇到过这样的烦恼：出门几天，心里总惦记着家里的番茄苗是不是缺水了，小温室里的温度会不会太高。传统的温湿度计只能让你在现场读数…...

编程新知 2026/5/25 22:52:44

终极Node.js Mock工具：Mockery入门到精通实战教程

终极Node.js Mock工具：Mockery入门到精通实战教程【免费下载链接】mockery Simplifying the use of mocks with Node.js 项目地址: https://gitcode.com/gh_mirrors/mock/mockery Mockery是Node.js生态中简化Mock使用的终极工具，它为开发者提供了…...

编程新知 2026/5/25 22:04:16