最近在一个项目中用到了My97DatePicker，国人写的一个挺不错的时间选择插件，简单易用，但是在调试静态时却发现此插件必须产生一个iframe标签指向其主页，试了很多种方法都不能去除，一旦删除插件就不能用了。。。虽说作者开发辛苦，我本拿来就用，不应埋怨这点广告费，但是考虑到部分项目对于安全性较高，像这样明目张胆的跨域谁知道是否会有风险脚本注入到你的后台。

　　所以这几天就专门留心各种时间选择插件，令人颇为失望的是居然没有几款比较好用的 可以同时选择日期与时间并且支持时间格式化输出的插件。不过还好还是让我找到一款国外的界面还行的jqueri-ui的 datepicker插件 的timepicker(http://trentrichardson.com/examples/timepicker/)加强版，效果如下:

代码也简单易用:

$(function(){

$('#slider_example').datetimepicker({

dateFormat:'yy-mm-dd',

timeFormat: 'HH:mm:ss'

});

})

　　完整代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5 <title>无标题文档</title>

 6 

 7 <link rel="stylesheet" type="text/css" href="Plugins/jquery/jquery-ui.css" />

 8 <link rel="stylesheet" type="text/css" href="Plugins/timepicker/jquery-ui-timepicker-addon.min.css" />

 9 

 <script type="text/javascript" src="Plugins/jquery/jquery-1.8.3.min.js"></script>

 <script type="text/javascript" src="Plugins/jquery/jquery-ui.min.js"></script>

 <script type="text/javascript" src="Plugins/timepicker/jquery-ui-sliderAccess.js"></script>

 <script type="text/javascript" src="Plugins/timepicker/jquery-ui-timepicker-addon.min.js"></script>

 <script type="text/javascript" src="Plugins/timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>

 <script type="text/javascript" src="Plugins/timepicker/i18n/jquery.ui.datepicker-zh-CN.js.js"></script>

 <script type="text/javascript">

 $(function(){    

     $('#slider_example').datetimepicker({

         dateFormat:'yy-mm-dd',

         timeFormat: 'HH:mm:ss'

     });

 })

 </script>

 <style type="text/css">

 

 /*修改空间的大小,如果不加上这句可能会导致控件过大，不够美观*/

 .ui-corner-all{

     font-size:12px;

 }

 

 </style>

 </head>

 

 <body>

 <input type="text" name="" id="slider_example" value="" class="xx">

 </body>

37 </html>

demo下载，全是本地文件，包括jquery和jquery-ui都下载下来了：下载地址

 

第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)的更多相关文章

  1. 解决laydate时间日期插件定位溢出

    laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap 1. 默认情况 laydate弹出层默认对齐input左边框 2 ...

  2. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  3. Jquery ui datepicker 设置日期范围，如只能隔3天

    最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的   datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...

  4. jquery UI datepicker时间控件的使用

    参考: http://api.jqueryui.com/datepicker/#method-show 英文 http://www.helloweba.com/view-blog-168.html 中 ...

  5. 一款好用的JS时间日期插件layDate

    觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...

  6. jQuery时间日期插件laydate，兼容bootstrap

    解压后,将laydate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系. 使用只需在页面引入laydate.js即可. 如果您的网站的js采用合并或模块加载,您需要打开lay ...

  7. jq时间日期插件的使用-datetimepicker

    分三步  首先引入各种包 然后搞哥容器用id  然后加入一段js 实例: 下载:http://files.cnblogs.com/files/wordblog/datetimepicker-maste ...

  8. jsp日期插件My97DatePicker

    jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...

  9. 基于zepto的移动端轻量级日期插件

    前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...

随机推荐

  1. 学习css简单内容

    Css的class,ID和上下文选择符 Class选择符. Class选择符用来配置某一类css规则,将其应用到网页中一个或多个区域.配置一类样式时,要将选择符配置成类名.在类名前加(.).类名必须以 ...

  2. 一个简单的XML与数组之间的转换

    xml是网络使用最多的数据交换格式,所以,不掌握怎么操作它,又有蛋疼的了. php中可以操作xml的类/函数很多,个人认为最简单的是SimpleXMLElement这个类,它的使用就跟其名字一样:简单 ...

  3. ios app名字的多语言支持

    经测试,不同版本的xcode会有操作细节不同,本次环境xcode6.4 1)编辑Info.plist,添加一个新的属性Application has localized display name, 设 ...

  4. OC5_NSFileManger

    // // main.m // OC5_NSFileManger // // Created by zhangxueming on 15/6/19. // Copyright (c) 2015年 zh ...

  5. 8个应该去逛逛JQuery的学习网站

    根据国外科技网站 W3Techs 一项调查了近100万个网站数据显示,jQuery是目前最流行的 JavaScript 库.对于初学者来说,有的时候很难找到一个好的学习jQuery的网站,所以本文收集 ...

  6. TransparentBlt函数的使用注意事项

    今天客户需要在软件上需要添加一个自己公司的Logo,要求使用镂空透明的形式展现,本来以为很简单的工作没想到在MFC下这么复杂.Logo为BMP格式,白色背景. 以为和在按钮上显示控件差不多,先导入BI ...

  7. ZStack中的编程技巧

    1. 像函数一样使用的宏 //这个宏,用来被其他宏使用,构造一个正确有效的表达式.这个适合于一些离散语句的组合,不适合函数的重新命名 #define st(x)      do { x } while ...

  8. 引用、return

    C语言中没有引用,引用(reference)是c++对c语言的重要扩充.通俗点说,引用就是“起别名”.比如变量data,和它的引用 RefData.虽然名字不同,但是操作他们的时候,都操作的是相同的内 ...

  9. 【转】C#类的分类（静态类、实例类、嵌套类、结构、简单的抽象类、简单的密封类）

    静态类 -------------------------------------------------------------------------------- 静态类就是在class关键字前 ...

  10. Linq to sql 接收存储过程返回的多个结果集

    故事前提.......... 一.返回顺序结果集 存储过程实例 CREATE PROCEDURE MultipleResultTypesSequentially AS select * from pr ...