<!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. checkbox的check事件

    <input type="checkbox" id="NameFlag" name="originalName" onClick=&q ...

  2. python中引用

    python中的可变类型与不可变类型: 在讲python深浅拷贝之前,我们首先应该明白python中元素的类型:主要分为可变类型和不可变类型. 可变类型,就是值可以改变的类型有两个: 列表:list ...

  3. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(五)

    前言 在编写代码的时候,我遇到了很多关于EntityFramework6的疑问,所以现在就提前把这些问题列出来做一下解答,以便在以后的代码编写过程中减少不必要的Bug. EntityFramework ...

  4. canvas 时钟+自由落体

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. MRPT笔记——使用编译好的MRPT库建立VS2013项目

    接着上一篇<MRPT在VS2013中的配置>,下面接收如何使用编译好的MRPT建立工程项目. 一.设置环境变量 上一篇中,配置MRPT时,使用到了几个相关库,opencv.zlib.wxW ...

  6. zynq学习01 新建一个Helloworld工程

    1,好早买了块FPGA板,zynq 7010 .终极目标是完成相机图像采集及处理.一个Window C++程序猿才开始学FPGA,一个小菜鸟,准备转行. 2,关于这块板,卖家的官方资料学起来没劲.推荐 ...

  7. 简单尝试利用vultr vps自架PPTP上网用于工作学习需要

    因为学习和工作的需要用到登陆海外网站查阅相关的资料和文档,之前有需要使用的时候是问网友索要的账户登录本地电脑拨号的,但是老是跟别人要还是不好,决定自己尝试搭建一个长期使用.看到有不少的介绍提到VULT ...

  8. java.lang.Boolean->介绍

    介绍: public class Boolean extends Object implements Serializable, Comparable<Boolean> Boolean类是 ...

  9. android-自定义控件之液位指示器

    由于安卓应用很广泛,在工业中也常有一些应用,比如可以用安卓来去工业中的一些数据进行实现的监测,显示,同时可以做一些自动化控制,当然在这里,我不是做这些自动化控制方面的研究,只是做一个控件,液位指示,其 ...

  10. learn python, ref, diveintopython 分类： python 2015-07-22 14:42 14人阅读 评论(0) 收藏

    for notes of learing python. // just ignore the ugly/wrong highlight for python code. ""&q ...