bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件

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

DateTimePicker：jQuery日期和时间插件
点击在线预览效果点击下载该插件下面是效果截图:
angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
bootstrap datetimepicker时间日期控件
github地址:https://github.com/smalot/bootstrap-datetimepicker Both Date and Time picker widget based o ...
【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...
bootstrap时间插件火狐不显示完美解决方法
原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...
【bootstrap】使用支持bootstrap的时间插件daterangepicker
其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href=&q ...
Angularjs与bootstrap.datetimepicker结合实现日期选择器
http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...
bootstrap datetimepicker 格式化yyyymmdd时，无法读取yyyymmdd格式
不知为何,java程序员爱用yyyymmdd格式化日期?导致bootstrap datetimepicker无法解析正确的日期发现js中yyyymmdd不是正常能够解析的日期查看datetimep ...
bootstrap datetimepicker 在 angular 项目中的运用
datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker ...

随机推荐

浅谈PHP+Access数据库的连接注意要点
今天公司需要用php连接access 数据库,结果整了半天Access数据库就是连接不上,查找很多资料,以下是我的经验, -.- 希望能给需要连接access 数据的人带来帮助..-.- 需要注意 ...
FrameBuffer系列之介绍
1. 来由 FrameBuffer是出现在2.2.xx内核当中的一种驱动程序接口.Linux工作在保护模式下,所以用户态进程是无法象 DOS 那样使用显卡 BIOS里提供的中断调用来实现直接写 ...
卷积神经网络CNN总结
从神经网络到卷积神经网络(CNN)我们知道神经网络的结构是这样的: 那卷积神经网络跟它是什么关系呢?其实卷积神经网络依旧是层级网络,只是层的功能和形式做了变化,可以说是传统神经网络的一个改进.比如下图 ...
TP5学习基础一：增删改查小demo
①TP5--增删改查简单的demo 我先吐槽一下:因为工作需要研究tp5,去官网看了一下哎呦,资源挺多挺全啊!然后下载唯一免费的官方教程,我曹pdf打开533页.讲的很细但是开发能等看完才做吗?看到精 ...
跨域问题解决方案(HttpClient安全跨域 & jsonp跨域)
1 错误场景今天要把项目部署到外网的时候,出现了这样的问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 运行都没有问题的, 一旦把我需要调用接口的项目B放到其他的服务器上, 就会 ...
Linux上bash的部分基础特性:
命令补全: tab shell程序在接收到用户执行命令的请求,分析完成后,最左侧的字符串会被当做命令命令查找机制: 查找内部命令: 根据PATH环境变量中设定的目录,自左而右逐个搜索目录下的文件名 ...
linux vi 报错 E37: No write since last change (add ! to override)
用 vi 命令编辑文本文件,没有文件写入权限的时候会报这个错.:q :wq 怎么都不能退出. 这时只需 ctrl+z 即可,或者在退出命令后加 ! 忽略提示 :q!
配置网络yum源
有的时候服务器需要下载一些软件,是本地yum源没有的,这时候需要配置网络yum源 #cd /etc/yum.repos.d/ 把这个目录下的配置文件备份,改名:或者是把文件里边的enabled=1的 ...
python serialread
代码易读,不再做注释 import serial,os port = os.popen('ls /dev/ttyACM*').read()[:-1] baud = 9600 ser = serial. ...
Dubbo微容器(Cooma)详解
ExtensionLoader ExtensionLoader是Dubbo中的SPI的实现方法,它是Dubbo框架的微容器,也为框架提供各种组件的扩展点三种注解 SPI Adaptive Activ ...

bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件

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

随机推荐

热门专题