javascript - daterangepicker 在 Laravel 7 中没有使用引导程序折叠打开
问题描述
我一直在研究报告引擎，所有图表都使用 Ajax 和 jquery 来更新页面。我想添加一个日期范围选择器并转到日期范围选择器示例
我能够得到它，因此它具有图标和页面加载时填充的日期。但是，当我单击该字段时，它不会打开以提供选择选项。我采用了示例代码，并且能够让它在页面上仅使用它。在控制台中，我没有看到任何错误。我刚刚进入 jquery 等，所以我对为什么这不起作用感到困惑。
HTML 内容
<div class="row justify-content-center">
<div class="col-auto">
<h1>Report for {{ $labels['Company'] }}</h1>
</div>
</div>
<div class="col-4 float-right">
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>
</div>
<div class=" justify-content-around bg-white">
<div class="d-flex justify-content-around bg-white">
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="impressions"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Impressions</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body ">
<div class="test rounded-circle font-weight-bolder col-xs" id="clicks"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Clicks</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cpm"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">eCPM</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cost"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Cost</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cpc"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">CPC</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="ctr"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">CTR</h6>
</div>
</div>
</div>
</div>
<div class="card-body">
<canvas id="myAreaChart" width="100%" height="30"></canvas>
</div>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
</div>
</div>
</div>
</div>
脚本部分
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" ></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script type="text/javascript">
$(function () {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$(".rangeArea").load("reportRange", function() {
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
})
cb(start, end);
});
( function ( $ ) {
var charts = {
init: function () {
// -- Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
this.ajaxGetPostMonthlyData();
},
ajaxGetPostMonthlyData: function () {
var urlPath = 'http://' + window.location.hostname + ':8000/admin/comp/get-post-chart-data/'+{{$labels['orgid']}};
var request = $.ajax( {
method: 'GET',
url: urlPath
} );
request.done( function ( response ) {
$("#ctr").html(response.totals.ctr);
$("#cpc").html(response.totals.cpc);
$("#cost").html(response.totals.cost);
$("#cpm").html(response.totals.cpm);
$("#clicks").html(response.totals.clicks);
$("#impressions").html(response.totals.impressions);
charts.createCompletedJobsChart( response );
});
},
/**
* Created the Completed Jobs Chart
*/
createCompletedJobsChart: function ( response ) {
console.log(response);
var days = new Array();
var clicks = new Array();
var impressions = new Array();
$.each(response.totalByDate, function (index, value){
days.push(value['days']);
clicks.push(value['clicks']);
impressions.push(value['impressions']);
});
var daysFiltered = days.filter(e => e != null);
var clicksFiltered = clicks.filter(e => e != null);
var impressionsFiltered = impressions.filter(e => e != null);
console.log(impressions);
var data = {
labels: daysFiltered,
datasets: [{
fill: false,
type: 'bar',
label: 'Impressions',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: 'impressionID',
data: impressionsFiltered,
borderColor: "#993333",
// borderDash: [5, 5],
backgroundColor: "#993333",
pointBackgroundColor: "#993333",
pointBorderColor: "#993333",
pointHoverBackgroundColor: "#993333",
pointHoverBorderColor: "#993333",
order:2
}, {
fill: false,
type: 'line',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: 'clicksID',
label: 'Clicks',
data: clicksFiltered,
borderColor: "#55bae7",
// borderDash: [5, 5],
backgroundColor: "#55bae7",
pointBackgroundColor: "#55bae7",
pointBorderColor: "#55bae7",
pointHoverBackgroundColor: "#55bae7",
pointHoverBorderColor: "#e755ba",
order: 1
}]
};
var option = {
maintainAspectRatio: true,
responsive: true,
bezierCurveTension: 0,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 3,
fontSize: 10
}
}],
yAxes: [{
position: 'left',
'id': 'impressionID',
display: true,
ticks: {
steps: 100,
stepValue: 5,
max: 800,
callback: (label, index, labels) => {
return label ;
}
}
}, {
position: 'right',
'id': 'clicksID',
display: true,
ticks: {
steps: 1,
stepValue: 1,
precision: 0,
max: 5,
callback: (label, index, labels) => {
return label ;
}
}
},
]
}
};
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: option
});
}
};
charts.init();
} )( jQuery );
</script>
解决方案
推荐阅读
- javascript - 将项目转换为 Typescript 路径时遇到问题
- excel - 尝试刷新 activex 列表框填充范围时出现自动化错误 404
- c - Arduino 作为 I2C 从机与 RPi 对话
- python - 查找两个数据帧/列表中字符串之间的差异，输出差异
- protocol-buffers - 如何在协议缓冲区中存储单个字节？
- javascript - 是对象 Ramda 内的数组或字符串中的值
- macos - 带有 brew 的 Macos 上的多个版本的 .Net Core
- python - python脚本失败时的日志
- docker - 将 WSL VSCode 扩展连接到安装在 Windows 中的 docker
- python - PYTHON - 无法弄清楚为什么我在尝试向电子邮件地址发送消息时收到此错误。b'550 5.7.1 不允许中继：