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

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项目实战三&#xff08;djangobootstrap实现增删改查&#xff09;进阶分页》 知识点&#xff1a; 使用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. 上面是官方给的定义&#xff0c;ViewModel 类是业务逻辑或屏幕级状态持有者。 一、业务逻辑持有者 在此之前&#xff0c;无论是MVC模式&#xff0c;还是MVP模式&#xff0c;在视图层&#xff0c;都会…...

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

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

xss基础

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

移动WEB开发二、流式布局

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

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

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

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

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

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

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

pnpm v8版本升级变化关注点(前瞻速攻版)

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

Python基础-环境安装

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

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

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

第九章 - 多表查询(join,left join 等)与合并查询(union union all)

第九章 - 多表查询&#xff08;join&#xff0c;left join 等&#xff09;与合并查询&#xff08;union&#xff09;交叉链接&#xff08;笛卡尔积&#xff09;内连接查询外连接查询左链接&#xff1a; left join右链接&#xff1a;right join组合查询 union & union all使…...

matplotlib学习笔记(持续更新中…)

目录 1. 安装&#xff0c;导入 2. figure&#xff0c;axes&#xff08;图形&#xff0c;坐标图形&#xff09; 2.1 figure对象 2.2 axes对象 2.3 代码演示 2.3 subplot() 方法 3. 图表的导出 3.1 savefig() 方法 3.2 代码演示 1. 安装&#xff0c;导入 pip install m…...

STM32 SystemInit()函数学习总结

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

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

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

简明易懂的JVM理解

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

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

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

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

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

遗传算法及Python实现

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

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

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

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; 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 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 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 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...