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

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

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

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

  1. <link href="<c:url value='/plugins/bootstrap-datetimepicker/css/datetimepicker.css'/>"
  2. rel="stylesheet" type="text/css" />
  3. <link href="<c:url value='/plugins/bootstrap/css/bootstrap.min.css'/>" rel="stylesheet" type="text/css"/>
  4. <script type="text/javascript"
  5. src="<c:url value='/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js'/>"></script>
  6. <script type="text/javascript"
  7. src="<c:url value='/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.fr.js'/>"></script>
  8. <script src="<c:url value='/plugins/bootstrap/js/bootstrap.min.js'/>" type="text/javascript" ></script>
  9. <script src="<c:url value='/plugins/jquery-1.10.2.min.js'/>" type="text/javascript"></script>

控件和js的调用:

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

以下来看看效果图:

插件下载地址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. <jsp:include page="${pageContext.request.contextPath/index.jsp" ></jsp:include> 引发的错误

    路径引发的错误 如下使用项目路径对jsp页面进行获取,会报javax.servlet.ServletException: File "/web/dbwx/web/public/page_to ...

  2. 【git】搭建git服务器

    在 Linux 下搭建 Git 服务器 目录 ① 安装 Git ② 服务器端创建 git 用户,用来管理 Git 服务,并为 git 用户设置密码 ③ 服务器端创建 Git 仓库 ④ 客户端 clon ...

  3. Vue beaforeCreate时获取data中的数据

    异步获取即:通过    $this.$nextTick或者settimeout,这连dom都可以拿出来 beforeCreate() { this.$nextTick(function() { con ...

  4. anchor_target_layer层其他部分解读

    inds_inside = np.where( (all_anchors[:, 0] >= -self._allowed_border) & (all_anchors[:, 1] > ...

  5. HYSBZ - 3750 Pieczęć(模拟)

    题目: 一张n*m的方格纸,有些格子需要印成黑色,剩下的格子需要保留白色. 你有一个a*b的印章,有些格子是凸起(会沾上墨水)的.你需要判断能否用这个印章印出纸上的图案.印的过程中需要满足以下要求: ...

  6. vue-cli webpack 快速搭建项目

    一.安装vue npm install vue -g 二.用vue-cli快速搭建项目 //全局安装vue-cli npm install install -g vue-cli //创建一个基于web ...

  7. Python模块 shelve xml configparser hashlib

    常用模块1. shelve 一个字典对象模块 自动序列化2.xml 是一个文件格式 写配置文件或数据交换 <a name="hades">123</a>3. ...

  8. 配置python3 项目环境

    安装python3 安装仓库软件 sudo apt-get install software-properties-common python-software-properties 添加仓库 sud ...

  9. linux上uwsgi+nginx+django发布项目

    在发布项目前首先将部署环境进行搭建,尤其是依赖包一定需要提前安装. 一.虚拟环境的搭建 1.建议在linux下新建一个虚拟环境,这样有独立干净的环境. mkvirtualenv -p python3 ...

  10. hdu 4948 Kingdom(推论)

    hdu 4948 Kingdom(推论) 传送门 题意: 题目问从一个城市u到一个新的城市v的必要条件是存在 以下两种路径之一 u --> v u --> w -->v 询问任意一种 ...