一款基于bootstrap的datetimepicker

<!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的更多相关文章

一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
推荐几款基于Bootstrap的响应式后台管理模板
1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...
基于bootstrap的datetimepicker插件
1.当时使用的资源地址:http://www.bootcss.com/p/bootstrap-datetimepicker/ 2.如何让时间只显示到日期,不显示具体时刻控制显示精度的是datetim ...
推荐一款基于bootstrap的漂亮的前端模板—inspinia_admin
首先给出Demo网址:http://cn.inspinia.cn inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计.使用Bootstrap 3+ Fra ...
一款基于bootstrap的文件上传插件，现在很多手机webapp都在用
官网:http://plugins.krajee.com/file-input
自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
10款基于HTML5+CSS3实现的超酷源码动画
1.基于Bootstrap的jQuery登录表单这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...
8个强大的基于Bootstrap的CSS框架
做过前端开发的小伙伴们应该对Bootstrap不会陌生,它是由Twitter推出的开源CSS框架,其中包含了很多Web前端开发的工具包和应用组件.当然,和jQuery一样,Bootstrap同时也是一 ...

随机推荐

js语法重点
1:最新的ES6规范引入了新的数据类型Map:var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael ...
定时器springMVC
F2工作流引擎之组织用户模型（四）
1 概述工作流组织模型是工作流引擎中核心重要的一部份,是实现人机交互中不可或缺的组成部分,而由于工作流引擎需要适应不同的系统之间存在组织用户结构的不同, 如组织表中字段名不同,所以需要实现适应不同系 ...
Xcode相关整理
阅读目录 javadoc格式文档注释插件 xcodekit插件常用快捷键 XCode中快捷健字符与MAC键盘对应关系: 添加自动生成格式为javadoc文档注释的插件VVDocumenter 首先推 ...
x64内联汇编注意点
#include <windows.h> #include <stdio.h> extern "C" int MyPrintf(ULONGLONG,ULON ...
Linux系统值得一看的学习方法及路线图
网络是一个很神奇的东西,现代人的生活离不开网络,网络已深入人们的工作,生活,娱乐等方方面面.网络之所以无处不在,是因为它提供了诸多的网络服务,所以网络服务是网络的灵魂. 互联网上的各种网络服务是架构在 ...
hdoj 1576
//1Y真是爽啊题意:要求(A/B)%9973,但由于A很大,我们只给出n(n=A%9973)(我们给定的A必能被B整除,且gcd(B,9973) = 1). 分析:根据题意a=b*x a=m ...
C++与C的关系
C是结构化和模块化的语言,是基于过程的. C++是面向对象的程序设计语言. C++是C的超集,对C的功能做了扩充,增加了面向对象的机制. C++包含头文件的 ...
PHP是什么
php 是一种服务器端的,嵌入html的脚本语言.php区别其他像客户端java的地方是它的代码在服务器端执行.php能做什么? 最低水平,php可以做任何其他cgi程序所能做的事,例如收集表格数据, ...
【 2013 Multi-University Training Contest 1 】
HDU 4602 Partition f[i]表示和为i的方案数.已知f[i]=2i-1. dp[i]表示和为i,k有多少个.那么dp[i]=dp[1]+dp[2]+...+dp[i-1]+f[i-k ...

一款基于bootstrap的datetimepicker

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

随机推荐

热门专题