ホームページ > 記事 > ウェブフロントエンド > タイムコードを使用した jQuery 日付コントロール Sharing_jquery
タイムコードを使用した jQuery 日付コントロール Sharing_jquery
- WBOYオリジナル
- 2016-05-16 15:42:221277ブラウズ
この記事の例では、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 の日付制御コードです。気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。