第一好用的时间日期插件(Adding a Timepicker to jQuery UI Datepicker)

ゝ一世哀愁。 2021-09-30 05:12 451阅读 0赞

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

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

![08191149-1ce31f947ec641728ae8401c0b771c25.jpg][]

代码也简单易用:

$(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 >

37 </html>

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

转载于:https://www.cnblogs.com/Mr-Nobody/p/3357693.html

[http_trentrichardson.com_examples_timepicker]: http://trentrichardson.com/examples/timepicker/
[08191149-1ce31f947ec641728ae8401c0b771c25.jpg]: /images/20210725/b27581ce0d214212b345ec02a5acb079.png
[Link 1]: http://files.cnblogs.com/Mr-Nobody/%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5.zip