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

django中使用bootstrap-datepicker时间插件

news 2025/9/26 13:36:41

1、插件的下载

Bootstrap Datepicker是一款基 于Bootstrap框架的日期选择控件，可以方便地在Web应用中添加可交互的日期选择功能。Bootstrap Datepicker拥有丰富的选项和API,支持多种日期格式，可以自定义样式并支持各种语言。
Bootstrap Datepicker 依赖bootstrap:

  • bootstrap.min.css
  • jQuery.min.js
  • bootstrap.min.js

Bootstrap 的下载

下载地址： https://v3.bootcss.com/getting-started/#download
在这里插入图片描述
下载生成环境的就可以，解压后把插件放到django项目的app下面的static目录plugins
在这里插入图片描述

Bootstrap Datepicker 的下载

方式一：
1、进入官方网站：htts://github.com/uxsolutions/bootstrap-datepicker
2、点击“Download ZIP*按钮，将整个项目下载到本地。
3、解压缩下载的文件,找到"dist文件夹，里面包含了所有的CSS和JavaScript文件。
4、将插件放到static目录下

方式二：
github经常打不开，可以访问：https://www.bootcdn.cn/bootstrap-datepicker/
在这里插入图片描述
在这里找到对应的三个文件：

  • bootstrap-datepicker.css
  • bootstrap-datepicker.js
  • bootstrap-datepicker.zh-CN.min.js
    复制连接打开，将里面的内容复制下来，保存到本地文件中，如下：
    在这里插入图片描述

2、使用插件

要引入相应的插件, 使用日期插件要写一段js函数，指定id的名称。

   <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"><link rel="stylesheet" href="static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css"><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 src="static/js/jquery-3.7.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script><script>$(function () {$( "#id_create_time").datepicker({autoclose: true,format: 'yyyy-mm-dd',startDate: 0,language: "zh-CN"});});</script>

示例

这个用户添加的页面使用的是ModelForm 组件和模板继承，模板文件如下：

{% load static %}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>部门管理</title><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">{% block css %}{% endblock%}<style>.navbar {border-radius: 0;}</style>
</head>
<body>
<nav class="navbar navbar-default"><div class="container"><!-- Brand and toggle get grouped for better mobile display --><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><!-- Collect the nav links, forms, and other content for toggling --><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="/pretty/list/">靓号管理</a></li></ul><!--form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form--><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><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div></div>
</nav>
<div>{% block content %}{% endblock%}
</div>
<script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>{% block js %}{% endblock%}
</body>
</html>

在user_add.html 的内容如下：
使用的 ModelForm组件，标签是django生成的，不能自己去定义id标签的名称，但是在django中会根据一个规则生成一个id ,就是id_字段名, 比如我的字段名称是create_time， 那么这个字段的id就是 id_create_time

