近期使用了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. CREATE CONSTRAINT TRIGGER - 定义一个新的约束触发器

    SYNOPSIS CREATE CONSTRAINT TRIGGER name AFTER events ON tablename constraint attributes FOR EACH ROW ...

  2. 前端入门22-讲讲模块化 包括webstrom建立简单ES6

    https://www.cnblogs.com/dasusu/p/10105433.html

  3. ssd训练自己的数据集

    1.在ssd/caffe/data下创建VOC2007的目录,将ssd/caffe/data/VOC0712里的create_data.sh.create_list.sh和labelmap_voc.p ...

  4. 双引号" "和单引号' '区别

    双引号是字符串,单引号是字符 “\n”与'\n': 相同点: 都能起到换行作用     不同点: "\n" <=> {'\n', '\0'} '\n' <=> ...

  5. PHP 下基于 php-amqp 扩展的 RabbitMQ 简单用例 (二) -- Topic Exchange 和 Fanout Exchange

    Topic Exchange 此模式下交换机,在推送消息时, 会根据消息的主题词和队列的主题词决定将消息推送到哪个队列. 交换机只会为 Queue 分发符合其指定的主题的消息. 向交换机发送消息时,消 ...

  6. 指定PHP编码

    有时候我们写好的PHP页面在网页中打开是乱码的,就需要指定编码,即加入代码: header("content-type:text/html;charset=utf-8"); 位置图 ...

  7. Conv1D和Conv2D的区别

    我的答案是,在Conv2D输入通道为1的情况下,二者是没有区别或者说是可以相互转化的.首先,二者调用的最后的代码都是后端代码(以TensorFlow为例,在tensorflow_backend.py里 ...

  8. 精准判断是360、IE和其他浏览器

    function myexplorer(){ var explorer = window.navigator.userAgent; if (!!window.ActiveXObject || &quo ...

  9. show()的几种方法

    1 show()方法和hide()方法 $("selector").show()  从display:none还原元素默认或已设置的display属性$("selecto ...

  10. laydate组件选择时间段的判断

    前言: 在使用laydate组件的时候,难免会遇到选择时间段,官网给的文档中有选择时间段的组件,但是并不好用,首先只能选择一个月的时间段,有局限性,其次精确到时间的话要先选日期范围再选时间范围,很变态 ...