您的位置：首页 > Web前端 > BootStrap

bootstrap-datetimepicker：基于twitter bootstrap的日期/时间选择控件

2016-06-17 10:52 771 查看
ootstrap-datetimepicker是一个基于twitter bootstrap的简单日期/时间选择控件。


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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  twitter 控件 bootstrap
相关文章推荐
新的分享
章节导航