【Django】教程-8-页面时间组件

【Django】教程-1-安装+创建项目+目录结构介绍
【Django】教程-2-前端-目录结构介绍
【Django】教程-3-数据库相关介绍
【Django】教程-4-一个增删改查的Demo
【Django】教程-5-ModelForm增删改查+规则校验【正则+钩子函数】
【Django】教程-6-搜索框-条件查询前后端
【Django】教程-7-分页，默认使用django的

14. 时间插件

可以编辑页面，查看时间框的id
django默认会给时间框添加一个id ，默认id命名规则 id_字段名

user_model_add.html

{% extends 'layout.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <!-- 引入 bootstrap-datepicker CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
{% endblock %}


{% block title %}
    添加用户
{% endblock %}


{% block content %}
    <div>
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="glyphicon glyphicon-tag" aria-hidden="true">
                            添加用户</span>
                    </h3>
                </div>

                <div class="panel panel-body">
                    {#                novalidate, 关掉浏览器的校验#}
                    <form method="post" novalidate>

                        {% csrf_token %}

                        {% for u in user %}
                            <div class="form-group">
                                <label>{{ u.label }}:</label>
                                {{ u }}
                                <span style="color: red">{{ u.errors.0 }}</span>
                            </div>
                        {% endfor %}


                        <button type="submit" class="btn btn-primary">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <!-- 引入 bootstrap-datepicker JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script>
        $(function () {
            $('#id_create_time').datepicker({
                format: 'yyyy-mm-dd', // 日期格式
                startDate: new Date(), // 从当前日期开始可选
                language: 'zh-CN', // 使用中文
                autoclose: true // 选择日期后自动关闭日期选择器
            });
        });
    </script>

{% endblock %}