最近在一个项目中用到了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
10 < script type ="text/javascript" src ="Plugins/jquery/jquery-1.8.3.min.js" ></ script >
11 < script type ="text/javascript" src ="Plugins/jquery/jquery-ui.min.js" ></ script >
12 < script type ="text/javascript" src ="Plugins/timepicker/jquery-ui-sliderAccess.js" ></ script >
13 < script type ="text/javascript" src ="Plugins/timepicker/jquery-ui-timepicker-addon.min.js" ></ script >
14 < script type ="text/javascript" src ="Plugins/timepicker/i18n/jquery-ui-timepicker-zh-CN.js" ></ script >
15 < script type ="text/javascript" src ="Plugins/timepicker/i18n/jquery.ui.datepicker-zh-CN.js.js" ></ script >
16 < script type ="text/javascript" >
17 $( function(){
18 $('#slider_example').datetimepicker({
19 dateFormat:'yy-mm-dd',
20 timeFormat: 'HH:mm:ss'
21 });
22 })
23 </ script >
24 < style type ="text/css" >
25
26 /* 修改空间的大小,如果不加上这句可能会导致控件过大,不够美观 */
27 .ui-corner-all{
28 font-size: 12px;
29 }
30
31 </ style >
32 </ head >
33
34 < body >
35 < input type ="text" name ="" id ="slider_example" value ="" class ="xx" >
36 </ body >
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
10 < script type ="text/javascript" src ="Plugins/jquery/jquery-1.8.3.min.js" ></ script >
11 < script type ="text/javascript" src ="Plugins/jquery/jquery-ui.min.js" ></ script >
12 < script type ="text/javascript" src ="Plugins/timepicker/jquery-ui-sliderAccess.js" ></ script >
13 < script type ="text/javascript" src ="Plugins/timepicker/jquery-ui-timepicker-addon.min.js" ></ script >
14 < script type ="text/javascript" src ="Plugins/timepicker/i18n/jquery-ui-timepicker-zh-CN.js" ></ script >
15 < script type ="text/javascript" src ="Plugins/timepicker/i18n/jquery.ui.datepicker-zh-CN.js.js" ></ script >
16 < script type ="text/javascript" >
17 $( function(){
18 $('#slider_example').datetimepicker({
19 dateFormat:'yy-mm-dd',
20 timeFormat: 'HH:mm:ss'
21 });
22 })
23 </ script >
24 < style type ="text/css" >
25
26 /* 修改空间的大小,如果不加上这句可能会导致控件过大,不够美观 */
27 .ui-corner-all{
28 font-size: 12px;
29 }
30
31 </ style >
32 </ head >
33
34 < body >
35 < input type ="text" name ="" id ="slider_example" value ="" class ="xx" >
36 </ body >
37 </html>
demo下载,全是本地文件,包括jquery和jquery-ui都下载下来了:下载地址