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

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

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

 


  1. 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设置

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">

 

{% load staticfiles %}

 

<script type="text/javascript" src="{% static  'website/jquery-3.2.1.min.js' %}" defer>script>

 

 

<link rel="stylesheet" type="text/css" href="{% static 'website/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" />

 

<script type="text/javascript" src="{% static  'website/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}" defer>script>

 

 

   ……略

 

<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>

<script type="text/javascript" src="{% static 'website/bootstrap-datetimepicker-4.17.47/js/locales/bootstrap-datetimepicker.zh-CN.js' %}" defer>script>

 

 

 

 

   ……略

 

 

head>

 

 

toolbar工具条

 

新增



修改



删除




 

角色名称


开始时间





结束时间






 

查询





 

 

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 // 选择时间时,点击分后,关闭时间插件框}

});

目录
相关文章
|
9月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
158 0
|
前端开发
表格插件-bootstrap table的隔行换色
表格插件-bootstrap table的隔行换色
146 0
|
前端开发 JavaScript
表格插件-bootstrap table的表内查看编辑删除
表格插件-bootstrap table的表内查看编辑删除
122 0
|
2月前
|
资源调度 前端开发 JavaScript
Bootstrap日期选择器插件bootstrap-datepicker
Bootstrap日期选择器插件bootstrap-datepicker
126 12
|
2月前
|
前端开发 JavaScript
bootstrap右键菜单插件
这是一款基于bootstrap的jquery右键菜单插件。该bootstrap右键菜单使用Bootstrap dropdown组件来制作,并通过tether插件进行定位,具有多级菜单,灵活,响应式等特点
|
3月前
|
Java 数据库连接 数据库
springboot启动配置文件-bootstrap.yml常用基本配置
以上是一些常用的基本配置项,在实际应用中可能会根据需求有所变化。通过合理配置 `bootstrap.yml`文件,可以确保应用程序在启动阶段加载正确的配置,并顺利启动运行。
464 2
|
6月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
72 0
|
8月前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
49 0
bootstrap+fileinput插件实现可预览上传照片功能
bootstrap+fileinput插件实现可预览上传照片功能
150 0
|
9月前
|
机器学习/深度学习 前端开发 自动驾驶
【视频】什么是Bootstrap自抽样及应用R语言线性回归预测置信区间实例|数据分享
【视频】什么是Bootstrap自抽样及应用R语言线性回归预测置信区间实例|数据分享