<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示：日期时间选择器：datetimepicker</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<style type="text/css">
a{color:#007bc4/*#424242*/; text-decoration:none;}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
body{height:100%; font:12px/18px Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C;}
img{border:none}
.demo{width:500px; margin:20px auto}
.demo h4{height:32px; line-height:32px; font-size:14px}
.demo h4 span{font-weight:500; font-size:12px}
.demo p{line-height:28px;}
input{width:200px; height:20px; line-height:20px; padding:2px; border:1px solid #d3d3d3}
pre{padding:6px 0 0 0; color:#666; line-height:20px; background:#f7f7f7}
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px;}
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui_tpicker_hour_label,.ui_tpicker_minute_label,.ui_tpicker_second_label,.ui_tpicker_millisec_label,.ui_tpicker_time_label{padding-left:20px}
</style>
<script type=\'text/javascript\' src=\'js/jquery-1.7.2.min.js\'></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui-slide.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(function(){
$(\'#example_1\').datetimepicker();
$(\'#example_2\').timepicker({});
$(\'#example_3\').datetimepicker({
showSecond: true,
showMillisec: null,
timeFormat: \'hh:mm\'
});
$(\'#example_4\').timepicker({
ampm: true,
hourMin: 8,
hourMax: 16
});
$(\'#example_5\').datetimepicker({
hour: 13,
minute: 15
});
$(\'#example_6\').datetimepicker({
numberOfMonths: 2,
minDate: 0,
maxDate: 30
});
$(\'#example_7\').timepicker({
hourGrid: 4,
minuteGrid: 10
});
var ex8 = $(\'#example_8\');
ex8.datetimepicker();
$(\'#example_8_set_btn\').click(function(){
ex8.datetimepicker(\'setDate\', (new Date()) );
});
$(\'#example_8_get_btn\').click(function(){
alert(ex8.datetimepicker(\'getDate\'));
});
});
</script>
</head>
<body>
<div id="main">
<h2 class="top_title"><a>日期时间选择器：datetimepicker</a></h2>
<div class="demo">
<h4>1、默认：</h4>
<p><input type="text" id="example_1" /></p>
<pre>
$(\'#example_1\').datetimepicker();
</pre>
</div>
<div class="demo">
<h4>2、只选择时间：</h4>
<p><input type="text" id="example_2" /></p>
<pre>
$(\'#example_2\').timepicker();
</pre>
</div>
<div class="demo">
<h4>3、显示时分秒毫秒格式：</h4>
<p><input type="text" id="example_3" /></p>
<pre>
$(\'#example_3\').datetimepicker({
showSecond: true,
showMillisec: true,
timeFormat: \'hh:mm:ss:l\'
});
</pre>
</div>
<div class="demo">
<h4>4、设置时间可选范围：</h4>
<p><input type="text" id="example_4" /></p>
<pre>
$(\'#example_4\').timepicker({
ampm: true,
hourMin: 8,
hourMax: 16
});
</pre>
</div>
<div class="demo">
<h4>5、默认时间：</h4>
<p><input type="text" id="example_5" /></p>
<pre>
$(\'#example_5\').datetimepicker({
hour: 13,
minute: 15
});
</pre>
</div>
<div class="demo">
<h4>6、显示多月并设置可选日期范围：</h4>
<p><input type="text" id="example_6" /></p>
<pre>
$(\'#example_6\').datetimepicker({
numberOfMonths: 2,
minDate: 0,
maxDate: 30
});
</pre>
</div>
<div class="demo">
<h4>7、显示时间标尺：</h4>
<p><input type="text" id="example_7" /></p>
<pre>
$(\'#example_7\').timepicker({
hourGrid: 4,
minuteGrid: 10
});
</pre>
</div>
<div class="demo">
<h4>8、获取和设置时间：</h4>
<p><input type="text" id="example_8" />
<button id="example_8_set_btn">Set Datetime</button>
<button id="example_8_get_btn">Get Datetime</button>
<pre>
var ex8 = $(\'#example_8\');
ex8.datetimepicker();
$(\'#example_8_set_btn\').click(function(){
ex8.datetimepicker(\'setDate\', (new Date()) );
});
$(\'#example_8_get_btn\').click(function(){
alert(ex8.datetimepicker(\'getDate\'));
});
</pre>
</div>
<br/>
</div>
</body>
</html>