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 相关文章推荐
浅析Cookie中的Path与domain
Dec 18 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
Vue路由模块化配置的完整步骤
Aug 14 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
输出控制类
2006/10/09 PHP
动态新闻发布的实现及其技巧
2006/10/09 PHP
一个简单计数器的源代码
2006/10/09 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
javascript实现评分功能
2020/06/24 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
python设置检查点简单实现代码
2014/07/01 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
驾驶员安全责任书
2014/07/22 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
融资合作协议书范本
2014/10/17 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
初中毕业生自我评价
2015/03/02 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