案例：员工管理系统（时间插件）

思远学堂

已于 2024-02-20 14:36:44 修改

阅读量37

点赞数

于 2024-02-20 14:35:22 首次发布

本文介绍了如何在Django项目中，将Bootstrap的时间组件下载并集成到HTML模板中，包括CSS和JS的引用，以及在user_add.html模板中使用Bootstrap-datepicker实现日期选择器，展示了如何为特定输入标签添加id以支持插件功能。

摘要由CSDN通过智能技术生成

一 . 把时间组件下载到plugins文件夹下

二. 在模板layout.html上预留出导入css和js的位置

在标题下面预留css的位置

<title>Title</title>

{% block css %}{% endblock %}

2.在底部预留js的位置

{% block js %}{% endblock %}

{% load static %}  <!-- django引用语法  -->
<!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' %}">  <!-- 引用css  -->
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
    {% block css %}{% endblock %}  <!-- 导入时间插件css  -->
</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="#"> 联通用户管理系统 </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>

            </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.0.min.js' %}"></script>  <!-- 引用jquery  -->
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>  <!-- 引用 js -->
{% block js %}{% endblock %}  <!-- 导入时间插件js  -->
</body>
</html>

三 . 在使用板user_add.html上接收预留和引入css和js

导入css

{% load static %}

{% block css %}

{% endblock %}

2. 导入js和时间代码

{% block js %}

$(function () {

$('#dt').datepicker({

format: 'yyyy-mm-dd',

startDate: '0',

language: "zh-CN",

autoclose: true

});

})

</script>

{% endblock %}

{% extends 'layout.html' %}  <!--继承html模板 -->
{% load static %}

{% block css %}  <!--导入css -->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
{% endblock %}

{% block content %}  <!-- 导入django模板语 -->
    <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">  <!--提交表单（提交要有name属性：name="user）-->
                    {% 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 id="dt" type="text" 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>  <!-- item.0=男 -->
                            {% 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>  <!--  id=部门 -->
                            {% endfor %}  <!-- 模板语法结束 -->
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">提 交</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}  <!--导入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 () {
            $('#dt').datepicker({
                format: 'yyyy-mm-dd',
                startDate: '0',
                language: "zh-CN",
                autoclose: true
            });

        })
    </script>
{% endblock %}

四. 在需要使用的input标签上添加id

</div>

五. 效果图

六. 在 user_model_form_add.html应用操作和上面一样只需要更改id地址即可

    <script>
        $(function () {
            $('#id_create_time').datepicker({
                format: 'yyyy-mm-dd',
                startDate: '0',
                language: "zh-CN",
                autoclose: true
            });

        })
    </script>