Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结


Posted in Javascript onMay 28, 2019

1.   测试环境

win7

JQuery-3.2.1.min.js

下载地址:

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

Bootstrap-3.3.7-dist

下载地址:

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip

bootstrap-table-develop-v1.12.1.zip

下载地址:

https://github.com/wenzhixin/bootstrap-table

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-table-develop-v1.12.1.zip

bootstrap-datetimepicker-master-v4.17.47.zip

下载地址:

https://github.com/Eonasdan/bootstrap-datetimepicker

1.2.   配置与应用

效果展示

HTML代码片段

head设置

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
{% load staticfiles %}
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script type="text/javascript" src="{% static 'website/jquery-3.2.1.min.js' %}" defer></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="{% static 'website/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="external nofollow" />
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script type="text/javascript" src="{% static 'website/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}" defer></script>
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" defer></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" defer></script>
<![endif]-->
  ……略
<!-- bootstrap-datetimepicker -->
<link rel="stylesheet" href="{% static 'website/bootstrap-datetimepicker-4.17.47/css/bootstrap-datetimepicker.min.css' %}" rel="external nofollow" />
<script type="text/javascript" src="{% static 'website/bootstrap-datetimepicker-4.17.47/js/bootstrap-datetimepicker.min.js' %}" defer></script>
<!-- 引入中文语言包,注意:locale files 必须放在bootstrap-datetimepicker.min.js后面 -->
<script type="text/javascript" src="{% static 'website/bootstrap-datetimepicker-4.17.47/js/locales/bootstrap-datetimepicker.zh-CN.js' %}" defer></script>
  ……略
 </head>

toolbar工具条

<div class="container-fluid">
<div class="row">
<table id="roleTable"></table>
<div id="toolbar">
<div class="btn-group">
<button class="btn btn-default" data-toggle="modal" data-target="#roleDialog" id="addBtn">新增
<i class="glyphicon glyphicon-plus"></i>
</button>
<button class="btn btn-default" id="editBtn">修改
<i class="glyphicon glyphicon-edit"></i>
</button>
<button class="btn btn-default" id="deleteBtn">删除
<i class="glyphicon glyphicon-remove"></i>
</button>
</div>
<form class="form-inline" id="queryForm">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">角色名称</div>
<input type="text" class="form-control" name="roleNameQ" id="roleNameQ" placeholder="请输入角色名称">
</div>
<div class="input-group date" id="startTimePicker">
<div class="input-group-addon">开始时间</div>
<input type="text" class="form-control" name="startTime" id="startTime" >
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="input-group date" id="endTimePicker">
<div class="input-group-addon">结束时间</div>
<input type="text" class="form-control" name="endTime" id="endTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<button type="button" id="queryBtn" class="btn btn-primary queryButton">查询</button>
</form>
</div>
</div>
</div>

JS代码片段

时间插件配置

// 设置开始时间插件
$('#' + startTimePickerID).datetimepicker({
language: 'zh-CN',// 默认值: 'en',设置控件上的文案为中文
format:'yyyy-mm-dd HH:mm:ss', //格式化,以便精确到秒
autoclose:true // 选择时间时,点击分后,关闭时间插件框
});
// 设置结束时间插件
$('#' + endTimePickerID).datetimepicker({
language: 'zh-CN',
format:'yyyy-mm-dd HH:mm:ss',
autoclose: true // 选择时间时,点击分后,关闭时间插件框}
});

总结

以上所述是小编给大家介绍的Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
如何实现双向绑定mvvm的原理实现
May 28 #Javascript
vue实现带复选框的树形菜单
May 27 #Javascript
vue实现按需加载组件及异步组件功能
May 27 #Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 #Javascript
原生js实现each方法实例代码详解
May 27 #Javascript
深入学习JavaScript中的bom
May 27 #Javascript
Vue实现根据hash高亮选项卡
May 27 #Javascript
You might like
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
python连接数据库的方法
2017/10/19 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
python 字段拆分详解
2019/12/17 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
北京振戎融通Java面试题
2015/09/03 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
《圆明园的毁灭》教学反思
2014/02/28 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
幼儿园见习报告
2014/10/30 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python