Bootstrap中时间(时间控件)的设计
运用bootstrap的时间控件,生成时间选择器。
1.截图:有以下这些样式
10年视图 年视图 月视图 日视图 小时视图





2.视图设计:
1).年视图代码:
<div class="container">
<input class="form_datetime form-control" type="text" value="" size="16">
</div>
/*样式头*/
<link rel="stylesheet" href="../../css/bootstrap.min.css" media="screen">
<link href="../../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
/*js代码*/ <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "yyyy-mm",
autoclose: true,
todayBtn: true,
todayHighlight: true,
showMeridian: true,
pickerPosition: "bottom-left",
language: 'zh-CN',//中文,需要引用zh-CN.js包
startView: 3,//月视图
minView: 4//日期时间选择器所能够提供的最精确的时间选择视图
});
3.附加几个自己测试过的笔友的分享:
Bootstrap日期/日历插件Datepicker 时间加标记:http://www.cnblogs.com/chenche/archive/2013/09/27/3342155.html
bootstrap datepicker只选择年份: https://zhidao.baidu.com/question/433308979477858884.html
Bootstrap日期和时间表单组件:http://www.bootcss.com/p/bootstrap-datetimepicker/
手册地址:http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate
4.PS:文章写的潦草,如有需要交流请加qq:2318645572
Bootstrap中时间(时间控件)的设计的更多相关文章
- Bootstrap中datetimepicker日期控件1899年问题解决
Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...
- bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
- 今天使用bootstrap中的tagsinput控件,碰到个小问题
我直接使用时,后台一直报Uncaught Can't add objects when itemValue option is not set错误, 代码如下: <div> <inp ...
- WPF Timeline简易时间轴控件的实现
原文:WPF Timeline简易时间轴控件的实现 效果图: 由于整个控件是实现之后才写的教程,因此这里记录的代码是最终实现后的,前后会引用到其他的一些依赖属性或者代码,需要阅读整篇文章. 1.确定T ...
- 第32讲 UI组件之 时间日期控件DatePicker和TimePicker
第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置, Time ...
- SNF开发平台WinForm之十五-时间轴控件使用-SNF快速开发平台3.3-Spring.Net.Framework
一.显示效果如下: 二.在控件库里选择UCTimeAxis 拖拽到窗体里. 三.加入以下代码,在load事件里进行调用就可以运行了. #region 给时间轴控件加载数据 private void U ...
- 老猪带你玩转自定义控件三——sai大神带我实现ios 8 时间滚轮控件
ios 8 的时间滚轮控件实现了扁平化,带来很好用户体验,android没有现成控件,小弟不才,数学与算法知识不过关,顾十分苦恼,幸好在github上找到sai大神实现代码,甚为欣喜,顾把学习这个控件 ...
- 给easyui datebox时间框控件扩展一个清空的实例
给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...
- mui 时间日期控件(浏览器上无法查看,在手机端可以点击)
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
- WPF 时间编辑控件的实现(TimeEditer)
一.前言 有个项目需要用到时间编辑控件,在大量搜索无果后只能自己自定义一个了.MFC中倒是有这个控件,叫CDateTimeCtrl.大概是这个样子: 二.要实现的功能 要实现的功能包含: 编辑时.分. ...
随机推荐
- 跳出弹窗页面禁止滚动(PC端和手机端)
pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.stop.prevent 3.前端页面弹 ...
- MySQL-checkpoint技术
几个知识点: 缓冲池:缓存磁盘数据,通过内存速度弥补CPU速度和磁盘速度的鸿沟. 脏页:LRU列表中被修改的页,和磁盘上的数据不一致 刷新频率:每次有脏页就刷新,开销很大.需要一种刷新机制 数据丢失: ...
- RN app打包
最近使用React Native做起了移动应用,之前做过一点react,有一点react基础,后来听说RN还不错,就做起了RN项目.为了让辛辛苦苦开发的项目想在手机端运行,就涉及到发布打包. 防止自己 ...
- 六款常见的Linux操作系统推荐
家常常可能因为工作或学习的需要,要使用个操作系统(比如Windows和Linux).大家对Windwos支持的文件系统可能比较熟悉,而对Linux操作系统所支持的文件系统也许比较陌生.下面小编为大家推 ...
- 并发-Synchronized底层优化(偏向锁、轻量级锁)
Synchronized底层优化(偏向锁.轻量级锁) 参考: http://www.cnblogs.com/paddix/p/5405678.html 一.重量级锁 上篇文章中向大家介绍了Synchr ...
- IIS Manager could not load type for module provider 'SharedConfig' that is declared in administration.config
https://support.microsoft.com/en-ie/help/3151973/iis-shared-configuration-feature-requires-all-serve ...
- css3+jQuery实现按钮水波纹效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 用verilog来描述组合逻辑电路
1,什么是组合逻辑电路? 逻辑电路在任何时刻产生的稳定的输出信号仅仅取决于该时刻的输入信号,而与过去的输入信号无关,即与输入信号作用前的状态无关,这样的电路称为组合逻辑电路. 上图给出了一个典型的数字 ...
- git rm -r --cached 去掉已经托管在git上的文件
1.gitignore文件 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 .gitignore 文件的方法.这个文件每一行保存了一个匹配的规则例如: # 此为注释 – 将被 ...
- 设置Qt程序在Windows开机后自动运行
(转自:http://blog.csdn.net/weiren2006/article/details/7443362) 主要原理是修改Windows的注册表来实现的,Qt的QSettings提供了访 ...