ootstrap-datetimepicker是一个基于twitter bootstrap的简单日期/时间选择控件。
![bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件 bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件](https://i-blog.csdnimg.cn/blog_migrate/e4b9fc8947a2120554bf55e609301b94.gif)
01 | <!DOCTYPE HTML> |
02 | <html> |
03 | <head> |
04 | <link href= "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel= "stylesheet" > |
05 | <link rel= "stylesheet" type= "text/css" media= "screen" |
06 | href= "http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" > |
07 | </head> |
08 | <body> |
09 | <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> |