daterangepicker时间插件选择范围问题
有一个需求是,根据daterangepicker选择的时间范围来决定echart图X轴的坐标,比如6小时以内是这范围内的每一分钟为刻度,6小时到7天内的则是以每小时为刻度。
我把初版代码放上来,有些变量是修改后不需要的,没删,删后的就不放上来了
获取小时的数组
function timeSlot (step,start,end) { // step = 间隔的分钟
var date = new Date(start)
const num=(Date.parse(end)-Date.parse(start))/(1000*60*60)
var arr = [], timeArr = [];
var slotNum = num*60/step // 算出多少个间隔
for (var f = 0; f <= slotNum; f++) { // stepM * f = 24H*60M
var time = new Date(Number(date.getTime()) + Number(step*60*1000*f)) // 获取:零点的时间 + 每次递增的时间
var hour = '', sec = '';
time.getHours() < 10 ? hour = '0' + time.getHours() : hour = time.getHours() // 获取小时
time.getMinutes() < 10 ? sec = '0' + time.getMinutes() : sec = time.getMinutes() // 获取分钟
timeArr.push(time.toLocaleDateString()+" " + hour + ':' + sec)
}
return timeArr
}
获取两个时间戳之间相差分钟数的数组
function miniteSlot (step,start,end) { // step = 间隔的分钟
var date = new Date(start)
const num=(Date.parse(end)-Date.parse(start))/(1000*60)
var arr = [], timeArr = [];
var slotNum = num/step // 算出多少个间隔
for (var f = 1; f <= slotNum; f++) { // stepM * f = 24H*60M
var time = new Date(Number(date.getTime()) + Number(step*60*1000*f)) // 获取:零点的时间 + 每次递增的时间
var hour = '', sec = '';
time.getHours() < 10 ? hour = '0' + time.getHours() : hour = time.getHours() // 获取小时
time.getMinutes() < 10 ? sec = '0' + time.getMinutes() : sec = time.getMinutes() // 获取分钟
timeArr.push(hour + ':' + sec)
}
return timeArr
}
获取两个日期之间的数组
function getDaysBetween(dateString1,dateString2){
var startDate = Date.parse(dateString1);
var endDate = Date.parse(dateString2);
var days=(endDate - startDate)/(1*24*60*60*1000);
return days;
}
// 获取两个日期之间的数组
function daysSlot (start,end) { // step = 间隔的分钟
const num=getDaysBetween(start,end)
var arr = [], timeArr = [];
for (var f = 0; f <= num; f++) { // stepM * f = 24H*60M
var time = new Date(Number(new Date(start)) + Number(24*60*60*1000*f)) // 获取:零点的时间 + 每次递增的时间
var hour = '', sec = '';
timeArr.push(time.toLocaleDateString())
}
return timeArr
}
初始化时间框,并判断时间选择范围
$(".es-daterange-time").each(function () {
let that = this
const id = $(that).attr("id")
$(that).daterangepicker({
autoUpdateInput: true,
alwaysShowCalendars: true,
drops: 'down',
opens: 'left',
timePicker: true, //是否显示time选择
timePicker24Hour: true, //小时分钟
timePickerSeconds: id === "es_seconds_daterangetime" ? true : false, //秒
ranges: {
'24小时': [moment().format('YYYY-MM-DD HH:mm:ss'), moment()],
'3天内': [moment().subtract('days', 2), moment()],
'7天内': [moment().subtract('days', 6), moment()],
'30天内': [moment().subtract('days', 29), moment()],
'90天内': [moment().subtract('days', 89), moment()],
'180天内': [moment().subtract('days', 179), moment()]
},
locale: {
format: id === "es_seconds_daterangetime" ? "YYYY-MM-DD HH:mm:ss" :"YYYY-MM-DD HH:mm",
},
maxDate: new Date(), //当前最新时间
startDate: moment().subtract('hour', 6).format('YYYY-MM-DD HH:mm'),
endDate: moment().format('YYYY-MM-DD HH:mm'),
},
function (start, end) {
$(that).val(start.format('YYYY-MM-DD') + ' ~ ' + end.format('YYYY-MM-DD'));
}
).on('apply.daterangepicker', function (ev, picker) {
// 判断选择的时间范围
const timeDifference = Date.parse(picker.endDate.format('YYYY-MM-DD HH:mm'))-Date.parse(picker.startDate.format('YYYY-MM-DD HH:mm'))
//大于0小于6小时
if(timeDifference > 0 && timeDifference<= 60* 60 * 1000*6){
dateData=miniteSlot(1,picker.startDate.format('YYYY-MM-DD HH:mm'),picker.endDate.format('YYYY-MM-DD HH:mm'))
}else if(timeDifference> 60* 60 * 1000*6 &&timeDifference<= 60* 60 * 1000*24*7){
dateData = timeSlot(60,picker.startDate.format('YYYY-MM-DD HH:mm'),picker.endDate.format('YYYY-MM-DD HH:mm'))
}
else if(timeDifference> 60* 60 * 1000*24*7){
dateData = daysSlot(picker.startDate.format('YYYY-MM-DD'),picker.endDate.format('YYYY-MM-DD'))
}else{
dateData=[new Date().toLocaleTimeString()]
}
if(id==="failed_summary_input"){
initESLineChart("es_failed_chart",esFailedData,dateData)
$(that).val(picker.startDate.format('YYYY-MM-DD HH:mm') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm'));
}else if(id==="es_request_input"){
initESLineChart("es_request_line_chart",esRequestData, dateData)
$(that).val(picker.startDate.format('YYYY-MM-DD HH:mm') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm'));
}else{
$(that).parents(".panel").find(".hexdots-loader").show()
$(that).parents(".panel").find(".table-responsive").hide()
$(that).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
setTimeout(function () {
$(that).parents(".panel").find(".hexdots-loader").hide()
$(that).parents(".panel").find(".table-responsive").show()
},1500)
}
});
})