当前位置：主页 > jquery教程 > Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

Bootstrap时间日历插件bootstrap-datetimepicker配置及用法

  • 更新时间：2020-01-07 10:42:26
  • 编辑：益丹洁
给寻找编程代码教程的朋友们精选了Bootstrap时间日历插件相关的编程文章，网友聂雅珺根据主题投稿了本篇教程内容，涉及到Bootstrap、时间日历插件、bootstrap-datetimepicker、Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结相关内容，已被444网友关注，下面的电子资料对本篇知识点有更加详尽的解释。

参考资料

正文内容

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

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配置与应用小结,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Bootstrap时间日历插件相关教程

  • 简洁实用的BootStrap jQuery手风琴插件

    这篇文章主要介绍了简洁实用的BootStrap jQuery手风琴插件知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下

    发布时间：2019-07-25

  • 详解bootstrap-fileinput文件上传控件的亲身实践

    这篇文章主要介绍了详解bootstrap-fileinput文件上传控件的亲身实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2019-06-21

  • jQuery实战案例精粹

    jQuery实战案例精粹

    jQuery实战案例精粹 从Web开发的实际应用角度出发，结合当下热门的 jQuery插件技术，深入浅出地介绍了 jQuery高性能开发的技巧，是前端开发、设计人员的绝佳选择。 本书共 22章，介绍了 jQuer

    大小：272 MBjQuery电子书

  • Bootstrap与jQuery UI框架设计

    Bootstrap与jQuery UI框架设计

    随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

    大小：180 MBjQuery电子书

  • Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

    Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

    本书是著名前端开发大牛阮晓龙老师爽作，HTML5、CSS3、jQuery、AJAX一站搞定，一本真正好学、实用又精彩的书，讲述了用HTML5 CSS3设计构建网站的必备知识，欢迎下载

    大小：167.1 MBWeb前端电子书

  • PHP与jQuery开发实例

    PHP与jQuery开发实例

    这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格，探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

    大小：9.8 MBPHP开发

  • jQuery实战

    jQuery实战

    jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员，jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员，无论起点如何。本书深入介绍了整个jQuery框架，此外

    大小：99.0 MBjQuery电子书

  • jQuery EasyUI开发指南

    jQuery EasyUI开发指南

    使用Java开发软件的开发人员一定会接触到前端开发，而前端开发有一个流行趋势，那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

    大小：48.4 MBjQuery电子书

  • jQuery实战从入门到精通

    jQuery实战从入门到精通

    本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术，适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

    大小：189.1 MBjQuery电子书

用户留言

发布评论

最新更新

热门推荐