泰安建设银行网站,嘉定华亭网站建设,wordpress最底部,wordpress 赏接上一篇《django项目实战三#xff08;djangobootstrap实现增删改查#xff09;进阶分页》 知识点#xff1a; 使用bootstrap-datepicker实现时间控件 一、优化layout.html模版
主要新增2个块 {% block css %}{% endblock %}{% block js %}{% endblock %}
{% load static… 接上一篇《django项目实战三djangobootstrap实现增删改查进阶分页》 知识点 使用bootstrap-datepicker实现时间控件 一、优化layout.html模版
主要新增2个块 {% block css %}{% endblock %}{% block js %}{% endblock %}
{% load static %}
!DOCTYPE html
html langen
headmeta charsetUTF-8{% block title %}{% endblock %}link relstylesheet href{% static plugins/bootstrap-3.4.1/css/bootstrap.min.css %}/style.navbar{border-radius: 0;}/style{% block css %}{% endblock %}
/head
bodynav classnavbar navbar-defaultdiv classcontainer !-- div classcontainer-fluid --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#测试管理系统/a/divdiv classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navlia href/depart/list/部门管理/a/lilia href/user/list/用户管理/a/lilia href/case/list/用例管理/a/li/ulul classnav navbar-nav navbar-rightlia href#登录/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalse春天的菠菜 span classcaret/span/aul classdropdown-menulia href#个人资料/a/lilia href#我的信息/a/lili roleseparator classdivider/lilia href#注销/a/li/ul/li/ul/div/div
/navdiv{% block content %}{% endblock %}/divscript src{% static js/jquery-3.6.3.min.js %}/script
script src{% static plugins/bootstrap-3.4.1/js/bootstrap.js %}/script
{% block js %}{% endblock %}
/body
/html
二、下载导入bootstrap-datepicker
1、下载
略
2、放入对应文件夹目录 三、引入
1、在user_add.html引入
知识点id_create_time是modelform框架依据字段自动生成的id
如果是非modelform框架可以未入职时间字段加个iddt 然后id_create_time替换成dt
{% extends layout.html %}
{% load static %}
{% block title %}title新增用户(ModelForm)/title
{% endblock %}
{% block css %}link relstylesheet href{% static plugins/bootstrap-datepicker/css/bootstrap-datepicker.css %} /
{% endblock %}
{% block content %}div classcontainerdiv classpanel panel-defaultdiv classpanel-headingh3 classpanel-title新增用户/h3/divdiv classpanel-bodyform methodpost novalidate{% csrf_token %}{% for field in form %}div classform-grouplabel{{ field.label }}/label{{ field }}span stylecolor: red{{ field.errors.0 }}/span/div{% endfor %}button typesubmit classbtn btn-primary保 存/button/form/div/div/div{% endblock %}
{% block js %}script src{% static plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js %} /scriptscript src{% static plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js %} /scriptscript$(function () {$(#id_create_time).datepicker({format: yyyy-mm-dd,startDate: 0,language: zh-CN,autoclose: true});})/script
{% endblock %}
2、在user_edit.html
{% extends layout.html %}
{% load static %}
{% block title %}title编辑用户/title
{% endblock %}
{% block css %}link relstylesheet href{% static plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css %}{% endblock %}
{% block content %}div classcontainerdiv classpanel panel-defaultdiv classpanel-headingh3 classpanel-title编辑用户/h3/divdiv classpanel-bodyform methodpost novalidate{% csrf_token %}{% for field in form %}div classform-grouplabel{{ field.label }}/label{{ field }}span stylecolor: red{{ field.errors.0 }}/span/div{% endfor %}button typesubmit classbtn btn-primary保 存/button/form/div/div/div
{% endblock %}
{% block js %}script src{% static plugins/bootstrap-datepicker/js/bootstrap-datepicker.js %} /scriptscript src{% static plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js %} /scriptscript$(function () {$(#id_create_time).datepicker({format: yyyy-mm-dd,startDate: 0,language: zh-CN,autoclose: true});})/script
{% endblock %}
