BOOTSTRAP3 DateTimePicker Controls use instances _javascript tips

BOOTSTRAP3 Date + Time selection control method of use for your reference, the specific contents are as follows

1. Support date selection, format setting
2. Support Time Selection
3. Support Time Segment selection control
4. Support Chinese

Website address: http://eonasdan.github.io/bootstrap-datetimepicker/
Git address: Https://github.com/Eonasdan/bootstrap-datetimepicker
Moment language Pack: Https://github.com/moment/moment
DateTimePicker Usage Configuration instructions: http://eonasdan.github.io/bootstrap-datetimepicker/Options/
Moment time Format usage instructions: http://momentjs.com/docs/

Using the method, the referenced file:

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

Example 1, simple configuration:

 <div class= "Row" > <div class= ' col-sm-6 ' > <div class= ' form-group ' > <label> Select Date:</label> <!--specify date tag--> <div class= ' input-group date ' id= ' dateTimePicker1 ' 
  ; <input type= ' text ' class= "Form-control"/> <span class= "Input-group-addon" > <span class= "Glyphicon g Lyphicon-calendar "></span> </span> </div> </div> </div> <div class= ' col-sm -6 ' > <div class= "form-group" > <label> Select Date + Time:</label> <!--specify date tag--> <div class = ' Input-group date ' id= ' Datetimepicker2 ' > <input type= ' text ' class= ' Form-control '/> <span the class= ' input- Group-addon "> <span class=" Glyphicon glyphicon-calendar "></span> </span> </div> ;/div> </div> </div> 

 $ (' #datetimepicker1 '). DateTimePicker ({ 
 format: ' Yyyy-mm-dd ', 
 locale:moment.locale (' ZH-CN ') 
 }); 
 $ (' #datetimepicker2 '). DateTimePicker ({ 
 format: ' Yyyy-mm-dd hh:mm ', 
 locale:moment.locale (' ZH-CN ') 
 }); 

Instance 2, select a time period:

 <div class= "Row" > <div class= ' col-sm-6 ' > <div class= ' form-group ' > <label> Select Start Time:</label> <!--specify a date tag--> <div class= ' input-group date ' id= ' dateTimePicker1 ' & 
  Gt <input type= ' text ' class= "Form-control"/> <span class= "Input-group-addon" > <span class= "Glyphicon g Lyphicon-calendar "></span> </span> </div> </div> </div> <div class= ' col-sm -6 ' > <div class= "form-group" > <label> Select End Time:</label> <!--specify a date tag--> <div class= ' Input-group date ' id= ' Datetimepicker2 ' > <input type= ' text ' class= ' Form-control '/> <span the class= ' input-g Roup-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 ') 
 }); 
 Dynamically set minimum value 
 picker1.on (' Dp.change ', function (e) { 
 picker2.data (' DateTimePicker '). MinDate (e.date); 
 }); 
 Dynamically set maximum value 
 picker2.on (' Dp.change ', function (e) { 
 picker1.data (' DateTimePicker '). MaxDate (e.date); 
 }); 
}); 

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.