实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>演示：datetimepicker日期时间插件</title>
        <style type="text/css">
            .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>
        <link rel="stylesheet" type="text/css" href="/api/jq/datetimepicker/css/jquery-ui.css" />
    </head>
    <body>
 
        <div class="container">
            <div class="demo">
                <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>
            </div>
        </div>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> 
        <script type="text/javascript" src="/api/jq/datetimepicker/js/jquery-ui.js"></script>
        <script type="text/javascript" src="/api/jq/datetimepicker/js/jquery-ui-slide.min.js"></script>
        <script type="text/javascript" src="/api/jq/datetimepicker/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>
    </body>
</html>

​x
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>演示：datetimepicker日期时间插件</title>
        <style type="text/css">
            .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>
        <link rel="stylesheet" type="text/css" href="/api/jq/datetimepicker/css/jquery-ui.css" />