近期使用了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. 20181017 work - Inno Setup 禅道 xp系统 楷体字体 win10倒计时 nwjs chosen

    win10 闹钟和时钟 用个倒计时 Inno Setup 编译器 把应用程序打包成安装程序 nwjs-v0.14.7-win-ia32 XP专用 chrome用的49的版本 作用是把浏览器地址的程序打 ...

  2. DEBUG无法进入断点解决方法

    18/08/17 任务栏:Tools->Options->Debugging->General->Require source files to exactly match t ...

  3. Vue+Bootstrap实现购物车程序(1)

    先看下案例效果:(简单的数量控制及价格运算) 代码: <!DOCTYPE html> <html> <head lang="en"> <m ...

  4. 编程规范:allocator

    一.作用 标准库allocator类定义在头文件memory中,它帮助我们将内存分配和对象构造分离开来 allocator<T> a //定义一个名为a的allocator对象,它可以为类 ...

  5. 用1天快速上手org-mode(windows系统)

    Table of Contents 1. 选择Emacs的理由--Org-mode 1.1. 现状(基于本人现有软件的使用) 1.2. 理念(够用才好) 1.3. 学习过程(少走弯路) 2. 快速安装 ...

  6. POJ 1664 放苹果( 递推关系 )

    链接:传送门 思路:苹果m个,盘子n个.假设 f ( m , n ) 代表 m 个苹果,n个盘子有 f ( m , n ) 种放法. 根据 n 和 m 的关系可以进一步分析: 特殊的 n = 1 || ...

  7. [Python3网络爬虫开发实战] 2.5-代理的基本原理

    我们在做爬虫的过程中经常会遇到这样的情况,最初爬虫正常运行,正常抓取数据,一切看起来都是那么美好,然而一杯茶的功夫可能就会出现错误,比如403 Forbidden,这时候打开网页一看,可能会看到“您的 ...

  8. 安装配置elasticsearch、安装elasticsearch-analysis-ik插件、mysql导入数据到elasticsearch、安装yii2-elasticsearch及使用

    一.安装elasticsearch 获取elasticsearch的rpm:wget https://download.elastic.co/elasticsearch/release/org/ela ...

  9. 解决Antimalware Service Executable CPU,内存占用高的问题

    1.win键+R键打开运行对话框框,输入gpedit.msc打开本地组策略编辑器(组策略):2.依次打开计算机配置-管理模板-Windows组件-Windows Defender:3.如果要关闭Win ...

  10. VI/VIM 编辑器

    [是什么?] VI 是 Unix 操作系统和类 Unix 操作系统中最通用的文本编辑器. VIM 编辑器是从 VI 发展出来的一个性能更强大的文本编辑器.可以主动的以字体颜色辨别语法的正确性,方便程序 ...