【Django 网页Web开发】13. 实战项目：添加用户时的时间选择组件（06）（保姆级图文）

最新推荐文章于 2024-06-24 09:42:00 发布
最新推荐文章于 2024-06-24 09:42:00 发布
阅读量837 收藏 4
点赞数 1
分类专栏： python # Django网页Web开发 文章标签： 前端 django javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011027547/article/details/129623846
版权
该教程介绍了如何在Django项目中使用bootstrap-datepicker时间插件，包括在form和moduleForm中集成组件，以及处理模板继承和CSS/JS的引入。重点是设置时间插件ID以匹配Django的字段命名规则，并实现日期选择功能。
摘要由CSDN通过智能技术生成

目录

欢迎关注 『Django 网页Web开发』 系列，持续更新中
欢迎关注 『Django 网页Web开发』 系列，持续更新中

放置组件bootstrap-datepicker

在static/plugins下放入bootstrap-datepicker

在这里插入图片描述

1. 在form中使用时间插件

1.1 模板继承引入css和js

layout.html完整代码

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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="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="/depart/list/"> XX公司用户管理系统 </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="/pretty/list/">靓号管理</a></li>
                <li><a href="#">Link</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">mzh <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>

{#导入jquery和bootstrap，注意要先导入js再导入jquery，顺序的问题#}
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>

在这里插入图片描述

1.2 user_add.html中编写模板继承的内容

因为只有这一页面调用了时间选择的css js 所以单独在这个页面中引入插件的css和js（不能写在模板页面中，可能会样式冲突），在user_add.html中修改。
注意：不要忘记 {% load static %}

  1. 引入时间插件css
  2. 给时间输入框加上id=dt，为了后面的jQuery选择准备，同时不允许自动填充autocomplete=“false”
  3. 引入时间插件js并编写时间插件使用函数
    {% block css %}
        <link rel="stylesheet" href="{% static '/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
    {% endblock %}
    
    ```
                    <div class="form-group">
                        <label>入职时间</label>
                        <input type="text" id="dt" autocomplete="false" class="form-control" placeholder="入职时间" name="ctime"/>
                    </div>    
    ```
    
    {% 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 () {
            $('#dt').datepicker({
                format: 'yyyy-mm-dd',
                startDate:'0',
                language: 'zh-CN',
                autoclose: true
            });
        })
        </script>
    {% endblock %}

在这里插入图片描述

完整user_add.htmll代码

{% extends 'layout.html' %}
{#因为只有这一页面调用了时间选择的css js 所以单独在这个页面中引入插件的css和js#}
{%  load static %}{#引入static方便调用#}

    {% 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">
                    {% csrf_token %}

                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" class="form-control" placeholder="姓名" name="user" />
                    </div>

                    <div class="form-group">
                        <label>密码</label>
                        <input type="text" class="form-control" placeholder="密码" name="pwd"/>
                    </div>

                    <div class="form-group">
                        <label>年龄</label>
                        <input type="text" class="form-control" placeholder="年龄" name="age"/>
                    </div>

                    <div class="form-group">
                        <label>余额</label>
                        <input type="text" class="form-control" placeholder="余额" name="ac"/>
                    </div>


                    <div class="form-group">
                        <label>入职时间</label>
                        <input type="text" id="dt" autocomplete="false" class="form-control" placeholder="入职时间" name="ctime"/>
                    </div>

                    <div class="form-group">
                        <label>性别</label>
                        <select class="form-control" name="gd">
                            {% for item in gender_choices %}
                                <option value="{{ item.0 }}">{{ item.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group">
                        <label>部门</label>
                        <select class="form-control" name="dp">
                            {% for item in depart_list %}
                                <option value="{{ item.id }}">{{ item.title }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <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 () {
            $('#dt').datepicker({
                format: 'yyyy-mm-dd',
                startDate:'0',
                language: 'zh-CN',
                autoclose: true
            });
        })
        </script>
    {% endblock %}

2. 在moudleForm中使用时间插件

整体思路一样，关键在于js中获取时间框的id属性，这一步可以使用moudleForm自带的id指定

2.1 moudleForm默认定义生成组件id的规则

moudleForm默认定义生成组件id的规则——id_字段名，下图中就是id_create_time

在这里插入图片描述

2.2 moudleForm模板继承引入css和js

这一步和前面form使用时间插件一样，没有任何改动。
layout.html完整代码

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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="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="/depart/list/"> XX公司用户管理系统 </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="/pretty/list/">靓号管理</a></li>
                <li><a href="#">Link</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">mzh <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>

{#导入jquery和bootstrap，注意要先导入js再导入jquery，顺序的问题#}
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>

在这里插入图片描述

2.3 user_add.html中编写模板继承的内容

关键区别在于修改了js函数中的组件id$('#dt').datepicker({变成了$('#id_create_time').datepicker({
完整user_model_form_add.htmll代码

{% extends 'layout.html' %}
{% load static %}

    {% 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.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 %}

在这里插入图片描述

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多有趣好玩的Python 网页Web开发知识！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2023 mzh

Crated：2023-3-1

欢迎关注 『Django 网页Web开发』 系列，持续更新中
欢迎关注 『Django 网页Web开发』 系列，持续更新中
『01. 安装配置Django』
『02. 创建并运行一个Django项目』
『03. 初识Django』
『04. 请求和响应，网页跳转重定向，实战简易表单模拟登陆』
『05. 数据库操作，实战用户管理』
『06. 报错：You have 26 unapplied migration(s). Your project may not work properly until you apply the migra』
『07. 模板语法』
『08. 实战项目：部门和员工管理系统（01）』
『09. 实战项目：员工编辑删除功能与靓号管理（02）』
『10. 实战项目：靓号搜索功能（03）』
『11. 实战项目：分页与页码跳转功能（04）』
『12. 实战项目：分页组件的封装 面向接口编程（05）』
『13. 实战项目：添加用户时的时间选择组件（06）』
『14. 实战项目：一些面向对象的代码结构优化（07）』
『15. 实战项目：管理员增删改查，md5密码和密码重置（08）』
『16. 实战项目：BootStrap类的进一步优化（09）』
『17. 实战项目：login业务涉及cookie、session、中间件（10）』
『18. 实战项目：登录时的验证码（11）』
『19. 实战项目：初识Ajax请求（12）』
『20. 实战项目：Ajax实战之订单管理与弹出对话框（13）』
『21. 实战项目：echart数据图表（14）』
『22. 实战项目：简单的文件上传（15）』
『23. 实战项目：Excel和form和moudleForm的文件上传（16）』
【更多内容敬请期待】

发现你走远了
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Django-vue-admin学习笔记】实现CRUD日期窗口时间通用选择组件
Mr数据杨
04-05 392
这套公共时间组件功能通过提供时间的标准化处理、灵活的日期操作以及便捷的快捷选择方式，极大地提升了开发效率和用户体验。无论是在数据处理、任务规划还是用户交互设计中，它们都提供了强大支持，使得时间相关操作变得更加简洁和高效。
Django组件 | 时间选择组件
echohye的博客
02-28 1142
Bootstrap datepicker控件的使用
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
09-16
主要介绍了 Django 如何使用日期时间选择器规范用户的时间输入，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Django中如何使用时间选择器
知远同学的博客
11-09 1451
其中需要修改的就是js文件中的“#id_date”，因为在django中通过ModelForm在前端循环生成input框时，会自动给每个input框自定义一个ID，规则就是id_加上model中字段的名字。实现的方法是通过bootstrap-datepiker模块实现。2、在前段代码中插入js文件。一、前段html代码。
探索django-bootstrap3-datetimepicker：打造优雅的日期时间选择体验
最新发布
gitblog_00019的博客
06-24 272
探索django-bootstrap3-datetimepicker：打造优雅的日期时间选择体验 项目地址:https://gitcode.com/nkunihiko/django-bootstrap3-datetimepicker 在Web开发领域中，处理日期和时间常常是一项挑战，特别是在创建美观且易于使用的界面时。幸运的是，开源社区从未让我们失望过。今天，我们将聚焦于一个特别的Django应用...
Django-时间组件
潮流 M I 的博客
06-21 277
Django-时间组件
在Django项目中使用时间插件
qq_61565654的博客
10-23 231
在前端代码块中引用提前下载好的时间插件的js。
Django项目中如何使用日期时间选择器DateTimePicker
热门推荐
大江狗
12-09 1万+
如果你的模型中含有datetime类型的字段，表单中需要用户输入日期和时间，那么你如何保证不同用户输入的时间都遵循一定的格式(DD/MM/YYYY 或者YYYY-MM-DD)是个必须要考...
django 使用第三方js库“My97DatePicker”作为时间选择插件
qq_38461418的博客
07-12 287
django如何使用第三方js库“My97DatePicker” 官方链接：http://www.my97.net/demo/resource/left.htm 一：界面展示 二：下载My97DatePicker http://www.my97.net/down/My97DatePicker.zip 三：在django中setting.py指定存放路径： STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'static
时间段选择
GTraveler
08-15 3278
一，bootstrap-datepicker1. 初始化： <link rel="stylesheet" href="./bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"> <script src="./bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></scri
django-bootstrap3-datetimepicker
05-18
django-bootstrap3-datetimepicker 该软件包使用以下项目提供的Bootstrap v3 datetimepicker小部件版本2： : 日期的正确格式选项可以在以下位置找到： : 它仅适用于Bootstrap3。 如果您在Django项目中使用的是Bootstrap2，请访问 安装 运行pip install django-bootstrap3-datetimepicker 将'bootstrap3_datetime'添加到您的INSTALLED_APPS 例子 表格 from bootstrap3_datetime.widgets import DateTimePicker from django import forms class ToDoForm(forms.Form): todo = forms.CharField(
12款时间日期选择组件
12-13
12款时间时间组件，总有一款适合你，包括日历选择，移动端滑动选择，双月份和时间点，时间轴
django 查询时间范围_开源了一个 Django PostgreSQL 时间分区表插件
weixin_39627144的博客
12-28 119
数据量比较大需要分表的业务场景非常多，比如商城的订单表、WAF 记录的日志等等，常见的就是按照时间去分表。最近我们开源了一个 Django 插件，目的是方便在 PostgreSQL 11 上实现按时间的分区表的管理。Django orm 非常好用，我们通过 patch 的方式实现了修改 orm 生成的 CREATE TABLE sql 语句，然后内置了一些分区表管理逻辑。链接在这 chaitin/...
django 查询时间范围_长亭新年贺礼 | 开源了我们的 Django PostgreSQL 时间分区表插件...
weixin_42697475的博客
01-03 143
什么是分区表，有什么优点分区表就是将逻辑上的一个大表分成一些物理上的小表，是数据库系统为大型表的数据组织和管理提供的一种实用的功能特性。表分区有很多好处，比如：子表可以按照时间等特征去划分，如果一个查询带有时间范围，那么某些子表可以直接跳过。这样就减少了索引和数据文件的 IO 量，而且这些数据更可能被缓存在内存中了。 一个子表可以被归档，也就是数据库会忽略它的存在，实现老数据不再查询的特性。如果磁...
时间日期组件框
weixin_64374806的博客
09-21 1091
日期时间选择器
Django中forms表单使用日期选择器
weixin_43962347的博客
09-15 6101
最近在学习Django中自带的forms模块，想用forms表单实现一个可以选择日期的输入框 from django import forms class LoginForm(forms.Form): user_name = forms.CharField(label='昵称', max_length=10, widget=forms.TextInput(attrs={'class':'...
2022暑期实践（Django教程学习记录）（第三周3）P45时间选择组件P45BootStrap样式父类
weixin_49378678的博客
07-20 119
P45时间选择组件BootStrap自带，下载解压引入。
【django】调用datepicker控件设定某字段为日期类型
春天的波菜
06-25 318
前言：django当中设定某个字段为日期类型，关键在使用#id_字段名。
Django中的日期和时间格式 DateTimeField
weixin_30500289的博客
09-06 438
创建django的model时，有DateTimeField、DateField和TimeField三种类型可以用来创建日期字段，其值分别对应着datetime()、date()、time()三中对象。这三个field有着相同的参数auto_now和auto_now_add，表面上看起来很easy，但实际使用中很容易出错，下面是一些注意点。 DateTimeField.auto_now 这个参...
Python Django Web开发实战：跨域问题与项目案例详解
"Python Django Web典型模块开发实战课程深入探讨了Python这门在1990年代初由荷兰数学家吉多·范罗苏姆设计的语言，作为ABC语言的替代品。Python以其高效的数据结构、面向对象编程能力，以及简洁的语法和动态类型，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

发现你走远了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值