<!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. gitlab使用个人版v16.11

    title: gitlab使用个人版v16.11 date: 2016-11-13 20:53:00 tags: [gitlab] --- 1.安装gitbash 附上地址链接:git 2.配置git ...

  2. java 消息机制 ActiveMQ入门实例

    1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/ 我下载的时候是 ActiveMQ 5.14.0 Release版 2.运行ActiveMQ 解压缩ap ...

  3. TextView显示html文件中的图片

    fromHtml还有另一个重构:fromHtml(String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler) 而I ...

  4. Entity Framework Code First (六)存储过程

    声明:本文只针对 EF6+ 默认情况下,Code First 对实体进行插入.更新.删除操作是直接在表上进行的,从 EF6 开始你可以选择使用存储过程(Stored Procedures) 简单实体映 ...

  5. 【spring】 &lt;tx:annotation-driven /&gt; 的理解 【转载的】

    在使用SpringMvc的时候,配置文件中我们经常看到 annotation-driven 这样的注解,其含义就是支持注解,一般根据前缀 tx.mvc 等也能很直白的理解出来分别的作用.<tx: ...

  6. Android 多级树形菜单

    在Android里要实现树形菜单,都是用ExpandableList(也有高手自己继承ListView或者LinearLayout来做),但是ExpandableList一般只能实现2级树形菜单... ...

  7. Hacker(十)----常用入侵工具

    黑客若想攻击目标计算机,仅靠DOS命令是无法完成的,还需要一些功能强大的入侵工具,如端口扫描工具.网络嗅探工具.木马制作工具及远程控制工具等. 一.端口扫描工具 端口扫描工具有扫描端口的功能,所谓端口 ...

  8. Delphi通过GetFileVersionInfo和VerQueryValue等API函数取得详细EXE信息

    This has been described at About: http://delphi.about.com/cs/adptips2001/a/bltip0701_4.htmBasically, ...

  9. 第一个VC++ win32程序 绘制简单图形

    创建一个VC++ win32 打开VS 新工程类型中选择Win32----Win32 Project  自己取个名字(假如叫做My1stWin) 一路next 系统会自动生成好最基本的代码  然后我们 ...

  10. HIS(LIS、PACS、RIS、EMR)系统简介

    HIS(LIS.PACS.RIS.EMR)系统简介 HIS:医院信息系统(Hospital Information System, HIS),利用电子计算机和通讯设备,为医院所属各部 门提供病人诊疗信 ...