2022暑期实践（Django教程学习记录）（第三周3）P45时间选择组件P45BootStrap样式父类

P45时间选择组件BootStrap自带，下载解压引入

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

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker-master/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 action="/user_add/" method="POST">
                    {% csrf_token %}
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" class="form-control"  name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="text" class="form-control"  name="password" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label>年龄</label>
                        <input type="text" class="form-control"  name="age" placeholder="年龄">
                    </div>
                    <div class="form-group">
                        <label>余额</label>
                        <input type="text" class="form-control"  name="account" placeholder="余额">
                    </div>
                    <div class="form-group">
                        <label>入职时间</label>
                        <input type="text" class="form-control"  name="time" placeholder="入职时间">
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <select class="form-control" name="gender">
                        {% 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="department">
                        {% for item in depart_list %}
                            <option value="{{ item.id }}">{{ item.title }}</option>
                        {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn btn-default">提交</button>
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}

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

{% endblock %}

继承父类：

# 继承BootStrap的父类
class BootStrapModelForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for name, field in self.fields.items():
            if field.widget.attrs:
                field.widget.attrs['class'] = "form-control"
                field.widget.attrs['placeholder'] = field.label
            else:
                field.widget.attrs = {
                    'class': 'form-control',
                    'placeholder': field.label
                }


class UserModelForm(BootStrapModelForm):
    class Meta:
        model = models.UserInfo
        fields = ['name', 'password', 'age', 'account', 'gender', 'department', 'create_time']