日期时间选择器：datetimepicker

Posted 月岩雪狼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了日期时间选择器：datetimepicker相关的知识，希望对你有一定的参考价值。

<!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>

　　

以上是关于日期时间选择器：datetimepicker的主要内容，如果未能解决你的问题，请参考以下文章

日期选择器datetimepicker--选择时分秒

将mysql日期转换为日期时间选择器

引导日期时间选择器样式未正确应用

引导日期时间选择器导轨

微信小程序自定义DatetimePicker日期选择器

Bootstrap 日期选择器和 moment.js jalali 日历