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/ 使用方法，引用的檔案：

< 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，簡單配置：

?

< 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 >

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

http://files.jb51.net/file_images/article/201612/20161213122956542.jpg?2016111312304

執行個體2，選擇時間段：

< 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 >

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

http://files.jb51.net/file_images/article/201612/20161213123037830.jpg?20161113123044