Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结
by:授客 QQ:1033553122
- 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
- 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' %}" />
<!-- 加载 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' %}"/>
<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日期/日历插件Datepicker 时间加标记
由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...
- bootstrap-year-calendar全年日历插件
使用方法使用bootstrap-year-calendar插件需要引入jQuery.Bootstap3的相关依赖文件和插件本身需要的js和css文件. <link rel="style ...
- jQuery时间轴插件timeline.js
http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...
- 日历插件:Bootstrap的datetimepicker插件
注意:可以选择性引入 bootstrap.min.css和bootstrap.min.js,引入样式更好控制 option选项 0-hour 1-day 2-month 3-year 4-all ye ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
- bootstrap的日期插件datetimepicker有问题
bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...
- bootstrap时间插件 火狐不显示 完美解决方法
原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...
- bootstrap时间区间设置方法
我们在开发过程中经常有时间区间的要求,在多次"失败"及翻阅资料之后终于找到了适合我的方法,所以给大家分享出来. 基本需求为可以设置时间,设置时间区间,后一时间日期不可提前于前一时间 ...
- ClockPicker – 时钟风格 Bootstrap 时间选择器
ClockPicker 是国内前端开发者发布的一个时钟样式 Timepicker,可以用于 Bootstrap 和 jQuery.所有主流浏览器都支持,包括 IE9+,支持移动设备,能够在触摸屏设备很 ...
随机推荐
- 一个小工具帮你搞定实时监控Nginx服务器
Linux运维工程师的首要职责就是保证业务7 x 24小时稳定的运行,监控Web服务器对于查看网站上发生的情况至关重要.关注最多的便是日志变动,查看实时日志文件变动大家第一反应应该是'tail -f ...
- 数据库学习笔记day01+day02
--表示系统时间select sysdate from dual --表是关系型数据库的基本结构--表是二维的,由行和列组成--行称为记录,列称为字段 --创建第一张表create table hw( ...
- Android 列表对话框 setItems
private Button button; private final CharSequence[] items = { "北京", "上海", " ...
- Sql Server数据库常用Transact-SQL脚本
数据库 1.创建数据库 USE master ; GO CREATE DATABASE Sales ON ( NAME = Sales_dat, FILENAME = 'C:\Program File ...
- threejs 绘制辅助网格
GridHelper.js可以帮助绘制一个xz平面网格,它没有提供更多的参数,所以不能用于生成xy网格. xy网格实现代码如下: var size = 6000; var divisions = 50 ...
- SpringCloud服务过滤filter
一.目录展示 二.application.yml配置文件 三.MyZuulFilter package com.zn.filter; import com.netflix.zuul.ZuulFilte ...
- C语言笔记 01_介绍&环境设置&编译执行
前言 我是作为一个前端开发者入的编程世界,经过时间的推移,我发现对于编程底层的一些东西一点都不了解,只拘泥于表面,所以想尝试学习C语言然后进一步了解底层机制. 介绍 C 语言是一种通用的.面向过程式的 ...
- Socket实现简易聊天室,Client,Server
package seday08; import java.io.BufferedWriter;import java.io.OutputStream;import java.io.OutputStre ...
- 我应该怎么学习SAP?
越来越多的人关注本公众号,在后台留言问我怎么进入SAP行业,应该怎么学习SAP,大部分都是外行想入行SAP的朋友.作为过来人,这些问题我也曾经问过别人,也走过不少弯路.但现在轮到别人问我了,为了让初学 ...
- Android8.1 MTK平台 SystemUI源码分析之 网络信号栏显示刷新
SystemUI系列文章 Android8.1 MTK平台 SystemUI源码分析之 Notification流程 Android8.1 MTK平台 SystemUI源码分析之 电池时钟刷新 And ...