English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
There are two time selectors in bootstrap: dateTimePicker and dateRangePicker
1dateTimePicker seems to be an official plugin:
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 for direct reference:http://www.bootcss.com/p/bootstrap-datetimepicker/
2dateRangePicker seems to be a third-party plugin, which can ultimately realize the selection of time periods.
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 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', //minimum time
maxDate : moment(), //maximum time
dateLimit : {
days : 30
}, //maximum interval between start and end time
showDropdowns : true,
showWeekNumbers : false, //whether to display the number of the week
timePicker : true, //whether to display hours and minutes
timePickerIncrement : 60, //time increment, unit in minutes
timePicker12Hour : false, //whether to use12display time in 12-hour format
ranges : {
//recent1hour': [moment().subtract('hours',1), moment()],
today': [moment().startOf('day'), moment()],
yesterday': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
recent7day': [moment().subtract('days', 6), moment()],
recent30 day': [moment().subtract('days', 29), 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', //The date format displayed in the from and to of the control
separator : ' to ',
locale : {
applyLabel : 'Confirm',
cancelLabel : 'Cancel',
fromLabel : 'Start Time',
toLabel : 'End Time',
customRangeLabel : 'Custom',
daysOfWeek : [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
monthNames : [ 'January', 'February', 'March', 'April', 'May', 'June',
firstDay : 1
}
}, function(start, end, label) {//Formatted Date Display Box
$('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
});
//Set the selected option of the date menu --Start--
/*
var dateOption ;
if("${riqi}"=='day') {
dateOption = "Today";
}
dateOption = "Yesterday";
}
dateOption ="Last";7Day";
}
dateOption ="Last";30th Day";
}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 selected option of the date menu --End--
});
</script>
However, there is a problem with the localization of the month here, it is recommended to modify the moment.min.js file.
It can also be localized later, a more complete code:
var table;
$(function () {
table = $('#example').DataTable({
"ajax": {
"url":"/example/resources/server_processing_customCUrl.php",
"data": function ( d ) {
//Add additional parameters to be passed to the server
d.extra_search = $('#reportrange span').html();
}},
"processing": true,
"serverSide": true,
"language": {
"sProcessing": "Processing..."
"sLengthMenu": "Show _MENU_ entries"
"sZeroRecords": "No matching results found"
"sInfo": "Displaying _START_ to _END_ of _TOTAL_ entries"
"sInfoEmpty": "Displaying 0 to 0 of 0 entries"
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"sInfoPostFix": "",
"sSearch": "Search:",
"sUrl": "",
"sEmptyTable": "No data available in table"
"sLoadingRecords": "Loading..."
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "First page",
"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<'#mytoolbox'>><'span3'f>r>"+
"t"+
"<'row'<'span6'i><'span6'p>>"
initComplete:initComplete
});
});
/**
* The method to be executed 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 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', //minimum time
maxDate : moment(), //maximum time
dateLimit : {
days : 30
}, //maximum interval between start and end time
showDropdowns : true,
showWeekNumbers : false, //whether to display the number of the week
timePicker : true, //whether to display hours and minutes
timePickerIncrement : 60, //time increment, unit in minutes
timePicker12Hour : false, //whether to use12display time in 12-hour format
ranges : {
//recent1hour': [moment().subtract('hours',1), moment()],
today': [moment().startOf('day'), moment()],
yesterday': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
recent7day': [moment().subtract('days', 6), moment()],
recent30 day': [moment().subtract('days', 29), 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', //The date format displayed in the from and to of the control
separator : ' to ',
locale : {
applyLabel : 'Confirm',
cancelLabel : 'Cancel',
fromLabel : 'Start Time',
toLabel : 'End Time',
customRangeLabel : 'Custom',
daysOfWeek : [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
monthNames : [ 'January', 'February', 'March', 'April', 'May', 'June',
firstDay : 1
}
}, function(start, end, label) {//Formatted Date Display Box
$('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
});
//Set the selected option of the date menu --Start--
var dateOption ;
if("${riqi}"=='day') {
dateOption = "Today";
}
dateOption = "Yesterday";
}
dateOption ="Last";7Day";
}
dateOption ="Last";30th Day";
}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 selected option of the date menu --End--
//Method triggered after selecting the time
$("#reportrange").on('apply.daterangepicker',function(){
//The method of reloading data for dt after selecting the time
table.ajax.reload();
//Get dt request parameters
var args = table.ajax.params();
console.log("The extra parameter value extra_search passed to the backend 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 dateranggepicker information on the Internet, you will find an official website: http://www.daterangepicker.com/, the API is comprehensive, but the actual operation habits are not convenient; so I recommend daterangepicker more.-bs3.
If you want to learn more deeply, you can click here to learn, and I will also attach two exciting special topics: Bootstrap Learning Tutorial Bootstrap Practical Tutorial
That's all for this article. I hope it helps with your learning, and I also hope everyone will support the Naya Tutorial.