<!DOCTYPE HTML>

<html>

  <head>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" media="screen"     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">

  </head>

  <body>

    <div id="datetimepicker" class="input-append date">

      <input type="text"></input>

      <span class="add-on">

       <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>

      </span>

    </div>

    <script type="text/javascript"     src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">

    </script>

     <script type="text/javascript"     src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">

    </script>

    <script type="text/javascript"     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">

    </script>

    <script type="text/javascript"     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">

    </script>

    <script type="text/javascript">

      $('#datetimepicker').datetimepicker({

        format: 'dd/MM/yyyy hh:mm:ss',

        language: 'pt-BR'

     });

   </script>

  </body>

<html>

更多设置:

禁用日期选择：

<div class="well">

  <div id="datetimepicker3" class="input-append">

    <input data-format="hh:mm:ss" type="text"></input>

    <span class="add-on">

      <i data-time-icon="icon-time" data-date-icon="icon-calendar">

      </i>

    </span>

  </div>

</div>

<script type="text/javascript">  $(function() {
    $('#datetimepicker3').datetimepicker({

      pickDate: false    });  });

</script>

禁用时间选择：

<div class="well">

  <div id="datetimepicker4" class="input-append">

    <input data-format="yyyy-MM-dd" type="text"></input>

    <span class="add-on">

      <i data-time-icon="icon-time" data-date-icon="icon-calendar">

      </i>

    </span>

  </div>

</div>

<script type="text/javascript">  $(function() {

   $('#datetimepicker4').datetimepicker({

      pickTime: false    });  });

</script>

选项设置：

$.fn.datetimepicker.defaults = {

  maskInput: true,           // disables the text input mask

  pickDate: true,            // disables the date picker

  pickTime: true,            // disables de time picker

  pick12HourFormat: false,   // enables the 12-hour format time picker

  pickSeconds: true,         // disables seconds in the time picker

  startDate: -Infinity,      // set a minimum date

  endDate: Infinity          // set a maximum date}

注：如果bootstrap-combined.min.css使用本地路径引用，需要在CSS文件夹平级的位置新建一个img文件夹，里面放置glyphicons-halflings.png和glyphicons-halflings-white.png两张图片文件，这两张图片可以从网上下载，也可以从下载的bootstrap压缩包中找到。
更多说明请参考：http://tarruda.github.io/bootstrap-datetimepicker/

一款基于bootstrap的datetimepicker的更多相关文章

  1. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  2. 推荐几款基于Bootstrap的响应式后台管理模板

    1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...

  3. 基于bootstrap的datetimepicker插件

    1.当时使用的资源地址:http://www.bootcss.com/p/bootstrap-datetimepicker/ 2.如何让时间只显示到日期,不显示具体时刻 控制显示精度的是datetim ...

  4. 推荐一款基于bootstrap的漂亮的前端模板—inspinia_admin

    首先给出Demo网址:http://cn.inspinia.cn inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计.使用Bootstrap 3+ Fra ...

  5. 一款基于bootstrap的文件上传插件，现在很多手机webapp都在用

    官网:http://plugins.krajee.com/file-input

  6. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  7. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  8. 10款基于HTML5+CSS3实现的超酷源码动画

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

  9. 8个强大的基于Bootstrap的CSS框架

    做过前端开发的小伙伴们应该对Bootstrap不会陌生,它是由Twitter推出的开源CSS框架,其中包含了很多Web前端开发的工具包和应用组件.当然,和jQuery一样,Bootstrap同时也是一 ...

随机推荐

  1. Spring相关

    一.Spring中ApplicationContext加载机制加载器目前有两种选择:ContextLoaderListener和ContextLoaderServlet. 这两者在功能上完全等同,只是 ...

  2. iOS：didSelectRowAtIndexPath:方法失效解决办法

    问题描述及解决过程: 为了达到点击TableView空白区退出键盘的效果,给控制器注册了一个UITapGestureRecognizer来识别点击事件,代码如下: #pragma mark - 设置手 ...

  3. 为什么.Net要求序列化的类必须有一个无参数的构造函数

    刚才用xml序列化器,序列化一个类,结果报错说序列化的类必须带有一个无参的构造函数,好奇怪啊.为什么要有这么苛刻的条件,而且xml序列化还要求序列化的成员是public. 我以前一直觉得序列化器是一个 ...

  4. Wpf之Xaml属性值和特性值（一）

    其实我一直很好奇在xaml中,通过Attribute=Value这种方式可以进行对元素的描述, 例如: <Rectangle Name=” rectangle” Fill=”Blue”/> ...

  5. ElasticSearch集群配置

    因机器有限,本文只做单机3个节点的集群测试. 1.集群测试信息 elasticsearch版本:elasticsearch-2.4.1 windowns版本:win10 2.解压elasticsear ...

  6. linux php 安装 memcache 扩展

    1. memcached依赖于libevent,需要先安装libevent. tar zxvf libevent-2.0.21-stable.tar.gz cd libevent-2.0.21-sta ...

  7. Understanding the Internal Message Buffers of Storm

    Understanding the Internal Message Buffers of Storm Jun 21st, 2013 Table of Contents Internal messag ...

  8. css3各个属性的兼容

    1.transition:IE10. Firefox.Opera.Chrome支持: Safari支持替代的-webkit-transition属性: 2.animation: IE10.FIrefo ...

  9. sql 查询服务器硬盘剩余空间

    DECLARE @tb1 Table( drive varchar(20), [MB 可用空间] varchar(20)) INSERT INTO @tb1 Exec master.dbo.xp_fi ...

  10. VS2012+LUA环境搭建

    1 .启动VS2012,选择C++下的"win32"项目类型中的"Win2控制台应用程序" 2.工具——选项——项目和解决方案——VC++目录——可执行程序(C ...