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

django中使用bootstrap-datepicker时间插件

news 2026/4/11 17:26:44

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

如何永久保存微信聊天记录？WeChatMsg数据自主管理完整指南

如何永久保存微信聊天记录&#xff1f;WeChatMsg数据自主管理完整指南 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/W…...

编程新知 2026/4/11 17:24:01

C++ 常用算法模板整理【蓝桥杯】

文章目录前言一、基础数据结构与算法二、图论 / 搜索算法三、数论算法四、动态规划算法总结前言 为方便日常刷题与竞赛使用&#xff0c;本文整理了常用的 C 算法模板&#xff0c;基础算法、搜索、图论、数论及动态规划等核心内容。 一、基础数据结构与算法 1.求区间和&#x…...

编程新知 2026/4/11 17:03:50

04-微服务篇

文章目录一、Spring Cloud1. Spring Cloud 5大组件有哪些&#xff1f;2. 服务注册和发现是什么意思&#xff1f;Spring Cloud 如何实现服务注册发现&#xff1f;3. 我看你之前也用过nacos&#xff0c;你能说下nacos与eureka的区别&#xff1f;4. 你们项目负载均衡如何实现的&am…...

编程新知 2026/4/11 16:50:34

LeetCode 693. 交替位二进制数（详细解析 + 多解法实现）

LeetCode 693. 交替位二进制数&#xff08;详细解析 多解法实现&#xff09; 前言&#xff1a;LeetCode 693. 交替位二进制数是一道简单难度的位运算题目&#xff0c;核心考察对二进制表示、位运算操作的理解与运用。本题看似简单&#xff0c;但存在多种解题思路&#xff0c;从…...

编程新知 2026/4/11 16:28:16

Windows 10/11下快速搞定Netcat安装：从下载到测试的完整指南

Windows 10/11下快速搞定Netcat安装&#xff1a;从下载到测试的完整指南 在Windows环境下进行网络应用开发时&#xff0c;经常需要测试TCP/UDP连接或模拟简单的客户端/服务器交互。虽然Linux系统自带netcat工具&#xff0c;但频繁切换操作系统环境会打断开发节奏。本文将手把手…...

编程新知 2026/4/11 14:58:30

3步掌握Happy Island Designer：从零开始打造完美动物森友会岛屿

3步掌握Happy Island Designer&#xff1a;从零开始打造完美动物森友会岛屿 【免费下载链接】HappyIslandDesigner "Happy Island Designer (Alpha)"&#xff0c;是一个在线工具&#xff0c;它允许用户设计和定制自己的岛屿。这个工具是受游戏《动物森友会》(Animal …...

编程新知 2026/4/11 14:38:01

免费商用！Source Han Serif CN开源宋体完全实战手册

免费商用&#xff01;Source Han Serif CN开源宋体完全实战手册 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为商业设计项目寻找一款既专业又免费的中文字体吗&#xff1f;&…...

编程新知 2026/4/11 14:36:00

SetDPI完全指南：掌握Windows多显示器DPI缩放控制的高效方案

SetDPI完全指南&#xff1a;掌握Windows多显示器DPI缩放控制的高效方案 【免费下载链接】SetDPI 项目地址: https://gitcode.com/gh_mirrors/se/SetDPI Windows多显示器DPI缩放控制一直是专业用户面临的痛点&#xff0c;SetDPI作为一款开源命令行工具&#xff0c;提供了…...

编程新知 2026/4/11 14:23:54

深度解析Windows 11系统优化：3大高效修复策略实战指南

深度解析Windows 11系统优化&#xff1a;3大高效修复策略实战指南 【免费下载链接】ExplorerPatcher This project aims to enhance the working environment on Windows 项目地址: https://gitcode.com/GitHub_Trending/ex/ExplorerPatcher Windows 11更新后&#xff0…...

编程新知 2026/4/11 14:19:53

尚硅谷JavaScript(基础+高级)实战笔记全解析【从入门到精通】

1. JavaScript入门&#xff1a;从零开始搭建编程思维 第一次接触JavaScript时&#xff0c;我和大多数新手一样被各种术语绕得头晕。直到跟着尚硅谷的教程把代码敲进浏览器控制台&#xff0c;看到第一个"Hello World"弹窗跳出来&#xff0c;才真正理解什么叫"让网…...

编程新知 2026/4/11 14:09:51