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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
javascript与有限状态机详解
May 08 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
Node.js的特点详解
Feb 03 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
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
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
关于保护环境的标语
2014/06/09 职场文书
新闻发布会策划方案
2014/06/12 职场文书
会计专业求职信范文
2015/03/19 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP