<!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. JAVA 多线程随笔 (一) 可见性和volatile关键字

    // 先上代码 1 public class NoVisibility { private static boolean ready; private static int number; priva ...

  2. Windows下安装pip(转自http://www.cnblogs.com/yuanzm/p/4089856.html）

    windows下面安装Python和pip终极教程 在大二的时候接触过一段时间的Python,最近又开始玩起了这门语言.总的来说,个人很喜欢Python的语言风格,但是这门语言对于windows并不算 ...

  3. Thrift入门及Java实例演示<转载备用>

    Thrift入门及Java实例演示 作者: Michael 日期: 年 月 日 •概述 •下载配置 •基本概念 .数据类型 .服务端编码基本步骤 .客户端编码基本步骤 .数据传输协议 •实例演示(ja ...

  4. （转）TortoiseSVN客户端重新设置用户名和密码

    在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么以后就不用每次都输入一遍用户名密码了. 不过,如果 ...

  5. Python查找当前路径和子路径下指定后缀名的文件

    # -*- encoding:utf-8 -*- import os def SearchFile(path,text): try: files=os.listdir(path) for f in f ...

  6. spark发行版笔记10

    感谢DT大数据梦工厂支持提供技术支持,DT大数据梦工厂专注于Spark发行版定制. 本期概览: 数据接收全生命周期的思考 大数据处理框架中,最重要的就是性能,性能是排在前面的.其次再考虑其他的.因为数 ...

  7. 在 Linux 上配置一个 syslog 服务器

    syslog服务器可以用作一个网络中的日志监控中心,所有能够通过网络来发送日志的设施(包含了Linux或Windows服务器,路由器,交换机以及其他主机)都可以把日志发送给它. 通过设置一个syslo ...

  8. Struts2_三种传参数方法

    1.通过属性传参数(Attr)UserAction.java package com.bebig.struts2.user.action;import com.opensymphony.xwork2. ...

  9. 基础篇-Windows保护模式

    1 一般来说,80x86(80386及其以后的各代CPU)可以在三种模式下运转:实模式,保护模式,V86模式.实模式就是古老的MS-DOS的运行环境.Win95只利用了两种模式:保护模式和V86模式. ...

  10. Python - twisted web 入门学习之一

    原文地址:http://zhouzhk.iteye.com/blog/765884 python的twisted框架中带了一个web server: twisted web.现在看看怎么用. 一)准备 ...