{% extends 'layout.html' %}{% load static %}{% 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">新建用户</div><div class="panel-body"><form class="form-horizontal" method="post" novalidate>{% csrf_token %}{% for field in form %}<div class="form-group"><div class="col-sm-10"><label> {{ field.label }}</label>{{ field }}<span style="color:red">{{ field.errors.0}}</span></div></div>{% endfor %}<div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提交</button></div></div></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({autoclose: true,format: 'yyyy-mm-dd',startDate: 0,language: "zh-CN"});});</script>
{% endblock %}

看页面效果：
在这里插入图片描述

相关文章：

django中使用bootstrap-datepicker时间插件

1、插件的下载 Bootstrap Datepicker是一款基 于Bootstrap框架的日期选择控件&#xff0c;可以方便地在Web应用中添加可交互的日期选择功能。Bootstrap Datepicker拥有丰富的选项和API,支持多种日期格式&#xff0c;可以自定义样式并支持各种语言。 Bootstrap Datepicker 依赖…...

编程日记 2023/8/14 14:21:18

《golang设计模式》第二部分·结构型模式-02-桥接模式（Bridge）

文章目录 1. 概念1.1 角色1.2 类图 2. 代码示例2.1 设计2.1 代码2.2 类图 1. 概念 客户端调用桥接接口实现原有功能和扩展功能的组合 1.1 角色 Implementor&#xff08;实施者&#xff09;&#xff1a; 具体实施者的抽象&#xff0c;可以是一个接口。 Concrete Implementor&…...

编程日记 2023/8/14 14:20:17

【2023年11月第四版教材】《第4章-信息系统管理之管理要点（第四版新增章节）（第二部分）》

信息系统管理之管理要点&#xff08;第四版新增章节&#xff09;&#xff08;第二部分&#xff09; 2 管理要点2.1 数据管理能力成熟度评估模型DCMM详细表格简要表格 2.2 组织的管理成熟度2.3 能力模型2.4 智能运维能力框架2.5 安全保护等级 2 管理要点 2.1 数据管理能力成熟度…...

编程日记 2023/8/14 14:19:16

【算法——双指针】LeetCode 1089 复写零

千万不要被这道题标注着“简单”迷惑了&#xff0c;实际上需要注意的细节很多。 题目描述&#xff1a; 解题思路&#xff1a; 正序遍历&#xff0c;确定结果数组的最后一个元素所在的位置&#xff1b;知道最后一个元素的位置后倒序进行填充。 先找到最后一个需要复写的数 先…...

编程日记 2023/8/14 14:18:14

基于飞桨图学习框架实现的城市地点动态关系挖掘

李双利 飞桨开发者技术专家&#xff08;PPDE&#xff09;&#xff0c;百度研究院商业智能实验室研究实习生&#xff0c;中国科学技术大学在读博士生。 主要进行时空数据挖掘和图深度学习的相关研究工作。曾获2021年百度研究院年度优秀实习生&#xff0c;有多篇基于飞桨完成的…...

编程日记 2023/8/14 14:17:12

3.1 Qt样式选择器

本期内容 3.1 样式选择器 3.1.1 Universal Selector （通用选择器） 3.1.2 Type Selector （类型选择器） 3.1.3 Property Selector （属性选择器） 3.1.4 Class Selector （类选择器） 3.1.5 ID Selector （ID选择器） 3.1.6 Descendant Selector （后裔选择器） 3.1.7 Chil…...

编程日记 2023/8/14 14:16:11

react钩子副作用理解

useEffect(() > { fetch(‘https://api.example.com/data’) .then(response > response.json()) .then(data > setData(data)); }, []); 怎么理解这个[] 在 React 中&#xff0c;useEffect 钩子用于处理副作用&#xff0c;比如数据获取、订阅、手动 DOM 操作等。useE…...

编程日记 2023/8/14 14:15:10

浅谈Spring与字节码生成技术

概要 今天来谈一谈我们熟知的Spring框架和字节码技术有什么联系。 Java程序员几乎都了解Spring。 它的IoC&#xff08;依赖反转&#xff09;和AOP&#xff08;面向切面编程&#xff09;功能非常强大、易用。而它背后的字节码生成技术&#xff08;在运行时&#xff0c;根据需要…...

编程日记 2023/8/14 14:14:07

时序预测 | MATLAB实现基于BiLSTM双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于BiLSTM双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于BiLSTM双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 Matlab实现BiLST…...

编程日记 2023/8/14 14:13:04

Flink多流处理之coGroup(协同分组)

这篇文章主要介绍协同分组coGroup的使用,先讲解API代码模板,后面会结图解介绍coGroup是如何将流中数据进行分组的. 1 API介绍 数据源# 左流数据 ➜ ~ nc -lk 6666 101,Tom 102,小明 103,小黑 104,张强 105,Ken 106,GG小日子 107,小花 108,赵宣艺 109,明亮# 右流数据 ➜ ~ n…...

编程日记 2023/8/14 14:12:02

基于TICK的DevOps监控实战（Ubuntu20.04系统，Telegraf+InfluDB+Chronograf+Kapacitor）

1、TICK简介 TICK是InfluxData开发的开源高性能时序中台&#xff0c;集成了采集、存储、分析、可视化等能力&#xff0c;由Telegraf, InfluDB, Chronograf, Kapacitor等4个组件以一种灵活松散、但又紧密配合&#xff0c;互为补充的方式构成。TICK专注于DevOps监控、IoT监控、实…...

编程日记 2023/8/14 14:10:59

十九、docker学习-Dockerfile

Dockerfile 官网地址 https://docs.docker.com/engine/reference/builder/Dockerfile其实就是我们用来构建Docker镜像的源码&#xff0c;当然这不是所谓的编程源码&#xff0c;而是一些命令的集合&#xff0c;只要理解它的逻辑和语法格式&#xff0c;就可以很容易的编写Docke…...

编程日记 2023/8/14 14:09:57

Docker容器的数据卷

1.数据卷的概念及作用 2.数据卷的配置 创建容器并挂载数据卷&#xff1a; docker run -it --namec1 -v /root/data:/root/data_container centos:7 /bin/bash按照容器挂载数据卷的原理&#xff0c;data_contianer这个目录下也会同步下来数据的更改。 3.一个容器挂载多个数据…...

编程日记 2023/8/14 14:08:54

推荐工具！使终端便于 DevOps 和 Kubernetes 使用

如果你熟悉 DevOps 和 Kubernetes 的使用&#xff0c;就会知道命令行界面&#xff08;CLI&#xff09;对于管理任务有多么重要。好在现在市面上有一些工具可以让终端在这些环境中更容易使用。在本文中&#xff0c;我们将探讨可以让工作流程简化的优秀工具&#xff0c;帮助你在 …...

编程日记 2023/8/14 14:07:53

抖音小程序实现less语言编译样式

1.在抖音开发工具中搜索扩展less 2. 然后点击小齿轮选择扩展设置 3. 然后在扩展设置中选择在settings.json中编辑# 4. 在settings.json中加入以下这段代码即可 // Easy LESS配置"less.compile": {"compress": false,//是否压缩"sourceMap": fal…...

编程日记 2023/8/14 14:06:51

介绍 TensorFlow 的基本概念和使用场景

TensorFlow 是一种开源的机器学习框架&#xff0c;由 Google 开发。它是用来构建和训练机器学习模型的强大工具&#xff0c;支持很多种不同类型的机器学习算法&#xff0c;并使用数据流图来表示计算过程。 TensorFlow 的核心是张量 (Tensor) 和计算图 (Graph)。 张量 (Tensor)…...

编程日记 2023/8/14 14:05:45

抖音关键词搜索小程序排名怎么做

抖音关键词搜索小程序排名怎么做 1 分钟教你制作一个抖音小程序。 抖音小程序就是我的视频&#xff0c;左下方这个蓝色的链接&#xff0c;点进去就是抖音小程序。 如果你有了这个小程序&#xff0c;发布视频的时候可以挂载这个小程序&#xff0c;直播的时候也可以挂载这个小…...

编程日记 2023/8/14 14:04:43

Windows下升级jdk1.8小版本

1.首先下载要升级jdk最新版本&#xff0c;下载地址&#xff1a;Java Downloads | Oracle 中国 2.下载完毕之后&#xff0c;直接双击下载完毕后的文件&#xff0c;进行安装。 3.安装完毕后&#xff0c;调整环境变量至新安装的jdk位置 4.此时&#xff0c;idea启动项目有可能会出…...

编程日记 2023/8/14 14:03:42

[保研/考研机试] KY235 进制转换2 清华大学复试上机题 C++实现

题目链接&#xff1a; KY235 进制转换2 https://www.nowcoder.com/questionTerminal/ae4b3c4a968745618d65b866002bbd32 描述 将M进制的数X转换为N进制的数输出。 输入描述&#xff1a; 输入的第一行包括两个整数&#xff1a;M和N(2<M,N<36)。 下面的一行输入一个数…...

编程日记 2023/8/14 14:02:40

机器学习 | Python实现KNN(K近邻)模型实践

机器学习 | Python实现KNN(K近邻)模型实践 目录 机器学习 | Python实现KNN(K近邻)模型实践基本介绍模型原理源码设计学习小结参考资料基本介绍 一句话就可以概括出KNN（K最近邻算法）的算法原理：综合k个“邻居”的标签值作为新样本的预测值。更具体来讲KNN分类过程，给定一个训…...

编程日记 2023/8/14 14:01:38

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/9/25 21:38:09

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/9/23 9:00:33

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/9/26 0:37:51

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/8/8 2:13:29

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/8/26 21:58:04

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/9/22 14:59:59

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/8/15 1:44:58

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/9/22 19:23:32