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>

时间： 2024-10-12 18:47:43

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

DateTimePicker：jQuery日期和时间插件

http://www.jq22.com/jquery-info332 <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ > <script src="jquery.js"></script> <script src="jquery.datetimepicker.js"&g

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

背景:angular与jquery类库的协作第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

bootstrap datetimepicker时间日期控件

github地址:https://github.com/smalot/bootstrap-datetimepicker Both Date and Time picker widget based on twitter bootstrap (supports Bootstrap v2 and v3) http://www.malot.fr/bootstrap-datetimepicker/ 绑定输入框,并设置format选项: <input type="text" value=&

bootstrap时间插件使用方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap时间插件用法</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scal

好用的bootstrap中的时间插件-bootstrap-datepicker

bootstrap-datepicker是bootstrap中一款好用的时间插件,支持中文,支持时间段的选择,支持时间格式配置,在线示例中用法提供友好. 点击页面上的配置,右下角的代码同步更新. 1.下载bootstrap-datepicker中放在bootstrap文件夹. 在页面进行css引用 <link rel="stylesheet" href="bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.m

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

原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火狐不管用不显示:解决方案: 在项目开发中用到了bootstrap-datetimepicker的时间插件,但是在火狐下却不能使用,在网上找到的方法什么外层模态框去掉tabindex="-1" role="dialog"属性,不管用的!!或许仅仅只是适用于他的

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

其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="static/css/index/daterangepi

BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

BootStrap一页通（样式+组件+插件）

bootstrap是一种前端框架,实现美观的页面效果.使用BootStrap的前期工作(注意顺序): <!DOCTYPT html>:因为Bootstrap用到了h5的特性,所以需要此步.导入jQuery:bootstrap需要jQuery才能正常工作,故需要导入 jquery.min.js导入Bootstrap的css:定义各种样式.导入Bootstrap的js:产生交互效果.最后直接套用Bootstrap的class即可,达到想要的效果.<!DOCTYPE html><h

Bootstrap 历练实例 - 折叠（Collapse）插件方法

方法下面是一些折叠(Collapse)插件中有用的方法: 方法描述实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $('#identifier').collapse({ toggle: false }) Toggle: .collapse('toggle') 切换显示/隐藏可折叠元素. $('#identifier').collapse('toggle') Show: .collapse('show') 显示可折叠元