|
在bootstrap中的时间选择器有两种：dateTimePicker和dateRangePicker
1、dateTimePicker好像是官方嫡插件：
需要的文件：
API直接参考：
2、dateRangePicker好像是第三方插件，它最终的是可以实现时间段的选择。
需要的文件：
但是这里的月份汉化存在问题，建议需要去moment.min.js文件里面去修改。
也可以在后期汉化，比较完整的代码：
><'span3'f>r>"+
"t"+
"<'row'<'span6'i><'span6'p>>",initComplete:initComplete
});
});
/**
- 表格加载渲染完毕后执行的方法
- @param data
*/
function initComplete(data){
var dataPlugin =
'<div id="reportrange" class="pull-left dateRange" style="width:400px;margin-left: 10px"> '+
'日期：<i class="glyphicon glyphicon-calendar fa fa-calendar"> '+
'<span id="searchDateRange"> '+
'<b class="caret">
$('#mytoolbox').append(dataPlugin);
//时间插件
$('#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'),//最大时间
dateLimit : {
days : 30
},label) {//格式化日期显示框
$('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
});
//设置日期菜单被选项 --开始--
var dateOption ;
if("${riqi}"=='day') {
dateOption = "今日";
}else if("${riqi}"=='yday') {
dateOption = "昨日";
}else if("${riqi}"=='week'){
dateOption ="最近7日";
}else if("${riqi}"=='month'){
dateOption ="最近30日";
}else if("${riqi}"=='year'){
dateOption ="最近一年";
}else{
dateOption = "自定义";
}
$(".daterangepicker").find("li").each(function (){
if($(this).hasClass("active")){
$(this).removeClass("active");
}
if(dateOption==$(this).html()){
$(this).addClass("active");
}
});
//设置日期菜单被选项 --结束--
//选择时间后触发重新加载的方法
$("#reportrange").on('apply.daterangepicker',function(){
//当选择时间后，出发dt的重新加载数据的方法
table.ajax.reload();
//获取dt请求参数
var args = table.ajax.params();
console.log("额外传到后台的参数值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;
}
}
幸福小彩蛋：
在网上搜索dateranggepicker的资料时，会找到一个比较官方的网站：http://www.daterangepicker.com/，api全面，但是实际的操作习惯并不便利；所以我更建议daterangepicker-bs3。
如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
