1. <!DOCTYPE html>
    <head>
        <title>时间插件测试</title>
    <style type="text/css">
  2.  
  3. </style>
    </head>
    <body>
    <p>主体部分</p>
    <input type="text" class="picker" placeholder="请选择日期" />
  4.  
  5. <div >
        时间插件是组合用法(注意引用是不同的！)
  6.  
  7.     1.公用部分
        css: bootstrap.min.css
        js:jquery-1.10.2.min.js
  8.  
  9.     2特有部分
        datatime组合
        css：bootstrap-datetimepicker.min.css
        js:bootstrap-datetimepicker.js
        bootstrap-datetimepicker.zh-CN.js
        $(".picker").datetimepicker({format: 'yyyy-mm-dd hh:ii'//日期格式})
  10.  
  11.     date组合
        css：bootstrap-datepicker.min.css
        js:bootstrap-datepicker.js
        bootstrap-datepicker.zh-CN.js
        $(".picker").datepicker({format: 'yyyy-mm-dd'//日期格式})
  12.  
  13.     time组合
        css：bootstrap-timepicker.min.css
        js:bootstrap-timepicker.js
        bootstrap-datepicker.zh-CN.js
        $(".picker").timepicker({format: 'hh:ii:ss'//日期格式})
  14.  
  15.     date、time都是由datetime简化而来，因此datetime更通用。
  16.  
  17.     注意使用date组合时，可能会与原有js、css冲突，可以注释看看
        <!--<link rel="stylesheet" href="__PUBLIC__/Assets/css/bootstrap.min.css">-->
        <!--<script src="__PUBLIC__/Assets/js/jquery-1.10.2.min.js"></script>-->
    </div>
  18.  
  19. </body>
  20.  
  21. 1.公用部分
    <link rel="stylesheet" href="__PUBLIC__/Assets/css/bootstrap.min.css">
    <script src="__PUBLIC__/Assets/js/jquery-1.10.2.min.js"></script>
  22.  
  23. 2特有部分
    <!--datatime组合-->
    <link rel="stylesheet" href="__PUBLIC__/Assets/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script src="__PUBLIC__/Assets/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="__PUBLIC__/Assets/js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
                $(function () {
                    $(".picker").datetimepicker({
                        language: "zh-CN",
                        autoclose: true,//选中之后自动隐藏日期选择框
                        clearBtn: true,//清除按钮
                        todayBtn: true,//今日按钮
                       format: 'yyyy-mm-dd hh:ii'//日期格式
                       // format: 'yyyy-mm-dd '//可行但操作麻烦
                    });
                });
    </script>
  24.  
  25. <!--date组合-->
    <!--<link rel="stylesheet" href="../../../../Public/Assets/css/datepicker.css">-->
    <!--<script src="../../../../Public/Assets/js/date-time/bootstrap-datepicker.min.js"></script>-->
    <!--<script src="../../../../Public/Assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js"></script>-->
    <script type="text/javascript">
        //                $(function () {
        //                    $(".picker").datepicker({
        //                        language: "zh-CN",//语言
        //                        autoclose: true,//选中之后自动隐藏日期选择框
        //                        clearBtn: true,//清除按钮
        //                        todayBtn: true,//今日按钮
        //                        format: 'yyyy-mm-dd'//日期格式
        //                    });
        //                });
    </script>
  26.  
  27. <!--time组合-->
    <!--<link rel="stylesheet" href="../../../../Public/Assets/css/bootstrap-timepicker.css">-->
    <!--<script src="../../../../Public/Assets/js/date-time/bootstrap-timepicker.min.js"></script>-->
    <script type="text/javascript">
    //    $(function () {
    //        $(".picker").timepicker({
    //            language: "zh-CN",
    //            autoclose: true,//选中之后自动隐藏日期选择框
    //            clearBtn: true,//清除按钮
    //            todayBtn: true,//今日按钮
    //            format: 'hh:ii:ss'//日期格式
    //        });
    //    });
    //  //没找到对应的汉化包。
    </script>
  28.  
  29. </html>

bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件的更多相关文章

  1. DateTimePicker：jQuery日期和时间插件

    点击在线预览效果       点击下载该插件 下面是效果截图:

  2. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  3. bootstrap datetimepicker时间日期控件

    github地址:https://github.com/smalot/bootstrap-datetimepicker Both Date and Time picker widget based o ...

  4. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  5. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  6. bootstrap时间插件 火狐不显示 完美解决方法

    原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...

  7. 【bootstrap】使用支持bootstrap的时间插件daterangepicker

    其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href=&q ...

  8. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  9. bootstrap datetimepicker 格式化yyyymmdd时，无法读取yyyymmdd格式

    不知为何,java程序员爱用yyyymmdd格式化日期?导致bootstrap datetimepicker无法解析正确的日期 发现js中yyyymmdd不是正常能够解析的日期 查看datetimep ...

  10. bootstrap datetimepicker 在 angular 项目中的运用

    datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker  ...

随机推荐

  1. （知识点）JavaScript原型和原型链

    〇 每个函数都拥有prototype属性,而该属性所储存的就是原型对象 1)原型属性—— 上面我们测试了foo()函数的 1) length属性(length属性除了可以用在数组中,还可以用于记录函数 ...

  2. Java多线程中的单例模式

    一.在多线程环境下创建单例 方式一: package com.ietree.multithread.sync; public class Singletion { private static cla ...

  3. ajax从新浪获取实时股票数据

    最近在给公司做一个报表展示,然后领导要求上面加上一些股票的实时数据展示. 一开始同事给我一个聚合数据的网址,说从这上面可以获取到.我一看,哟呵,API接口什么的都提供好了,确实方便.然后想用的时候才发 ...

  4. 【openstack N版】——摘除一个计算节点

    1.查看计算节点 #查看所有计算节点 [root@open-control01 ~]# nova service-list+----+------------------+-------------- ...

  5. 全易通人事考勤工资验厂管理系统软件创建连接SQL2000数据库的操作方法和说明

    全易通人事考勤工资验厂管理系统软件创建连接SQL2000数据库的操作方法和说明.全易通人事考勤工资验厂管理系统软件,有2种数据库,一个是ACCESS,另一个是SQL.不过由于ACCESS数据库比较小, ...

  6. luogu P1007 独木桥

    序:难度标签是普及-,便觉得应该非常简单,结果发现有一个弯半天没绕过来,所以认为这道题对于第一次做的人来讲还是很是比较有意义的. 题目描述: 长度为len的桥上有n个士兵,你不知道他们的初始方向.已知 ...

  7. Bootstrap之折叠（Collapse）插件

    学习资料:Bootstrap折叠(Collapse)插件 大家可能常见的都是类似: 这种的效果,小颖今天要给大家分享一个不一样的效果嘻嘻.铛铛铛铛........................... ...

  8. python object takes no parameters

    class Song(object): def __init__(self,lyrics): self.lyrics = lyrics def sing_me_a_song(self): for li ...

  9. （转）详解JS位置、宽高属性之一：offset系列

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  10. poj3067 Japan 树状数组求逆序对

    题目链接:http://poj.org/problem?id=3067 题目就是让我们求连线后交点的个数 很容易想到将左端点从小到大排序,如果左端点相同则右端点从小到大排序 那么答案即为逆序对的个数 ...