django中使用bootstrap-datepicker时间插件

这篇具有很好参考价值的文章主要介绍了django中使用bootstrap-datepicker时间插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、插件的下载

Bootstrap Datepicker是一款基 于Bootstrap框架的日期选择控件,可以方便地在Web应用中添加可交互的日期选择功能。Bootstrap Datepicker拥有丰富的选项和API,支持多种日期格式,可以自定义样式并支持各种语言。
Bootstrap Datepicker 依赖bootstrap:

  • bootstrap.min.css
  • jQuery.min.js
  • bootstrap.min.js

Bootstrap 的下载

下载地址: https://v3.bootcss.com/getting-started/#download
django中使用bootstrap-datepicker时间插件,python,django,bootstrap,python
下载生成环境的就可以,解压后把插件放到django项目的app下面的static目录plugins
django中使用bootstrap-datepicker时间插件,python,django,bootstrap,python

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/
django中使用bootstrap-datepicker时间插件,python,django,bootstrap,python
在这里找到对应的三个文件:

  • bootstrap-datepicker.css
  • bootstrap-datepicker.js
  • bootstrap-datepicker.zh-CN.min.js
    复制连接打开,将里面的内容复制下来,保存到本地文件中,如下:
    django中使用bootstrap-datepicker时间插件,python,django,bootstrap,python

2、使用插件

要引入相应的插件, 使用日期插件要写一段js函数,指定id的名称。

   <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css">


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

</script>

示例

这个用户添加的页面使用的是ModelForm 组件和模板继承,模板文件如下:

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    {% block css %}{% endblock%}
    <style>
        .navbar {
            border-radius: 0;
        }

    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">用户管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li ><a href="/depart/list/">部门管理 </a></li>
                <li><a href="/user/list/">用户管理</a></li>
                <li><a href="/pretty/list/">靓号管理</a></li>
            </ul>
            <!--form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">张顺 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人信息</a></li>
                        <li><a href="#">注销</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a 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 rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.css' %}">
{% endblock %}

{% block content %}

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">新建用户</div>
            <div class="panel-body">
                <form class="form-horizontal" method="post" novalidate>
                    {% csrf_token %}
                    {% for field in form %}
                    <div class="form-group">
                        <div class="col-sm-10">
                            <label> {{ field.label }}</label>
                               {{ field }}
                            <span style="color:red">{{ field.errors.0}}</span>
                        </div>
                    </div>
                     {% endfor %}
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>

    <script>
        $(function () {
            $( "#id_create_time").datepicker({
                    autoclose: true,
                    format: 'yyyy-mm-dd',
                    startDate: 0,
                    language: "zh-CN"
                    });
        });

</script>
{% endblock %}

看页面效果:
django中使用bootstrap-datepicker时间插件,python,django,bootstrap,python文章来源地址https://www.toymoban.com/news/detail-637561.html

到了这里,关于django中使用bootstrap-datepicker时间插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui datepicker时间控件实现范围选择周,季,年。

    因项目要求,需日,周,月,季,年五种日期范围选择器,故参考文章(在末尾)后分享 一.效果图     二、版本及下载 1.实现需要修改源码,目前修改的版本为2.15.3,所以想要实现该方法,请先将elementui升级或者降到2.15.3. 2.将lib包替换到node_module/element-ui下的lib lib包下载地

    2024年01月17日
    浏览(43)
  • element-ui时间选择器(DatePicker )数据回显

    目录 前言 一、element-ui时间选择器(DatePicker )是什么? DatePicker 日期选择器 二、返回数据格式 1.引入 总结 需求: element-ui时间选择器(DatePicker )数据回显,后台返回数据时间,然后回显到前台展示。 效果:   DatePicker 日期选择器 用于选择或输入日期 https://element.eleme.c

    2024年01月19日
    浏览(41)
  • datePicker一个或多个日期组件,如何快捷选择多个日期(时间段)

    elementUI的组件文档中没有详细说明type=\\\"dates\\\"如何快捷选择一个时间段的日期,我们可以通过picker-options参数来设置快捷选择: 通过设置变量pickerOption的值可设置快捷选择: 其中dateFormat方法是将日期格式化,getAllDate方法是获取开始和结束日期之间的全部日期,在data中定义:

    2024年02月13日
    浏览(35)
  • element UI DatePicker 日期选择器 点击时间点可选限制范围前后十五天

    设置:picker-options=\\\"pickerOptions\\\" 然后在data里面设置 源代码

    2024年02月06日
    浏览(54)
  • 利用Django和Bootstrap如何实现收藏功能?

    要实现影片详情页中的收藏按钮,可以结合Bootstrap和Django来完成。以下是一种可能的实现方式: 数据库模型: 首先,你需要有一个数据库模型来存储用户的收藏信息。在Django中,可以创建一个模型来表示用户的收藏关系,例如: 视图函数: 创建一个视图函数,用于处理用户

    2024年02月02日
    浏览(37)
  • ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现

    未选择时间时,最初选择时间不能超过今天 选择初始时间后,第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。 例如:点击7月15日后,在8月14日往后的日期全部禁止选中 7月15日前一个月的6月15日之前的日期也全部禁止选中 选好起始时间和结束

    2024年02月14日
    浏览(37)
  • 用前端框架Bootstrap和Django实现用户注册页面

    命令如下: 执行下面条命令依次创建需要的应用: 名叫users的应用创建好后,还需要在全局配置文件中对应在用进行注册,具体方法如下: 打开““E:Python_projectP_001myshop-testmall_backendmall_backendsettings.py””文件,找到名叫“INSTALLED_APPS”的列表(list),在其中加入应用名,

    2024年02月06日
    浏览(51)
  • 【Bootstrap 学习笔记】Bootstrap 提供相应插件在HTML页面中实现动态交互效果

    Bootstrap 提供相应插件在 HTML 页面中实现动态交互效果。 1)前提条件 由于 Bootstrap 提供的插件都是依赖于 jQuery 的,所以必须要先引入 jQuery 文件。 Bootstrap 的每个插件都对应具有一个 JavaScript 文件,允许单独引入到 HTML 页面。也提供了一个完整版本(Bootstrap.js 或 Bootstrap.min

    2024年02月13日
    浏览(102)
  • django bootstrap html实现左右布局,带折叠按钮,左侧可折叠隐藏

         在django项目中,需要使用bootstrap 实现一个左右分布的布局,左侧区域可以折叠隐藏起来,使得右侧的显示区域变大。(为了区分区域,左右加了配色,不好看的修改颜色即可)  点击折叠按钮,左侧区域隐藏,右侧区域铺满:          1、使用col-md属性,让左右两个区

    2024年02月14日
    浏览(55)
  • 用前端框架Bootstrap的AdminLTE模板和Django实现后台首页的页面

    承接博文 用前端框架Bootstrap和Django实现用户注册页面 继续开发实现 后台首页的页面。 以下需要的四个文件夹及里面的文件百度网盘下载链接: https://pan.baidu.com/s/1QYpjOfSBJPmjmVuFZdSgFQ?pwd=o9ta 下载 AdminLTE-3.1.0-rc 并解压缩 把文件夹 other 和 pages 复制到 “E:Python_projectP_001myshop-t

    2024年02月06日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包