{% extends 'layout.html' %}
{% load static %}
{#引入日期插件的css#}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker-1.9.0/bootstrap-datepicker.min.css' %}">
{% endblock %}

{% block content %}
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">新建员工（通过ModelForm组件生成）</h3>
            <h3>说明 ：obj.label是models.py中定义数据表字段的verbose_name属性</h3>
            <h3>说明 ：field.errors.0是错误提示信息</h3>
        </div>
        <div class="panel-body">
            <!-- novalidate 关闭浏览器的表单验证，用Django来控制检验 -->
            <form method="post" novalidate>
                {% csrf_token %}
                {% for field in form %}
                <div class="form-group">
                    <label>{{ field.label }}</label><span style="color:red;"> {{ field.errors.0 }}</span>
                    {{ field }}
                </div>
                {% endfor %}
                <button type="submit" class="btn btn-primary">保存</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datepicker-1.9.0/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 %}