当前位置: 首页 > 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 编译…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...