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 EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
Vue 事件处理操作实例详解
2019/03/05 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python实现大转盘抽奖效果
2019/01/22 Python
详解Python正则表达式re模块
2019/03/19 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
如何基于python生成list的所有的子集
2019/11/11 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
设计毕业生简历中的自我评价
2013/10/01 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
会议简报格式范文
2015/07/20 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL