jjhc
/
jucai


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>日期时间选择器：datetimepicker</title>
<meta name="keywords" content="datetimepicker, jquery插件" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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: true,
	    timeFormat: 'hh:mm:ss:l'
    });
	$('#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="header">
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
</div>
<div id="main">
   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-169.html">日期时间选择器：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>

<div id="footer">
    <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>
<p id="stat"><script type="text/javascript" src="http://js.tongji.linezing.com/1870888/tongji.js"></script></p>
</body>
</html>