JZTXT

时间插件

发布时间 2023-10-18 16:22:35作者: 可可eleven

在/static/plugins下引入bootstrap-datetimepicker

不使用modelform组件添加时间插件

修改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">
    {#  container-fluid内容平铺，container内容居中显示  #}
    {#  <div class="container-fluid">  #}
    <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="/prettynum/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>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>

 user_add.html

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

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.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 id="dt" type="text" class="form-control" placeholder="入职时间" name="ctime">
                    </div>

                    <div class="form-group">
                        <label>性别</label>
                        {# 方法一  #}
                        {#  <select class="form-control">  #}
                            {#  <option value="1">男</option>  #}
                            {#  <option value="2">女</option>  #}
                        {#  </select>  #}

                        {#  方法二  #}
                        <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-datetimepicker/js/bootstrap-datetimepicker.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script>
        $(function (){
           $('#dt').datetimepicker({
               format: 'yyyy-mm-dd',
               startDate: '0',
               language: "zh-CN",
               autoclose: true
           }) ;
        })
    </script>
{% endblock %}

 

 成功

 使用modelform组件添加时间插件

modelform会自动给字段添加id，id名：id_字段名

例如：

creata_time

id = id_creata_time

 user_model_form_add.html

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

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.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">
                {#   novalidate去除浏览器的错误提示  #}
                <form method="post" novalidate>
                    {% csrf_token %}

                    {% for field in form %}
                        <div class="form-group">
                            <label>{{ field.label }}</label>
                            {{ field }}
                            {#  {{ field.errors }}错误信息是一个列表[错误1，错误2，错误3...], {{ field.errors.0 }}只取第一个错误1  #}
                            <span style="color: red;">{{ field.errors.0 }}</span>
                            {#   <input type="text" class="form-control" placeholder="姓名" name="user">  #}
                        </div>
                    {% endfor %}

                    <button type="submit" class="btn btn-primary">提 交</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script>
        $(function (){
           $('#id_creata_time').datetimepicker({
               format: 'yyyy-mm-dd',
               startDate: '0',
               language: "zh-CN",
               autoclose: true
           }) ;
        })
    </script>
{% endblock %}

 成功