Bootstrap time selector DateTimePicker and Daterangepicker use instance to parse _javascript tips

There are two types of time selectors in Bootstrap: DateTimePicker and Daterangepicker

1, DateTimePicker seems to be the official di plug-ins:

Required Files:

<link rel= "stylesheet" href= "Css/bootstrap-datetimepicker.min.css" >
<script src= "js/" Bootstrap-datetimepicker.min.js "></script>
<script src=" Js/bootstrap-datetimepicker.zh-cn.js " ></script>
<script src= "Js/moment.min.js" ></script> 

API Direct Reference: http://www.bootcss.com/p/bootstrap-datetimepicker/

2, Daterangepicker seems to be a third-party plug-in, it is ultimately possible to achieve the time period of choice.

Required Files:

<link rel= "stylesheet" href= "Css/daterangepicker-bs3.css" >
<script src= "Js/daterangepicker.js" > </script>
<script src= "Js/moment.min.js" ></script> 

HTML code:

<div class= "Container-fluid" >
 <div class= "Row-fluid" style= "margin-top:5px" >
 <div class= " Span4 ">
 <div class=" Control-group ">
 <label class=" Control-label ">
  Date:
 </label >
 <div class= "Controls" >
  <div id= "Reportrange" class= "Pull-left daterange" style= "width:350px" >
  <i class= "Glyphicon glyphicon-calendar fa Fa-calendar" ></i>
  <span id= "Searchdaterange" ></span>
  <b class= "caret" ></b>
  </div>
 </div>
 </div>
 </div>
 </div>
</div>

