一款基于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同时也是一 ...

随机推荐

超级文件搜索器(SuperSearch)
写了个工具,各个分享渠道上传太难了,在这里分享给大家吧! 中文名称:超级文件搜索器英文名称: SuperSearch 适用对象:硬盘里文件达到数万至数千万级的用户运行环境:WindowXP,Wi ...
Spring——jar包详解(转)
Spring——jar包详解 org.springframework.aop ——Spring的面向切面编程,提供AOP(面向切面编程)的实现 org.springframework.asm——spr ...
php基础_变量和比较符
本人php菜鸟一枚,初读<php和mysql web开发>,把其中的比较基础的一些东西列举出来,方便和自己一样的菜鸟快速入门,并且方便自己以后复习理解. ①变量 1.比较有特色的应该是变量 ...
GDB配置与.gdbinit的编写
GDB配置与.gdbinit的编写当 GDB(即 GNU Project Debugger)启动时,它在当前用户的主目录中寻找一个名为 .gdbinit 的文件:如果该文件存在,则 GDB 就执行该 ...
React Native 组件样式测试
View组件默认样式(注意默认flexDirection:'column') {flexGrow:0,flexShrink:0,flexBasis:'auto',flexDirection:'colu ...
java运算符
赋值运算符 int num1=10; int num2=30; System.out.println(num1+num2); 算术运算符 int num=20; System.out.println( ...
DB2获取有效工作时长函数（排除节假日、排除午休时间）
CREATE OR REPLACE FUNCTION DIFFHOURTIME_WITHOUTHOLIDAY_FUN ( STARTTIME ), ENDTIME ) ) RETURNS DOUBLE ...
myeclipse激活法，可以试一试
我的myeclipse2014也是这样激活: 第一步:输入任意用户名第二步:点击Systemid... 按钮,自动生成本机器的systemid. 第三步: 点菜单Tools->RebuildK ...
hihoCoder#1051
刚开始学习C语言,准备在做hiho的题目的过程中来学习,在此进行记录,如果代码中有错误或者不当的地方还请指正. 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述小Ho给自己 ...
centos6.5 redmine 安装
安装成功redmine信息 Redmine 2.6.0.stable Environment: Redmine version 2.6.0.stable Ru ...

一款基于bootstrap的datetimepicker

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

随机推荐

热门专题