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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
js word表格动态添加代码
Jun 07 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
浅谈Vue的响应式原理
May 30 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
详解Python中的文本处理
2015/04/11 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python mysql中in参数化说明
2020/06/05 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
会计岗位职责
2013/11/08 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
公司离职证明标准格式
2014/11/18 职场文书
销售辞职信范文
2015/03/02 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
高中班主任心得体会
2016/01/07 职场文书
win10清理dns缓存
2022/04/19 数码科技