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 相关文章推荐
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python 生成器协程运算实例
2017/09/04 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
数百万免费的图形资源:Freepik
2020/09/21 全球购物
C#面试常见问题
2013/02/25 面试题
电气工程和自动化自荐信范文
2013/12/25 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
酒店辞职书范文
2015/02/26 职场文书
世界名著读书笔记
2015/06/25 职场文书