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

 
 
 

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

 

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

代码也简单易用:

?
1
2
3
4
5
6
$(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都下载下来了：下载地址

 
posted @   Zane Young  阅读(1229)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手