近期使用了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. jQuery PC端图片预览,鼠标移上去查看大图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. hibernate inverse属性

    修改街道对应的区道信息: 修改后会发现程序执行了两次修改操作: 原因: 区道与街道是一对多的关系: 由于Hibernate是双向维护外键,所以当修改区道中的街道时,会修改一次外键:在修改街道中的区道时 ...

  3. B2. Concurrent 线程池(Executor)

    [概述] 与数据库连接管理类似,线程的创建和销毁会耗费较大的开销,使用 “池化技术” 来更好地利用当前线程资源,减少因线程创建和销毁带来的开销,这就是线程池产生的原因. [无限创建线程的不足] 在生产 ...

  4. 题解 洛谷P1903/BZOJ2120【[国家集训队]数颜色 / 维护队列】

    对于不会树套树.主席树的本蒟蒻,还是老老实实的用莫队做吧.... 其实这题跟普通莫队差不了多远,无非就是有了一个时间,当我们按正常流程排完序后,按照基本的莫队来,做莫队时每次循环对于这一次操作,我们在 ...

  5. 零基础入门学习Python(2)--用Python设计第一个游戏

    前言 小甲鱼的Python课程都是围绕着一个个小游戏,进行Python的讲解,由易入难. 小游戏流程图 Created with Raphaël 2.1.2Startprint('---------- ...

  6. CSS——可视化格式模型

    CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示): 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局: 换句话说,盒子模型规定了 ...

  7. C51 使用端口 个人笔记

    使用整个端口的8个引脚: 八个引脚,需要8位2进制,2位十六进制 #define P0 led led = 0x3f; //led = ~0x3f; 使用某个端口的某一个引脚 sbit led = P ...

  8. 确定协议-通过分析系统阶段需要知道该系统能不能进行性能测试-Omnipeek

  9. myeclipse通过数据表生成jpa或hibernate实体---https://blog.csdn.net/partner4java/article/details/8560289

    myeclipse通过数据表生成jpa或hibernate实体-----https://blog.csdn.net/partner4java/article/details/8560289

  10. Android BGABadgeView:BGABadgeLinearLayout以整体线性布局作为BadgeView(3)

     Android BGABadgeView:BGABadgeLinearLayout以整体线性布局作为BadgeView(3) Android BGABadgeView不仅可以把某个View作为B ...