基于twitter bootstrap的时间控件

转载自：http://www.open-open.com/lib/view/open1356568521682.html

时间：2014-07-04 11:10:35

 1 <!DOCTYPE HTML>
 2 <html>
 3   <head>
 4     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
 5     <link rel="stylesheet" type="text/css" media="screen"
 6      href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
 7   </head>
 8   <body>
 9     <div id="datetimepicker" class="input-append date">
10       <input type="text"></input>
11       <span class="add-on">
12         <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
13       </span>
14     </div>
15     <script type="text/javascript"
16      src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
17     </script> 
18     <script type="text/javascript"
19      src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
20     </script>
21     <script type="text/javascript"
22      src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
23     </script>
24     <script type="text/javascript">
25       $('#datetimepicker').datetimepicker({
26         format: 'MM/dd/yyyy hh:mm',
27         language: 'en',
28         pickDate: true,
29         pickTime: true,
30         hourStep: 1,
31         minuteStep: 15,
32         secondStep: 30,
33         inputMask: true
34       });
35     </script>
36   </body>
37 <html>

 

posted on 2014-07-04 11:21  怀念未来  阅读(191)  评论(0)    收藏  举报

导航