The Bootstrap time selector datetimepicker and daterangepicker use instance parsing, and datetimepickerrange

The Bootstrap time selector datetimepicker and daterangepicker use instance parsing, and datetimepickerrange

In bootstrap, there are two time selectors: dateTimePicker and dateRangePicker.
 
 
 
1. dateTimePicker seems to be the official Plugin:
 
 
 
Required files:
 

1 <link rel = "stylesheet" href = "css/bootstrap-datetimepicker.min.css">
2 <script src = "js/bootstrap-datetimepicker.min.js"> </script>
3 <script src = "js/bootstrap-datetimepicker.zh-CN.js"> </script>
4 <script src = "js/moment. min. js"> </script>
 
 
 
 
API reference: http://www.bootcss.com/p/bootstrap-datetimepicker/
 
 
 
 
 
 
 
2. dateRangePicker seems to be a third-party plug-in. It can be used to select a time period.

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-calendar fa-calendar "> </I> <span id =" searchDateRange "> </span> <B class =" caret "> </B> </div>

 

Js Code:

<Script type = "text/javascript"> $ (document ). ready (function () {// time plug-in $ ('# reportrange span'{.html (moment (). subtract ('urs', 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: '2017/123', // minimum time maxDate: moment (), // maximum dateLimit: {days: 30}, // maximum interval between start and end times showDropdowns: true, showWeekNumbers: false, // whether to display the timePicker of the week: true, // whether to display hour and minute timePickerIncrement: 60, // time increment, in the unit of minute timePicker12Hour: false, // whether to use 12-hour to display time ranges: {// 'last hour ': [moment (). subtract ('urs', 1), moment ()], 'day': [moment (). startOf ('day'), moment ()], 'Yesterday ': [moment (). subtract ('days ', 1 ). startOf ('day'), moment (). subtract ('days ', 1 ). endOf ('day')], 'last 7 Day': [moment (). subtract ('days ', 6), moment ()], 'last 30 Day': [moment (). subtract ('days ', 29), 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 ', // separator: 'to', locale: {applyLabel: 'OK', cancelLabel: 'cancel', fromLabel: 'start time ', toLabel: 'End time', mrmrangelabel: 'custom', daysOfWeek: ['day', 'yi', '2', '3', '4 ', '5', '6'], monthNames: ['August 11', 'August 11', 'August 11', 'August 11', 'August 30', 'August 30 ', 'October ', 'October'], firstDay: 1 }}, function (start, end, label) {// format the date display box $ ('# reportrange span'{.html (start. format ('yyyy-MM-DD HH: mm: ss') + '-' + end. format ('yyyy-MM-DD HH: mm: ss');}); // set the date menu to be option -- start --/* var dateOption; if ("$ {riqi}" = 'day') {dateOption = "today";} else if ("$ {riqi}" = 'yday ') {dateOption = "yesterday";} else if ("$ {riqi}" = 'Week ') {dateOption = "last 7 days ";} else if ("$ {riqi}" = 'month') {dateOption = "last 30 days";} else if ("$ {riqi}" = 'Year ') {dateOption = "last year";} 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 --}) </script>

However, there is a problem with the localization of the month here. We recommend that you modify it in the moment. min. js file.

You can also compile the code in later stages:

Var table; $ (function () {table = $ ('# example '). dataTable ({"ajax": {"url": "/example/resources/server_processing_customCUrl.php", "data": function (d) {// Add additional parameters to the server d. extra_search = $ ('# reportrange span'example .html () ;}}, "processing": true, "serverSide": true, "language": {"sProcessing ": "processing... "," sLengthMenu ":" display _ MENU _ item result "," sZeroRecords ":" No matching result "," sInfo ": "display the result of items _ START _ to _ END _, total _ TOT AL _ items "," sInfoEmpty ":" display results from 0th to 0, 0 in total "," sInfoFiltered ":" (filtered by _ MAX _ items )", "sInfoPostFix": "", "sSearch": "Search:", "sUrl": "", "sEmptyTable": "empty table data", "sLoadingRecords ": "loading... "," sInfoThousands ":", "," oPaginate ": {" sFirst ":" Homepage "," sPrevious ":" Previous Page "," sNext ":" Next page ", "sLast": "last page"}, "oAria": {"sSortAscending": ": sort this column in ascending order", "sSortDescending": ": sort this column in descending order "}}, "dom": "<'row' <'span9' l <'# mytool Box '> <'span3' f> r> "+" t "+" <'row' <'span6' I> <'span6' p> ", initComplete: initComplete}) ;});/*** method of execution after the table is loaded and rendered * @ param data */function initComplete (data) {var dataPlugin = '<div id = "reportrange" class = "pull-left dateRange" style = "width: 400px; margin-left: 10px">' + 'Date: <I class = "glyphicon-calendar fa-calendar"> </I> '+' <span id = "searchDateRange"> </span> '+' <B class = "caret"> </B> </d Iv> '; $ (' # mytoolbox '). append (dataPlugin); // time plug-in $ ('# reportrange span'apps.html (moment (). subtract ('urs', 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: '2017/123', // minimum time maxDate: moment (), // maximum dateLimit: {days: 30}, // maximum interval of the start and end times showDropdowns: True, showWeekNumbers: false, // whether to display the timePicker of the week to be true, // whether to display the hour and minute timePickerIncrement: 60, // time increment, in the unit of minute timePicker12Hour: false, // whether to use the 12-hour mechanism to display the time ranges: {// 'last hour ': [moment (). subtract ('urs', 1), moment ()], 'day': [moment (). startOf ('day'), moment ()], 'Yesterday ': [moment (). subtract ('days ', 1 ). startOf ('day'), moment (). subtract ('days ', 1 ). endOf ('day')], 'last 7 Day': [moment (). subtract ('days ', 6), mom Ent ()], 'last 30 ': [moment (). subtract ('days ', 29), 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 ', // separator: 'to', locale: {applyLabel: 'OK', cancelLabel: 'cancel', fromLabel: 'start time ', toLabel: 'End time', mrmrangelabel: 'custom', daysOfWeek: ['Day', 'yi', '2', '3', '4', '5', '6'], monthNames: ['August 11 ', 'octoken ', 'july 11'], firstDay: 1 }}, function (start, end, label) {// format the date display box $ ('# reportrange span'{.html (start. format ('yyyy-MM-DD HH: mm: ss') + '-' + end. format ('yyyy-MM-DD HH: mm: ss');}); // set the date menu to be option -- start -- var dateOption; if ("$ {riqi}" = 'day') {dateOption = "today";} else if ("$ {riqi}" = = 'Day') {dateOption = "yesterday";} else if ("$ {riqi}" = 'Week') {dateOption = "last 7 days ";} else if ("$ {riqi}" = 'month') {dateOption = "last 30 days";} else if ("$ {riqi}" = 'Year ') {dateOption = "last year";} 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 Item -- end -- // Method for triggering reload after selecting a time $ ("# reportrange "). on ('apply. daterangepicker ', function () {// The method table for reloading data from dt after the time is selected. ajax. reload (); // obtain the dt request parameter var args = table. ajax. params (); console. log ("parameter value extra_search uploaded to the background is:" + 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 egg:

When searching for information about dateranggepicker on the internet, you will find a relatively Official Website: Baidu.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.