jQuery带时间的日期控件代码分享

本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效。分享给大家供大家参考。具体如下：
带时间的jQuery日期控件代码是一款基于jQueryUI实现的，可自定义日期插件语言，这个日期控件的亮点就在于选择的时间可精确到分钟。
运行效果图：                    -------------------查看效果 下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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带时间的日期控件代码，希望大家可以喜欢。

赞 (0)

相关推荐

  • jQuery之日期选择器的深入解析

    jQuery之日期选择器的深入解析

    1:默认情况下,日期输入文本框获得页面焦点的时候,日期选择器组件会在一个覆盖层中打开日历选择面板,当日期输入文本框失去焦点或者选择一个日期的时候,将自动关闭该日历选择面板$(selector).datepicker([options]);简单实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

  • jquery实现在页面加载的时自动为日期插件添加当前日期

    在页面加载的时候自动为日期插件添加当前日期. <script type="text/javascript"> $(document).ready(function(){ $("#startTime").val(formatDate()); $("#endTime").val(formatDate()); } jsp页面的body部分代码: <td><label>日期:</label></td&

  • jquery获取当前日期的方法

    本文实例讲述了jquery获取当前日期的方法.分享给大家供大家参考. 具体如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery当前日期</title> <script type="text/javascript"

  • jquery 日期控件datepicker属性详细解析

    复制代码 代码如下: $("#regDate").datepicker(     {    showMonthAfterYear: true, // 月在年之后显示    changeMonth: true,   // 允许选择月份    changeYear: true,   // 允许选择年份    dateFormat:'yy-mm-dd',  // 设置日期格式    closeText:'关闭',   // 只有showButtonPanel: true才会显示出来    d

  • jquery validate 自定义验证方法介绍 日期验证

    jquery validate 自定义验证方法介绍 日期验证

    jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法,可以让用户来自定义验证规则. 案例一: 复制代码 代码如下: //自定义验证            $.validator.addMethod("isPositive",function(value,element){                var score = /^[0-9

  • JQuery EasyUI 日期控件如何控制日期选择区间

    复制代码 代码如下: <tr><th>发售起始日期</th> <td><input type="text" id="usLineTime" name="usLineTime" size="20" class='easyui-validatebox Wdate' onFocus="WdatePicker({el:'usLineTime',dateFmt:'yyyy-

  • 获取客户端电脑日期时间js代码(jquery)

    原生态javascript获取日期 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript">var myDate = new Date();    myDate.getYear();       //获取当前年份(2位)    myDate.getFullYear();   //获取完整的年份(4位,1970-????)    myDate.getMonth();      //获取当前月份(0-11,0代表1月)    myDate.getDat

  • jQuery获取某天的农历日期并判断是否除夕或新年的方法

    本文实例讲述了jQuery获取某天的农历日期并判断是否除夕或新年的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表.代码示例如下: 复制代码 代码如下: <script src="js/jquery-1.7.1.js"></script>   <script src="js/jquery-ui-1.8.18.custom.min.js"></script><link rel="stylesheet&qu

  • jQuery实现简单的日期输入格式化控件

    jQuery实现简单的日期输入格式化控件

    js代码有一百多行. 先上效果图  html代码 日期: <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期"> 设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件. js代码 这里应用了jQuery的库, 主要用于选择元素和绑定事件. 复制代码 代码如下: <sc

  • jQuery插件datepicker 日期连续选择

    jQuery插件datepicker 日期连续选择

    先上效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

  • Jquery日期选择datepicker插件用法实例分析

    本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigTe

随机推荐