<!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>
时间： 2024-10-12 17:23:22