jQuery带时间的日期控件代码分享


Posted in Javascript onAugust 26, 2015

本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效。分享给大家供大家参考。具体如下:
带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟。
运行效果图:                    -------------------查看效果 下载源码-------------------

jQuery带时间的日期控件代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery带时间的日期控件代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery带时间的日期控件代码</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/admin.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-zh-CN.js"></script>
<style type="text/css">
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
</style>
</head>
<body>
<div class="wrap">
<ul class="sub-nav">
 <li ><a href="javascript:void(0);">基础信息</a></li>     
 </ul> 
 <ul class="doc-set">
 <li>
 <div class="doc-dt">
  <p>活动时间</p>
 </div>
 <div class="doc-dd">
  <input name="act_start_time" type="text" class="text-box" value="" placeholder="开始时间≥当前时间" title="开始时间≥当前时间" readonly="readonly" style="cursor:pointer;"/>
  <input name="act_stop_time" type="text" class="text-box" value="" placeholder="结束时间>开始时间" title="结束时间>开始时间" readonly="readonly" style="cursor:pointer;"/>
 </div>
 </li> 
</ul>
</div>
<script type="text/javascript">
 $( "input[name='act_start_time'],input[name='act_stop_time']" ).datetimepicker();
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

以上就是为大家分享的jQuery带时间的日期控件代码,希望大家可以喜欢。

Javascript 相关文章推荐
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 #Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 #Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 #Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 #Javascript
纯javascript实现分页(两种方法)
Aug 26 #Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 #Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 #Javascript
You might like
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
Sea.JS知识总结
2016/05/05 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
原生javascript实现分页效果
2017/04/21 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python命令行解析模块详解
2018/02/01 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
乡镇消防安全责任书
2014/07/23 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
社区义诊通知
2015/04/24 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
德劲DE1108畅想
2021/04/22 无线电
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers