bootstrap日期控件使用

朱雀 2022-04-22 02:14 343阅读 0赞

**推荐使用这个版本：[Bootstrap3 datetimepicker控件之smalot的使用][Bootstrap3 datetimepicker_smalot]**

**Bootstrap3 日期+时间选择控件**

1.支持日期选择，格式设定

2.支持时间选择

3.支持时间段选择控制

4.支持中文

官网地址：[http://eonasdan.github.io/bootstrap-datetimepicker/][http_eonasdan.github.io_bootstrap-datetimepicker]

git地址：[https://github.com/Eonasdan/bootstrap-datetimepicker][https_github.com_Eonasdan_bootstrap-datetimepicker]

moment语言包：[https://github.com/moment/moment][https_github.com_moment_moment]

datetimepicker使用配置说明：h[ttp://eonasdan.github.io/bootstrap-datetimepicker/Options/][ttp_eonasdan.github.io_bootstrap-datetimepicker_Options]

moment时间格式化使用说明：[http://momentjs.com/docs/][http_momentjs.com_docs]

使用方法，引用的文件：

**实例1:，简单配置：**

$( function () { 
         $( '#datetimepicker1').datetimepicker({ 
         format: 'YYYY-MM-DD', 
         locale: moment.locale( 'zh-cn') 
         }); 
         $( '#datetimepicker2').datetimepicker({ 
         format: 'YYYY-MM-DD hh:mm', 
         locale: moment.locale( 'zh-cn') 
         }); 
         });

!\[在这里插入图片描述\](https://img-blog.csdn.net/20160621110928388?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)!\[在这里插入图片描述\](https://img-blog.csdn.net/20160621110936033?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)  
**实例2，选择时间段：**

<div class="row"> 
         <div class='col-sm-6'> 
         <div class="form-group"> 
         <label>选择开始时间： </label> 
          
         <div class='input-group date' id='datetimepicker1'> 
         <input type='text' class="form-control" /> 
         <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"> </span> 
         </span> 
         </div> 
         </div> 
         </div> 
         <div class='col-sm-6'> 
         <div class="form-group"> 
         <label>选择结束时间： </label> 
          
         <div class='input-group date' id='datetimepicker2'> 
         <input type='text' class="form-control" /> 
         <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"> </span> 
         </span> 
         </div> 
         </div> 
         </div> 
         </div>

$( function () { 
         var picker1 = $( '#datetimepicker1').datetimepicker({ 
         format: 'YYYY-MM-DD', 
         locale: moment.locale( 'zh-cn'), 
         //minDate: '2016-7-1' 
         }); 
         var picker2 = $( '#datetimepicker2').datetimepicker({ 
         format: 'YYYY-MM-DD', 
         locale: moment.locale( 'zh-cn') 
         }); 
         //动态设置最小值 
         picker1.on( 'dp.change', function (e) { 
         picker2.data( 'DateTimePicker').minDate(e.date); 
         }); 
         //动态设置最大值 
         picker2.on( 'dp.change', function (e) { 
         picker1.data( 'DateTimePicker').maxDate(e.date); 
         }); 
         });

!\[在这里插入图片描述\](https://img-blog.csdn.net/20160621110945517?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

**实例3，使用CDN的文件链接示例：**

js引用：

Html代码：

js代码：

$(function () { 
         $('#date1').datetimepicker({ 
         format: 'YYYY-MM-DD', 
         locale: moment.locale('zh-cn') 
         }); 
         });

**实例4，在初始化的时候，使用defaultDate指定默认时间：**

$( '#datetimepicker1').datetimepicker({ 
         format: 'YYYY-MM-DD', 
         locale: moment.locale( 'zh-cn'), 
         defaultDate: "1990-1-1" 
         });

!\[在这里插入图片描述\](https://img-blog.csdn.net/20170923160917373?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTEyNzAxOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

[jquery.fly.js实现添加购物车效果、实现抛物线运动][jquery.fly.js]

[JQuery.validationEngine表单验证插件][JQuery.validationEngine]

[RequireJS实例][RequireJS]

#     #

[Bootstrap3 datetimepicker_smalot]: https://blog.csdn.net/u011127019/article/details/80369261
[http_eonasdan.github.io_bootstrap-datetimepicker]: http://eonasdan.github.io/bootstrap-datetimepicker/
[https_github.com_Eonasdan_bootstrap-datetimepicker]: https://github.com/Eonasdan/bootstrap-datetimepicker
[https_github.com_moment_moment]: https://github.com/moment/moment
[ttp_eonasdan.github.io_bootstrap-datetimepicker_Options]: http://eonasdan.github.io/bootstrap-datetimepicker/Options/
[http_momentjs.com_docs]: http://momentjs.com/docs/
[jquery.fly.js]: http://blog.csdn.net/u011127019/article/details/62238275
[JQuery.validationEngine]: http://blog.csdn.net/u011127019/article/details/53558262
[RequireJS]: http://blog.csdn.net/u011127019/article/details/53503275