近期使用了bootstrap的UI感觉确实非常美丽,非常值得学习和使用。

以下先简单了解下bootstrap的时间控件。

这个时间控件使用起来还是很的简单。仅仅须要引入主要的css和js就能够了

须要引入的css和js:(文件引入路径依据自己的项目而定)

<link href="<c:url value='/plugins/bootstrap-datetimepicker/css/datetimepicker.css'/>"
rel="stylesheet" type="text/css" />
<link href="<c:url value='/plugins/bootstrap/css/bootstrap.min.css'/>" rel="stylesheet" type="text/css"/>
<script type="text/javascript"
src="<c:url value='/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.fr.js'/>"></script>
<script src="<c:url value='/plugins/bootstrap/js/bootstrap.min.js'/>" type="text/javascript" ></script>
<script src="<c:url value='/plugins/jquery-1.10.2.min.js'/>" type="text/javascript"></script>

控件和js的调用:

<input id="startDate" size="16" type="text" >
$('#startDate').datetimepicker({
format : 'yyyy-mm-dd',
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
forceParse : 0,
showMeridian : 1,
language: 'zh-CN',//汉化
minView: "month" //选择日期后,不会再跳转去选择时分秒
});

以下来看看效果图:

插件下载地址http://download.csdn.net/detail/javaweiming/8140797

bootstrap 时间控件的更多相关文章

  1. angularjs 整合bootstrap 时间控件

    一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...

  2. Bootstrap 时间控件datetimepicker与timepicker

    一.datetimepicker 首先,我们看看点击选择时间的时候的展示页面吧 年                                                月           ...

  3. bootstrap 时间控件带(时分秒)选择器

    1.控件下载地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm,参数设置说明也在这个链接下面: 2.具体参数说明(复制原链接) ...

  4. bootstrap 时间控件带(时分秒)选择器(需要修改才能显示,请按照参数说明后面的步骤进行修改)

    1.控件下载地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm,参数设置说明也在这个链接下面: 2.具体参数说明(复制原链接) ...

  5. Bootstrap时间控件常用配置项

    1.给下面4个文本框初始化   $(function(){ $("#orderStartTime,#orderEndTime,#preSaleStartTime,#preSaleEndTim ...

  6. Bootstrap中时间(时间控件)的设计

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

  7. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  8. bootstrap的时间控件使用(双日历)

    这段时间看了下bootstrap的时间控件,发现使用起来还是很简单的,趁着有时间的时候整理了一下,方便自己以后忘记的时候查阅... 废话不多说先上效果图 接下来是代码实现 第一步当然是导入css.js ...

  9. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

随机推荐

  1. Spring启动执行流程梳理

    注:本文梳理启动流程使用的Spring版本:4.0.2.RELEASE 使用spring配置,都需要在web.xml中配置一个spring的监听器和启动参数(context-param),如下: &l ...

  2. error while loading shared libraries: libclntsh.so.11.1

    解决这个问题有两种方法 1.在当前用户下,添加链接库所在路径 LD_LIBRARY_PATH=$ORACLE_HOME/lib:$LD_LIBRARY_PATH; export LD_LIBRARY_ ...

  3. Buffer.allocUnsafe()

    Buffer.allocUnsafe(size) size {Number} 分配一个 size 字节大小的新的非零填充(non-zero-filled)的 Buffer.size 必须小于等于 re ...

  4. [bzoj3531][Sdoi2014][旅行] (主席树+树链剖分)

    Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰. ...

  5. Vue如何使用vue-awesome-swiper实现轮播效果

    在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用.一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有 ...

  6. 【03】Html书写规范

    [03]   Html书写规范   1.推荐使用html5的文档声明 <!DOCTYPE HTML> 2.必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码 ...

  7. map.keySet()获取map全部的key值

    map.keySet()获取map全部的key值   public static String getUrlWithQueryString(String url, Map<String, Str ...

  8. [luoguP1944] 最长括号匹配_NOI导刊2009提高(1)

    传送门 非常傻的DP. f[i]表示末尾是i的最长的字串 #include <cstdio> #include <cstring> #define N 1000001 int ...

  9. [K/3Cloud] 如何代码中动态设置当前活动页签

    this.GetControl<TabControl>(key).SelectedIndex=目标Index Ps:如下方式隐藏页签: this.View.GetControl(" ...

  10. [ C++ 快速高精度模板 ] [ BigN类 ] 大整数类 高精度 模板 BigInt FFT 快速傅里叶变换

    [原创 转载请注明]瞎写的,如果代码有错,或者各位大佬有什么意见建议,望不吝赐教 更新日志: 对于规模较小的整数乘法使用$$O(n^2)$$方法,提高速度 modify()和operator[]的bu ...