网站建设公司做ppt吗,瑞华特散热器网站谁给做的,江西做网站,wordpress增加额外链接1、插件的下载
Bootstrap Datepicker是一款基 于Bootstrap框架的日期选择控件#xff0c;可以方便地在Web应用中添加可交互的日期选择功能。Bootstrap Datepicker拥有丰富的选项和API,支持多种日期格式#xff0c;可以自定义样式并支持各种语言。 Bootstrap Datepicker 依赖…1、插件的下载
Bootstrap Datepicker是一款基 于Bootstrap框架的日期选择控件可以方便地在Web应用中添加可交互的日期选择功能。Bootstrap Datepicker拥有丰富的选项和API,支持多种日期格式可以自定义样式并支持各种语言。 Bootstrap Datepicker 依赖bootstrap:
bootstrap.min.cssjQuery.min.jsbootstrap.min.js
Bootstrap 的下载
下载地址 https://v3.bootcss.com/getting-started/#download 下载生成环境的就可以解压后把插件放到django项目的app下面的static目录plugins
Bootstrap Datepicker 的下载
方式一 1、进入官方网站htts://github.com/uxsolutions/bootstrap-datepicker 2、点击“Download ZIP*按钮将整个项目下载到本地。 3、解压缩下载的文件,找到dist文件夹里面包含了所有的CSS和JavaScript文件。 4、将插件放到static目录下
方式二 github经常打不开可以访问https://www.bootcdn.cn/bootstrap-datepicker/ 在这里找到对应的三个文件
bootstrap-datepicker.cssbootstrap-datepicker.jsbootstrap-datepicker.zh-CN.min.js 复制连接打开将里面的内容复制下来保存到本地文件中如下
2、使用插件
要引入相应的插件, 使用日期插件要写一段js函数指定id的名称。 link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.min.csslink relstylesheet hrefstatic/plugins/bootstrap-datepicker/css/bootstrap-datepicker.cssscript srcstatic/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js/scriptscript srcstatic/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js/script
script srcstatic/js/jquery-3.7.0.min.js/script
script srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.min.js/scriptscript$(function () {$( #id_create_time).datepicker({autoclose: true,format: yyyy-mm-dd,startDate: 0,language: zh-CN});});/script示例
这个用户添加的页面使用的是ModelForm 组件和模板继承模板文件如下
{% load static %}!DOCTYPE html
html langen
headmeta charsetUTF-8title部门管理/titlelink relstylesheet href{% static plugins/bootstrap-3.4.1/css/bootstrap.min.css %}{% block css %}{% endblock%}style.navbar {border-radius: 0;}/style
/head
body
nav classnavbar navbar-defaultdiv classcontainer!-- Brand and toggle get grouped for better mobile display --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/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli a href/depart/list/部门管理 /a/lilia href/user/list/用户管理/a/lilia href/pretty/list/靓号管理/a/li/ul!--form classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button/form--ul 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/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div/div
/nav
div{% block content %}{% endblock%}
/div
script src{% static js/jquery-3.7.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 的内容如下 使用的 ModelForm组件标签是django生成的不能自己去定义id标签的名称但是在django中会根据一个规则生成一个id ,就是id_字段名, 比如我的字段名称是create_time 那么这个字段的id就是 id_create_time
{% extends layout.html %}{% load static %}{% block css %}link relstylesheet href{% static plugins/bootstrap-datepicker/css/bootstrap-datepicker.css %}
{% endblock %}{% block content %}div classcontainerdiv classpanel panel-defaultdiv classpanel-heading新建用户/divdiv classpanel-bodyform classform-horizontal methodpost novalidate{% csrf_token %}{% for field in form %}div classform-groupdiv classcol-sm-10label {{ field.label }}/label{{ field }}span stylecolor:red{{ field.errors.0}}/span/div/div{% endfor %}div classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-primary提交/button/div/div/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({autoclose: true,format: yyyy-mm-dd,startDate: 0,language: zh-CN});});/script
{% endblock %}看页面效果
