<!DOCTYPE html>
<head>
    <title>时间插件测试</title>
<style type="text/css">

</style>
</head>
<body>
<p>主体部分</p>
<input type="text" class="picker" placeholder="请选择日期" />

<div >
    时间插件是组合用法(注意引用是不同的！)

    1.公用部分
    css: bootstrap.min.css
    js:jquery-1.10.2.min.js

    2特有部分
    datatime组合
    css：bootstrap-datetimepicker.min.css
    js:bootstrap-datetimepicker.js
    bootstrap-datetimepicker.zh-CN.js
    $(".picker").datetimepicker({format: 'yyyy-mm-dd hh:ii'//日期格式})

    date组合
    css：bootstrap-datepicker.min.css
    js:bootstrap-datepicker.js
    bootstrap-datepicker.zh-CN.js
    $(".picker").datepicker({format: 'yyyy-mm-dd'//日期格式})

    time组合
    css：bootstrap-timepicker.min.css
    js:bootstrap-timepicker.js
    bootstrap-datepicker.zh-CN.js
    $(".picker").timepicker({format: 'hh:ii:ss'//日期格式})

    date、time都是由datetime简化而来，因此datetime更通用。

    注意使用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>

</body>

1.公用部分
<link rel="stylesheet" href="__PUBLIC__/Assets/css/bootstrap.min.css">
<script src="__PUBLIC__/Assets/js/jquery-1.10.2.min.js"></script>

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>

<!--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>

<!--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>

</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. xmlplus 组件设计系列之六 - 下拉刷新

    "下拉刷新"由著名设计师 Loren Brichter 设计,并应用于 Twitter 第三方应用 Tweetie 中.2010年4月,Twitter 收购 Tweetie 开发商 ...

  2. java 内存管理 —— 《Hotspot内存管理白皮书》

    说明   要学习Java或者任意一门技术,我觉得最好的是从官网的资料开始学习.官网所给出的资料总是最权威最知道来龙去脉的.而Java中间,垃圾回收与内存管理是Java中非常重要的一部分.<Hot ...

  3. JS模式---发布、订阅模式

    发布订阅模式又叫观察者模式,它定义一种一对多的依赖关系, 当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. document.body.addEventListener('click', ...

  4. Supervisor: A Process Control System

    Supervisor: 进程控制系统 概述:Supervisor是一个 Client/Server模式的系统,允许用户在类unix操作系统上监视和控制多个进程,或者可以说是多个程序. 它与launch ...

  5. ie8兼容background-size属性

    满心欢喜地写代码,最后测试兼容性的时候发现Logo图片在IE8下特别大.明显是background-size在ie8一下不兼容. 我懂得,IE8还是个孩子,我就加几句你独有的代码让你兼容吧,司空见惯了 ...

  6. GitHub 入门不完全指南（未完待续）

    我一直认为 GitHub 是一座宝藏,想让更多人的知道它.加入到这个社区中.本人能力有限,如果文中出现不对的地方,欢迎指正交流. 一.前言 大家好,我是削微寒(xuē wēi hán),一个走在进阶路 ...

  7. 蓝桥杯- 奇妙的数字-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  8. 设置共享目录（主机win7，虚拟机Ubuntu）

    1.安装增强功能包 启动虚拟机后,在 设备 -> 分配光驱 选择VBoxGuestAdditions.iso增强包镜像(在virtualbox安装目录下) 在虚拟机中挂载光驱镜像: #mkdir ...

  9. 每个国家对应的语言Locale和国家代码对照表

    DNN3支持多语言,希望下面的语言代码与对应国家能对你有所帮助 语言代码 国家/ 地区 "" (空字符串) 无变化的文化 af 公用荷兰语 af-ZA 公用荷兰语 - 南非 sq ...

  10. ShadowBroker释放的NSA工具中Esteemaudit漏洞复现过程

    没有时间测试呢,朋友们都成功复现,放上网盘地址:https://github.com/x0rz/EQGRP 近日臭名昭著的方程式组织工具包再次被公开,TheShadowBrokers在steemit. ...