집 > 기사 > 웹 프론트엔드 > 시간 코드 Sharing_jquery를 사용한 jQuery 날짜 제어

시간 코드 Sharing_jquery를 사용한 jQuery 날짜 제어

WBOY원래의: 2016-05-16 15:42:221281검색

이 기사의 예에서는 JS CSS3로 구현된 Apple 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 날짜 제어 코드입니다. 마음에 드셨으면 좋겠습니다.

성명：

이전 기사：js css(2개 모델)_javascript 기술로 구현된 둥근 테두리가 있는 TAB 탭 슬라이딩 도어에 대한 코드 공유다음 기사：js css(2개 모델)_javascript 기술로 구현된 둥근 테두리가 있는 TAB 탭 슬라이딩 도어에 대한 코드 공유

시간 코드 Sharing_jquery를 사용한 jQuery 날짜 제어

관련 기사