Bootstrap3 datetimepicker控件使用实例详解

原文网址： http://www.jb51.net/article/99896.htm

Bootstrap3 日期+时间选择控件的使用方法，供大家参考，具体内容如下

1.支持日期选择，格式设定
2.支持时间选择
3.支持时间段选择控制
4.支持中文

官网地址：http://eonasdan.github.io/bootstrap-datetimepicker/
git地址：https://github.com/Eonasdan/bootstrap-datetimepicker
moment语言包：https://github.com/moment/moment
datetimepicker使用配置说明：http://eonasdan.github.io/bootstrap-datetimepicker/Options/
moment时间格式化使用说明：http://momentjs.com/docs/

使用方法，引用的文件：

1 2 3 4 5 6 7

< script src = "../Js/jquery-1.11.3.min.js" ></ script > < link href = "../Js/bootstrap-3.3.5-dist/css/bootstrap.css" rel = "stylesheet" /> < script src = "../Js/bootstrap-3.3.5-dist/js/bootstrap.min.js" ></ script >    < link href = "../Js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel = "stylesheet" /> < script src = "../Js/bootstrap-datetimepicker/js/moment-with-locales.min.js" ></ script > < script src = "../Js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" ></ script >

实例1，简单配置：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

< div class = "row" >   < div class = 'col-sm-6' >   < div class = "form-group" >    < label >选择日期：</ label >    <!--指定 date标记-->    < 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 >    <!--指定 date标记-->    < 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 >

1 2 3 4 5 6 7 8 9 10

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

实例2，选择时间段：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

< div class = "row" >   < div class = 'col-sm-6' >   < div class = "form-group" >    < label >选择开始时间：</ label >    <!--指定 date标记-->    < 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 >    <!--指定 date标记-->    < 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 >

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$( 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);   }); });