JS Code:

 <script type= "Text/javascript" > (document). Ready (function () {//Time plug-in $ (' #reportrange span '). HTML (Moment (). Sub
 Tract (' hours ', 1). Format (' Yyyy-mm-dd HH:mm:ss ') + '-' + Moment (). Format (' Yyyy-mm-dd HH:mm:ss '); $ (' #reportrange '). Daterangepicker ({//Startdate:moment (). StartOf (' Day '),//enddate:moment (),//mindate: ' 01/01/ 2012 ',//min time maxdate:moment (),//MAX time Datelimit: {days:30},//The maximum interval between the start and end Times Showdropdowns:true, Showwee Knumbers:false,//Whether show the week timepicker:true,//whether to display hours and minutes timepickerincrement:60,//Time increment, in minutes timepicker12hour : false,//whether to use a 12-hour system to display the time ranges: {//' Last 1 hours ': [Moment (). Subtract (' hours ', 1), Moment ()], ' Today ': [Moment (). StartOf (' d Ay '), Moment ()], ' Yesterday ': [Moment (). Subtract (' days ', 1). StartOf (' Day '), Moment (). Subtract (' Times ', 1). EndOf (' Day ')], ' last 7  Day ': [Moment (). Subtract (' Days ', 6), Moment ()], ' last 30th ': [Moment (). Subtract (' Days ', O ', Moment ()]}, opens: ' Right ', The pop-up location of the date selection box buttonclasses: [' btn Btn-defauLt '], Applyclass: ' Btn-small btn-primary Blue ', Cancelclass: ' Btn-small ', format: ' Yyyy-mm-dd HH:mm:ss ',//control FR The OM and to display date formats separator: ' To ', locale: {applylabel: ' OK ', Cancellabel: ' Cancel ', Fromlabel: ' Start time ', Tolabe  L: ' End Time ', Customrangelabel: ' Custom ', DaysOfWeek: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '], monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December ', firstday:1}}, function (Start, end, label) {//lattice
 Format Date display box $ (' #reportrange span '). HTML (Start.format (' Yyyy-mm-dd HH:mm:ss ') + '-' + end.format (' Yyyy-mm-dd HH:mm:ss '));
 });
 Set Date menu is selected--Start--/* var dateoption;
 if ("${riqi}" = = ' Day ') {dateoption = "Today";
 }else if ("${riqi}" = = ' Yday ') {dateoption = "Yesterday";
 }else if ("${riqi}" = = ' Week ') {dateoption = "last 7th";
 }else if ("${riqi}" = = ' month ') {dateoption = "last 30th";
 }else if ("${riqi}" = = ' year ') {dateoption = "most recent";
 }else{dateoption = "Custom"; $ (". Daterangepicker"). Find ("Li"). each (function () {if (.. Hasclass ("active")) {$ (this). Removeclass ("active");
 } if (dateoption==$ (this). HTML ()) {$ (this). AddClass ("active"); ///Set Date menu selected--end--}) </script>

However, there are problems in the moment.min.js of the month, the proposal needs to go to the file inside to modify.

can also be in later Chinese, more complete code:

var table; $ (function () {table = $ (' #example '). DataTable ({"Ajax": {"url": "/example/resources/server_processing_customcurl.php", "Data": function (d) {///Add extra parameters
 Pass to Server D.extra_search = $ (' #reportrange span '). HTML (); }, "Processing": true, "serverside": True, "language": {"sprocessing": "Processing ...", "Slengthmenu": "Displaying _menu_ item results", " Szerorecords ":" No match result "," Sinfo ":" Show _start_ to _end_ result, total _total_ item "," Sinfoempty ":" Show No. 0 to No. 0 result, a total of 0 items "," Sinfofil tered ":" (Filtered by _max_), "Sinfopostfix": "", "Ssearch": "Search:", "sURL": "," semptytable ":" The data in the table is empty "," Sloadingrecord S ":" Loading ... "," sinfothousands ":", "," opaginate ": {" Sfirst ":" Home "," sprevious ":" Prev "," Snext ":" Next Page "," Slast ":" Last "}," Oaria ": {" ssortascending ":" To arrange this column in ascending order "," ssortdescending ":": In descending order this column "}}," Dom ":" < ' row ' < ' span
 9 ' l< ' #mytoolbox ' >>< ' span3 ' f>r> ' + ' t ' + ' < ' row ' < ' span6 ' i>< ' span6 ' p>> '
 
 Initcomplete:initcomplete});
 
 }); /**
 *The method executed after the table loading render is * @param data/function InitComplete (data) {var dataplugin = ' <div id= ' reportrange ' class= ' pull -left daterange "style=" width:400px;margin-left:10px "> ' + ' Date: <i class=" Glyphicon Glyphicon-calendar FA Fa-calendar "></i> ' +" <span id= "Searchdaterange" ></span> ' + ' <b class= ' caret ' ></b>
 </div> ';
 $ (' #mytoolbox '). Append (Dataplugin); Time Plugin $ (' #reportrange span '). HTML (Moment (). Subtract (' hours ', 1). Format (' Yyyy-mm-dd HH:mm:ss ') + '-' + Moment (). Format
 
 (' Yyyy-mm-dd HH:mm:ss ')); $ (' #reportrange '). Daterangepicker ({//Startdate:moment (). StartOf (' Day '),//enddate:moment (),//mindate: ' 01/01/ 2012 ',//min time maxdate:moment (),//MAX time Datelimit: {days:30},//The maximum interval between the start and end Times Showdropdowns:true, Showweek  Numbers:false,//Whether show the week timepicker:true,//whether to display hours and minutes timepickerincrement:60,//Time increment, in minutes Timepicker12hour: False,//whether to use a 12-hour system to display the time ranges: {//' Last 1 hours ': [Moment (). Subtract (' Hours ', 1), Moment ()], ' Today ': [Moment (). StartOf (' Day '), Moment ()], ' Yesterday ': [Moment (). Subtract (' days ', 1). StartOf (' date '), Moment (). Subtract (' Days ', 1). EndOf (' Day ')], ' last 7th ': [Moment (). Subtract (' Days ', 6), Moment ()], ' recent 30th ': [Moment (). Subtract (' Day  S ', Moment ()]}, opens: ' Right ', popup position of//Date selection box buttonclasses: [' btn Btn-default '], Applyclass: ' Btn-small  Btn-primary Blue ', Cancelclass: ' Btn-small ', format: ' Yyyy-mm-dd HH:mm:ss ', date format from and to display in control separator: ' To  ', Locale: {applylabel: ' OK ', Cancellabel: ' Cancel ', Fromlabel: ' Start time ', Tolabel: ' End Time ', Customrangelabel:  ' Custom ', DaysOfWeek: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' Six ', monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December ', firstday:1}}, function (Start, end, label) {//Format date display box $ (' #reportrange span
 '). HTML (Start.format (' Yyyy-mm-dd HH:mm:ss ') + '-' + end.format (' Yyyy-mm-dd HH:mm:ss '));
 
 });
 Set Date menu is selected--start--VAR dateoption; if ("${riqi}"= = ' Day ') {dateoption =" Today ";
 }else if ("${riqi}" = = ' Yday ') {dateoption = "Yesterday";
 }else if ("${riqi}" = = ' Week ') {dateoption = "last 7th";
 }else if ("${riqi}" = = ' month ') {dateoption = "last 30th";
 }else if ("${riqi}" = = ' year ') {dateoption = "most recent";
 }else{dateoption = "Custom"; $ (". Daterangepicker"). Find ("Li"). each (function () {if ($ (this). Hasclass ("active")) {$ (this). Removeclass ("active")
 ;
 } if (dateoption==$ (this). HTML ()) {$ (this). AddClass ("active");
 }
 }); Set the date menu to be selected--end--//Select time to trigger the Reload method $ ("#reportrange"). On (' Apply.daterangepicker ', function () {///When selecting time, start dt reload data
 Method Table.ajax.reload ();
 Get dt Request parameter var args = Table.ajax.params ();
 Console.log ("The additional background value of the parameter extra_search:" +args.extra_search);
 
 }); function GetParam (URL) {var data = decodeURI (URL). Split ("?")
 [1];
 var param = {};
 
 var STRs = Data.split ("&");
 for (var i = 0; i<strs.length; i++) {param[strs[i].split ("=") [0]] = strs[i].split ("=") [1];
 return param; }
 }

Happy little eggs:

When you search for dateranggepicker information online, you will find a more official website: Http://www.daterangepicker.com/,api Comprehensive, but the actual operating habits are not convenient ; so I suggest daterangepicker-bs3.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

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.