日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日，时分秒的选择。...

日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日，时分秒的选择。

参考链接：http://www.bootcss.com/p/bootstrap-datetimepicker/

1、官网以及很详细的说明了如何使用，这里结合一下自己的使用来写下。

下载解压缩包以后，可以看到有两个实例，可以打开看看，分别是sample in bootstrap v2、sample in bootstrap v3。

2、sample in bootstrap v2实例的代码如下所示。

 1 
 2 
 3 
 4     
 5     "./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
 6     "../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
 7 
 8 
 9 
10 
class="container">
11     
"" class="form-horizontal">
12         

13             
Test
14             
class="control-group">
15                 class="control-label">DateTime Picking
16                 
class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
17                     "16" type="text" value="" readonly>
18                     class="add-on">class="icon-remove">
19                     class="add-on">class="icon-th">
20                 
21                 "hidden" id="dtp_input1" value="" />

22             
23             
class="control-group">
24                 class="control-label">Date Picking
25                 
class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
26                     "16" type="text" value="" readonly>
27                     class="add-on">class="icon-remove">
28                     class="add-on">class="icon-th">
29                 
30                 "hidden" id="dtp_input2" value="" />

31             
32             
class="control-group">
33                 class="control-label">Time Picking
34                 
class="controls input-append date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
35                     "16" type="text" value="" readonly>
36                     class="add-on">class="icon-remove">
37                     class="add-on">class="icon-th">
38                 
39                 "hidden" id="dtp_input3" value="" />

40             
41         
42     
43 
44 
45 
46 
47 
48 
49 
82 
83 
84 

效果如下所示：

 3、你会发现，案例里面的都是英文，所以我这里修改为了中文。他这个年月日时分秒可以自己决定，是只用年月日，时分秒，还是年月日时分秒等等自己可以进行需求选择。

 1 
 2 
 3 
 4     
 5     "./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
 6     "../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
 7 
 8 
 9 
10 
class="container">
11     
"" class="form-horizontal">
12         

13             
Test
14             
class="control-group">
15                 class="control-label">DateTime Picking
16                 
class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
17                     "16" type="text" value="" readonly>
18                     class="add-on">class="icon-remove">
19                     class="add-on">class="icon-th">
20                 
21                 "hidden" id="dtp_input1" value="" />

22             
23             
class="control-group">
24                 class="control-label">Date Picking
25                 
class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
26                     "16" type="text" value="" readonly>
27                     class="add-on">class="icon-remove">
28                     class="add-on">class="icon-th">
29                 
30                 "hidden" id="dtp_input2" value="" />

31             
32             
class="control-group">
33                 class="control-label">Time Picking
34                 
class="controls input-append date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
35                     "16" type="text" value="" readonly>
36                     class="add-on">class="icon-remove">
37                     class="add-on">class="icon-th">
38                 
39                 "hidden" id="dtp_input3" value="" />

40             
41         
42     
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
92 
93 
94 

 效果如下所示：这样一搞，就可以显示中文了，日期格式可以自己定义。更多的使用可以查看api。

 

待续......

posted @ 2019-03-19 19:31 别先生 阅读( ...) 评论( ...) 编辑 收藏