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访问XML数据的实例
Dec 27 Javascript
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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表单重复提交实现方法
2015/09/29 PHP
python进程与线程小结实例分析
2018/11/11 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
跟老齐学Python之模块的加载
2014/10/24 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python如何为图片添加水印
2016/11/25 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
python 爬虫请求模块requests详解
2020/12/04 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
ktv中秋节活动方案
2014/01/30 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP