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 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
javascript白色简洁计算器
May 04 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
vue如何截取字符串
May 06 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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使用Cookie控制访问授权的方法
2015/01/21 PHP
Laravel 5 学习笔记
2015/03/06 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
JavaScript延迟加载
2021/03/09 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
webpack入门必知必会
2017/01/16 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
js实现一键复制功能
2017/03/16 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python科学画图代码分享
2017/11/29 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python连接mysql有哪些方法
2020/06/24 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
医学护理毕业生自荐信
2013/11/07 职场文书
我的小天地教学反思
2014/04/30 职场文书
邀请函模板
2015/02/02 职场文书