第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)
最近在一个项目中用到了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)的更多相关文章
- 解决laydate时间日期插件定位溢出
laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap 1. 默认情况 laydate弹出层默认对齐input左边框 2 ...
- 页面日期选择控件--jquery ui datepicker 插件
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...
- Jquery ui datepicker 设置日期范围，如只能隔3天
最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...
- jquery UI datepicker时间控件的使用
参考: http://api.jqueryui.com/datepicker/#method-show 英文 http://www.helloweba.com/view-blog-168.html 中 ...
- 一款好用的JS时间日期插件layDate
觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...
- jQuery时间日期插件laydate，兼容bootstrap
解压后,将laydate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系. 使用只需在页面引入laydate.js即可. 如果您的网站的js采用合并或模块加载,您需要打开lay ...
- jq时间日期插件的使用-datetimepicker
分三步 首先引入各种包 然后搞哥容器用id 然后加入一段js 实例: 下载:http://files.cnblogs.com/files/wordblog/datetimepicker-maste ...
- jsp日期插件My97DatePicker
jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...
- 基于zepto的移动端轻量级日期插件
前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...
随机推荐
- Linux 命令 - ping: 向网络主机发送 ICMP ECHO_REQUEST 包
ping 命令会向指定的网络主机发送特殊网络数据报 IMCP ECHO_REQUEST.多数网络设备收到该数据包后会做出回应,通过此法即可验证网络连接是否正常. 有时从安全角度出发,通常会配置部分网络 ...
- HDOJ2024C语言合法标识符
C语言合法标识符 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- HDOJ2005第几天
第几天? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- github果然强大
github果然强大,在idea里写好,可以直接提交到github,在哪台电脑都可以看源码了,手机也可以看 https://github.com/gaojinhua
- CSS之颜色英文代码全集
ColorHex在线颜色查询 <head> <title>CSS之颜色英文代码全集</title> <style type="text/css&qu ...
- 第六十篇、音视频采集硬编码（H264+ACC）
使用 AVCaptureSession进行实时采集音视频(YUV.),编码 通过AVCaptureVideoDataOutputSampleBufferDelegate获取到音视频buffer- 数据 ...
- [求助]谁能给我讲解一下，iOS编程要如何实时显示采集到的图像？？？
rt,最近搞一个高清图传,本着自(bu)主(mai)创(da)新(jiang)的原则,打算利用手中的iPad当作辅助飞行屏幕,USB传输数据.再说某疆图传7999(还只支持自家云台录像拍照),哪是我这 ...
- PHP学习笔记 - 进阶篇（1）
PHP学习笔记 - 进阶篇(1) 数组 数组定义 $arr = array();表示创建一个空数组,并把创建的空数组赋值给变量$arr. 索引数组初始化 PHP有两种数组:索引数组.关联数组. 索引和 ...
- C# ASPX.NET 文件（图片）下载
最好使用aspx页面写: protected void Page_Load(object sender,EventArgs e) { if(!IsPostBack) { System.Io.FileS ...
- OC4_电子词典
// // MyDictionary.h // OC4_电子词典 // // Created by zhangxueming on 15/6/15. // Copyright (c) 2015年 zh ...