Bootstrap Timepicker使用
最近写项目用到了时间插件,开始选择得是常用的Bootstrap Datetimepicker,但是后来由于业务需要,只能选择时间而不能选择日期,所以最后又用了一下BootStrap Timepicker,所以今天就抽时间分享一下吧。
要用Timepickr,首先自然是引入JS文件,这些在官网上可以下载,所以就不在废话了,直接上例子吧
引入js和样式文件:
<link rel="stylesheet" href="${baseurl }/styles/datetimepicker/bootstrap-timepicker.min.css"/>
<script type="text/javascript" src="${baseurl }/scripts/bootstrap/datetimepicker/bootstrap-timepicker.min.js"></script>
HTML:
<div class="col-md-2" style="width: 15%; position: relative; float: left;" align="left">
<div class="input-group monday">
<input type="text" readonly="readonly" id="monday_s" class="form-control timepicker timepicker-default startTime">
</div>
</div>
<div style="width: 5%; position: relative; float: left;" align="center">
<p>-</p>
</div>
<div class="col-md-2" style="width: 15%; position: relative; float: left;" align="left">
<div class="input-group monday">
<input type="text" readonly="readonly" id="monday_e" class="form-control timepicker timepicker-default endTime">
</div>
</div>
上面的div就是插件的容器。上面的做完之后,只需要初始化一下就可以使用了:
<script type="text/javascript">
$(function() {
$('.timepicker').timepicker({
defaultTime:'9:00',
showMeridian:false,
});
});
</script>
初始化需要的属性在官网上也都有说明,个人感觉还是很方便的。下面是效果
ootstrap Timepicker
Bootstrap Timepicker使用相关推荐
- (转)Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
- 30 个惊艳的 Bootstrap 扩展插件
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的We ...
- Ace - Responsive Admin Template
转载:http://blog.csdn.net/pondbay/article/details/40341657# Ace简介: Ace 是一个轻量.功能丰富.HTML5.响应式.支持手机及平板电脑上 ...
- 基于Bootstrap的时分秒选择控件timepicker
基于Bootstrap的时分秒选择控件timepicker 最近项目中要用到时间选择控件,然而研究了半天并没有发现 bootstrap-datetimepicker 控件只选择时分秒的配置方法.自己动 ...
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
- 黄聪: 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
- GitHub托管BootStrap资源汇总(持续更新中…)
Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...
- 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
- GitHub托管BootStrap资源汇总
MESSENGER 替换alert()消息和其他用户交互通知. JQUERY.TOCIFY.JS 可以用Bootstrap或jQueryUI主题的Jquery表格组件. BOOTSTRAP-PROMP ...
最新文章
- 睡不着的时候,我会......
- NodeJS学习日记--VSCode下调试
- 函数式编程 读书笔记
- Ansible Tower - 使用入门 3 - 通过模板运行 Git 上的 Playbook 和 Role
- layuiajax提交表单控制层代码_无代码搭建系统(一)——流程表单搭建
- Python+tkinter+pillow实现屏幕任意区域截图
- LOL服务器维护打排位算吗,LOL:请停止你的排位行为,这是连败前的征兆!再玩就会一直掉分...
- 详解卷积神经网络(CNN)在语音识别中的应用
- CP_EndPoint环境中的Hotspot Settings
- 从ISSCC2021论文看未来技术发展趋势
- 计算机强制关机后重启报错,电脑开起来就自动关机
- 自定义纸张重启就没了
- 多元共线性检测 -- 方差膨胀因子(Python 实现)
- WinHex(16进制编辑器)
- 计网:网络层协议ICMP
- Java是用来干什么的?
- 小白对于学习对象和类的总结,定义一个圆柱体类Cylinder,并创建相应的对象,然后计算圆柱体的底面积和面积.
- 瑞芯微RK3399Pro平台YOLOv4 pytorch模型转RKNN模型失败
- k8s Active: activating (auto-restart)处理
- 【ChatGPT】【Sloved】Access denied,Error reference number: 1020
热门文章
- antdesign 新增页面_ant design pro (四)新增页面
- 网络通信协议篇(三)
- 【喜欢的诗词】好了歌
- (大快人心,必须转啊)中国体操男队完美逆转卫冕 日本申诉成功获银牌
- 嵌入式开发之zynqMp ---Zynq UltraScale+ MPSoC 图像编码板zcu102
- 训练局限玻尔斯曼机(Training Restricted Boltzmann Machines)
- Unity设置物体的自转和公转
- springboot 使用ftl模板导出echarts图表到word
- vue 跳转页面带对象_vue 页面跳转传参
- C语言 mktime() gmtime()实现——亲测正确性