I made a dashboard with Angular.
I included all my scripts in my index.html, but every time I click a link, only the html and css are executed.
The Javascripts' actions are not executed such as graphs that i implemented.
I have to reload the page for everything to work normally.
That is my index.html source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/materialize/css/materialize.min.css" media="screen,projection" />
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
</head>
<body>
<app-root></app-root>
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
<!-- Tabs -->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function() {
$('#dataTables-example').dataTable();
});
</script>
<!--Pizza-->
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/exporting.js"></script>
<script src="assets/js/pizza.js"></script>
</body>
</html>
Case angular-cli and latest version, copy path of your scripts in angular-cli.json.
Ex.:
"scripts": [
"assets/js/dataTables/jquery.dataTables.js"
],
Related
The tooltips showing are the default looking tooltips instead of the bootstrap 4 ones.
The tooltips I get:
vs. the tooltips I should get:
I activate the tooltips in the head section with this as required by Boostrap (4.5.0):
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
The thing is that when I run this exact command in the console of the devtools, it activates them alright and the right tooltip shows up.
Anyone knows what is interfering ?
Here is my full head section:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Test | Results</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script>
<script src='https://cdn.plot.ly/plotly-2.6.3.min.js'></script>
<script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-1.2.1.js"></script>
<!-- Bootstrap core CSS -->
<link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght#0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght#0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"/>
<!-- Custom styles for this template -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<link href="../../css/custom_features.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.2.1.css">
<link rel="stylesheet" type="text/css" href="../../css/rcsb-molstar.css">
<script>
$(function() {
$("#header").load("../../pages/header_job.html");
$("#footer").load("../../pages/footer_job.html");
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
Ok I finally found the solution.
The problem comes from the fact that the tooltips are on elements that are loaded in javascript.
So the general function to activate the tooltips do not work, I need to use
$("#id").load("./html.txt", function(){
$('[data-toggle="tooltip"]').tooltip();
});
I have the next problem:
I'm trying to install Tempus dominus of bootstrap but I have these bug when I try to put it, the modal body don't cover all the calendar, and in the footer, it would show a clock icon for additional time.
What do you believe could be the wrong whit it, I'm leaving my scripts
d meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="assets/img/brand/favicon.png" type="image/png">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Icons -->
<link rel="stylesheet" href="assets/vendor/nucleo/css/nucleo.css" type="text/css">
<link rel="stylesheet" href="assets/vendor/#fortawesome/fontawesome-free/css/all.min.css" type="text/css">
<!-- Page plugins -->
<!-- CSS -->
<link rel="stylesheet" href="assets/css/argon.css?v=1.2.0" type="text/css">
<!-- Full Callendar -->
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
<link href='fullcalendar/timegrid/main.css' rel='stylesheet' />
<link rel="stylesheet" href="fullcalendar/list/main.css">
<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
<script src='fullcalendar/interaction/main.js'></script>
<script src='fullcalendar/timegrid/main.js'></script>
<script src="fullcalendar/list/main.js"></script>
<script src="js/theme-chooser.js"></script>
<script src="json/events.json"></script>
<!-- ELemeentos aƱadidos para el datepicker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
These are the header scripts
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="assets/img/brand/favicon.png" type="image/png">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Icons -->
<link rel="stylesheet" href="assets/vendor/nucleo/css/nucleo.css" type="text/css">
<link rel="stylesheet" href="assets/vendor/#fortawesome/fontawesome-free/css/all.min.css" type="text/css">
<!-- Page plugins -->
<!-- CSS -->
<link rel="stylesheet" href="assets/css/argon.css?v=1.2.0" type="text/css">
<!-- Full Callendar -->
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
<link href='fullcalendar/timegrid/main.css' rel='stylesheet' />
<link rel="stylesheet" href="fullcalendar/list/main.css">
<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
<script src='fullcalendar/interaction/main.js'></script>
<script src='fullcalendar/timegrid/main.js'></script>
<script src="fullcalendar/list/main.js"></script>
<script src="js/theme-chooser.js"></script>
<script src="json/events.json"></script>
<!-- ELemeentos aƱadidos para el datepicker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<!-- jquery JS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Bootstrap js -->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Now the body's scripts
<script>
$.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'far fa-arrow-up',
down: 'far fa-arrow-down',
previous: 'far fa-chevron-left',
next: 'far fa-chevron-right',
today: 'far fa-calendar-check-o',
clear: 'far fa-trash',
close: 'far fa-times'
} });
</script>
<!-- dashboard Scripts -->
<!-- Core -->
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/js-cookie/js.cookie.js"></script>
<script src="assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Optional JS -->
<script src="assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="assets/vendor/chart.js/dist/Chart.extension.js"></script>
<!-- dashboard JS -->
<script src="assets/js/argon.js?v=1.2.0"></script>
</body>
</html>
I have bootstrap js file inside assets folder like> assets/js/bootstrap.min.js and I have added in my index.HTML page with scrip tag <script src="assets/js/bootstrap.min.js"></script> but is not applying in my component.
What is wrong here or is there any way to use it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="96">
<meta property="og:image:height" content="96">
<meta content="width=2000" name="viewport">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta charset="utf-8">
<title>HomeClueWebApp</title>
<base href="/">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/icofont.css">
<link rel="stylesheet" type="text/css" href="assets/css/stellarnav.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/featherlight.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/featherlight.gallery.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/hover.css">
<link rel="stylesheet" type="text/css" href="assets/css/flexslider.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/slick.css">
<link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="assets/css/animations.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/morphext.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery.mb.YTPlayer.min.css">
<!-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
<!-- Favicon -->
<link href="assets/images/favicon.png" rel="shortcut icon" type="image/png">
<link href="assets/images/apple-icon.png" rel="icon" type="image/png">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/popper.min.js"></script>
<!-- all plugins and JavaScript -->
<script type="text/javascript" src="assets/js/css3-animate-it.js"></script>
<script type="text/javascript" src="assets/js/stellarnav.min.js"></script>
<script type="text/javascript" src="assets/js/featherlight.min.js"></script>
<script type="text/javascript" src="assets/js/featherlight.gallery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/js/jarallax.js"></script>
<script type="text/javascript" src="assets/js/slick.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jquery-scrolltofixed-min.js"></script>
<script type="text/javascript" src="assets/js/morphext.min.js"></script>
<script type="text/javascript" src="assets/js/dyscrollup.js"></script>
<script type="text/javascript" src="assets/js/jquery.ripples.js"></script>
<script type="text/javascript" src="assets/js/jquery.mb.YTPlayer.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<!-- Main Custom JS -->
<script type="text/javascript" src="assets/js/main.js"></script>
<app-root></app-root>
</body>
</html>
file structure is here
https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyMl8xMjE0NjIyMw
https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyNF8xMjE0NjIyNQ
Thanks for any response
you should add jquery and bootstrap scripts in angular.json scripts section.
As all the scripts and styles you are trying to load are inside some folders in assets so you need to tell angular to load and consider those folders as assets.
You can do that in angular.json file as follows:
"assets": [
"src/favicon.ico",
"src/assets",
"src/assets/*" // Add this line at end.
],
With this line at end we are telling angular to build other folders inside assets folder to consider as assets.
As already suggested by #Chirag Chaudhari
This is normally not a good way to load scripts and styles as assets, instead load them with scripts and styles array present in angular.json file.
Hope it helps.
I am using laravel full calender package maddhatter/laravel-fullcalendar. This package is not picking up my theme jquery, bootstrap and moment.
I have included all these in master blade and extends in this blade.
I if change query and bootstrap then calendar works but all others things which are working on theme jquery and bootstrap stops working.
Including these in master blade:
< link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet" >
< script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script >
< script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script >
It shows me console error that
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: $ is not defined
Blade:
#extends('layouts.master')
#section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
<div class="row">
<div class="col-md-12 ">
<div class="panel panel-default">
<div class="panel-heading">Full Calendar Example</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}
#endsection
My Controller:
public function weddingHallDashboardView()
{
$events = [];
$data = Booking::all();
if($data->count()) {
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->booking_type,
true,
new \DateTime($value->date_from),
new \DateTime($value->date_to),
null,
// Add color and link on event
[
'color' => '#f05050',
'url' => 'pass here url and any route',
]
);
}
}
$calendar = Calendar::addEvents($events);
return view('dashboards.wedding-hall-dashboard')
->with(['calendar' => $calendar]);
}
master blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="{{"app-assets/assets/images/favicon.png"}}">
<title>#yield('site_title') | 3orrsy</title>
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<!--alerts CSS -->
<link href="{{"app-assets/assets/plugins/sweetalert/sweetalert.css"}}" rel="stylesheet" type="text/css">
<!-- chartist CSS -->
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist-init.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css"}}"
rel="stylesheet">
<!--This page css - Morris CSS -->
<link href="{{"app-assets/assets/plugins/c3-master/c3.min.css"}}" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"}}" rel="stylesheet">
<!-- Date picker plugins css -->
<link href="{{asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="{{"app-assets/css/style.css"}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{"app-assets/css/colors/blue.css"}}" id="theme" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/SlimImageCropper/slim.css')}}">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div>
// Side Menu
</div>
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{"app-assets/assets/plugins/bootstrap/js/popper.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap/js/bootstrap.min.js"}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{"app-assets/js/jquery.slimscroll.js"}}"></script>
<!--Wave Effects -->
<script src="{{"app-assets/js/waves.js"}}"></script>
<!--Menu sidebar -->
<script src="{{"app-assets/js/sidebarmenu.js"}}"></script>
<!--stickey kit -->
<script src="{{"app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sparkline/jquery.sparkline.min.js"}}"></script>
<!--Custom JavaScript -->
<script src="{{"app-assets/js/custom.min.js"}}"></script>
<script src="{{asset('app-assets/SlimImageCropper/slim.kickstart.min.js')}}"></script>
<!-- Plugin JavaScript -->
<script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"}}"></script>
<!-- Sweet-Alert -->
<script src="{{"app-assets/assets/plugins/sweetalert/sweetalert.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js"}}"></script>
<script src="{{"app-assets/assets/plugins/datatables/jquery.dataTables.min.js"}}"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============web================================================== -->
<!-- chartist chart -->
{{--<script src="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.js"}}"></script>--}}
{{--<script src="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"}}"></script>--}}
<!--c3 JavaScript -->
<!-- Date Picker Plugin JavaScript -->
<script src="{{'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'}}"></script>
<script src="{{"app-assets/assets/plugins/d3/d3.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/c3-master/c3.min.js"}}"></script>
<!-- Chart JS -->
{{--<script src="{{"app-assets/js/dashboard1.js"}}"></script>--}}
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js"}}"></script>
</body>
</html>
Please do ctrl+u and check order of jquery.min.js is first or not. If not add this script at top.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
In your master file.
#stack('links') //after all link.
#stack('script') //after all script
In your blade file.
#push('script')
< script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script >
< script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script >
#endpush
#push('links')
< link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet" >
#endpush
master.blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="{{"app-assets/assets/images/favicon.png"}}">
<title>#yield('site_title') | 3orrsy</title>
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<!--alerts CSS -->
<link href="{{"app-assets/assets/plugins/sweetalert/sweetalert.css"}}" rel="stylesheet" type="text/css">
<!-- chartist CSS -->
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist-init.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css"}}"
rel="stylesheet">
<!--This page css - Morris CSS -->
<link href="{{"app-assets/assets/plugins/c3-master/c3.min.css"}}" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"}}" rel="stylesheet">
<!-- Date picker plugins css -->
<link href="{{asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="{{"app-assets/css/style.css"}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{"app-assets/css/colors/blue.css"}}" id="theme" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/SlimImageCropper/slim.css')}}">
#stack('links')
</head>
<body>
<div>
// Side Menu
</div>
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{"app-assets/assets/plugins/bootstrap/js/popper.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap/js/bootstrap.min.js"}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{"app-assets/js/jquery.slimscroll.js"}}"></script>
<!--Wave Effects -->
<script src="{{"app-assets/js/waves.js"}}"></script>
<!--Menu sidebar -->
<script src="{{"app-assets/js/sidebarmenu.js"}}"></script>
<!--stickey kit -->
<script src="{{"app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sparkline/jquery.sparkline.min.js"}}"></script>
<!--Custom JavaScript -->
<script src="{{"app-assets/js/custom.min.js"}}"></script>
<script src="{{asset('app-assets/SlimImageCropper/slim.kickstart.min.js')}}"></script>
<!-- Plugin JavaScript -->
<script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"}}"></script>
<!-- Sweet-Alert -->
<script src="{{"app-assets/assets/plugins/sweetalert/sweetalert.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js"}}"></script>
<script src="{{"app-assets/assets/plugins/datatables/jquery.dataTables.min.js"}}"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============web================================================== -->
<!-- chartist chart -->
{{--<script src="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.js"}}"></script>--}}
{{--<script src="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"}}"></script>--}}
<!--c3 JavaScript -->
<!-- Date Picker Plugin JavaScript -->
<script src="{{'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'}}"></script>
<script src="{{"app-assets/assets/plugins/d3/d3.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/c3-master/c3.min.js"}}"></script>
<!-- Chart JS -->
{{--<script src="{{"app-assets/js/dashboard1.js"}}"></script>--}}
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js"}}"></script>
#stack('script')
</body>
</html>
Blade file
#extends('layouts.master')
#section('content')
#push('links')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
#endpush
<div class="row">
<div class="col-md-12 ">
<div class="panel panel-default">
<div class="panel-heading">Full Calendar Example</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
</div>
</div>
</div>
</div>
#push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}
#endpush
#endsection
My web app with AngularJS 1.7.8, jQuery 3.3.1, Bootstrap 4.3.1 and some others CSS- and JS-libraries/frameworks worked without any problems last week.
But today, I see a wrong visualization of appending buttons.
Steps to reproduce:
Go to openskymap.org to see my demo app.
Open (click) the menu item "Calendar" to proceed out to the Calendar Page.
Here check the proper visualization of the Button with the ID 'dateRangePicker1GlyphButton1'.
See:
enter image description here
Issue:
The button isn't appended on the input field of daterangepicker. But last week the button was appended correctly. Also the glyphiconis is now white (last week black).
Desired behavior like this:
enter image description here
appended Button
black glyph icon
The code snippet:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<!-- define angular app -->
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng-app="sensorsApp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" /> <!-- HTML5 HTTP-Header -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- HTML4 HTTP-Header -->
<meta http-equiv="content-type" content="text/css; charset=utf-8" />
<meta http-equiv="content-type" content="text/javascript; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- USED CSS: GENERAL (1/2) -->
<!-- > GENERAL: CUSTOM PROJECT STYLES -->
<link rel="stylesheet" type="text/css" href="styles/project.css">
<!-- USED CSS: BOOTSTRAP -->
<!-- > BOOTSTRAP FONT LIBS: -->
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78= sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr sha512-3M00D/rn8n+2ZVXBO9Hib0GKNpkm8MSUU/e2VNthDyBYxKWG+BftNYYcuEjXlyrSO637tidzMBXfE7sQm0INUg==" crossorigin="anonymous">
<!-- > BOOTSTRAP 4: -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY= sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T sha512-tDXPcamuZsWWd6OsKFyH6nAqh/MjZ/5Yk88T5o+aMfygqNFPan1pLyPFAndRzmOWHKT+jSDzWpJv8krj6x1LMA==" crossorigin="anonymous">
<!-- USED CSS: GENERAL (2/2) -->
<!-- > GENERAL: BOOTSTRAP DATE(TIME)PICKER -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" integrity="sha256-5Z/4A9O2iG86Ca27OwgMwLmRYt9bjLOoEpPXy7yhiSs= sha384-8wYGNo4TwC9xzqNRdt7OUN789eBPzNQlO/sxIKaJR1gkX0+Ok1kXxhHR4pZU+gP2 sha512-Dapa+NBx6nVgt1Q5L+vn8oXI+bcHD9qpWmWNlkqAIlzz6cpwb6IsEthpkmV455sUDs2FXAZKyNz4hY1Dl0xGyg==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" integrity="sha256-7B9s/BwXySAt0TMN6/mo6NCBm8oCfFNqaeJlz/9FCpE= sha384-3J4adb6KqO9u+ZgVfdmUqKDG4qWyG2qxGdXYoCXh3YmBQURWveIDgFh22pw1E3a9 sha512-gjpWBCm7COvj1rB4CrNkBAV+Uoxivp/2LPKpZkKcnFS4dDGhQtxdNgn4b8hLltoEVHu7LktbSf8dH8Igm/vi6A==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/datepickk#1.4.1/dist/datepickk.min.css" integrity="sha256-8pYhYq1SmTPr+/nu2genJ7ko5oPwyiY3TJN0UAAZGQw= sha384-M2Romq884NkvgBkdz3NdXBwgPBO8cCs0keFrHmCWoNQ+tJYBpktQErbvcD7gKXae sha512-zFB5O2YjVX9hdpLmz13ClhpHkX1MWNjuyfFlIiGUR9ziBrSvcpp4hx+qfpBZFsVHPHfMg1HFbC8E5uDf9Fd6HA==" crossorigin="anonymous">
<!-- > GENERAL: BOOTSTRAP CHARTS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E= sha384-q9MZ/PQCC1nIFQdrr9yNOFXeSaXjv/yPOJOdBd32aODh8+EM6udfo91a6mRbEDih sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" integrity="sha256-VSBoWx3wZz4Z6YAMGq1toMWvJN3G1w7KH+b61PGwppA= sha384-WxBbLYERKrFMTQ9LAaSYPo5qW9PJSzV6pbbaX8PqD20S4yudCgwblvRmuhXU6iWD sha512-vltzTDeCDN3MBaISvgsAAv6vJfbJkhjTokn/UttmEVCo0UEOsm7yhgqWJ3n0d5Wz/Fl8ZZSdLyyn7YGGbGwNYg==" crossorigin="anonymous">
<!-- USED SCRIPTS: GENERAL (1/2) -->
<!-- > GENERAL: Needed polyfills for working Luxon with supporting IE 10 or 11 -->
<script type="text/javascript" src="https://polyfill.io/v3/polyfill.js?features=default,es5,es6,es7,String.prototype.repeat,Array.prototype.find,Array.prototype.findIndex,Math.trunc,Math.sign&flags=gated" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: jQuery 3 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8= sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha256-jDnOKIOq2KNsQZTcBTEnsp76FnfMEttF6AV2DF2fFNE= sha384-hKAOvu4SRkR5UhOl+rvozhqPNh0VgjTz0sydNTzye3vkV6VzpbLACSgthC2bhXeV sha512-CEiA+78TpP9KAIPzqBvxUv8hy41jyI3f2uHi7DGp/Y/Ka973qgSdybNegWFciqh6GrN2UePx2KkflnQUbUhNIA==" crossorigin="anonymous" charset="UTF-8"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<div class="container justify-content-md-center justify-content-center">
<form id="dateTimeRangeSelectionForm1" class="form-group" role="form">
<div class="form-group">
<div class="col-sm">
<div class="row">
<div class="row">
<label class="form-control-label">Selected date/time range:</label>
</div>
<div class="input-group date row">
<input type="daterange" id="dateRangePicker1" name="dateRangePicker1" class="form-control" ng-model="dateRangePicker1"></input>
<div class="input-group-append" data-target="#dateRangePicker1">
<button type="button" id="dateRangePicker1GlyphButton1" class="input-group-text form-control btn" role="button"><i class="fas fa-calendar"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- USED SCRIPTS: BOOTSTRAP -->
<!-- > BOOTSTRAP GENERAL: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha256-ZvOgfh+ptkpoa2Y4HkRY28ir89u/+VRyDE7sB7hEEcI= sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 sha512-5WvZa4N7Jq3TVNCp4rjcBMlc6pT3lZ7gVxjtI6IkKW+uItSa+rFgtFljvZnCxQGj8SUX5DHraKE6Mn/4smK1Cg==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > BOOTSTRAP 4: -->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s= sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM sha512-Ah5hWYPzDsVHf9i2EejFBFrG2ZAPmpu4ZJtW4MfSgpZacn+M9QHDt+Hd/wL1tEkk1UgbzqepJr6KnhZjFKB+0A==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- USED SCRIPTS: ANGULARJS1 -->
<!-- AngularJS 1: -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js" integrity="sha256-23hi0Ag650tclABdGCdMNSjxvikytyQ44vYGo9HyOrU= sha384-TBbVc3SDLcWU5RloNEsoiDVvRK9iYkBNMm1OsAcOIVEASb7zzMWB0aMobj6CzKUw sha512-28WMav3WUIziq1D5l+8y2BrzN+CJgEeIyLksiKOSHWofTgaZc3RMPzvleRhXbLwnzf/C7Xnb0W6pE8PlqeRSog==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.js" integrity="sha256-AL1+LnGW9wl5bbvR2aXuGAmYsPKLYHzFbeRyHvPUHw8= sha384-I+qxwVtb8G6V2DkR4JZQBtMe7WBcZkOhEoYoYcvePXVXyQGJDRmZ5vYNRoavfaJ6 sha512-lkwD93i2YxHwDdR41e/MhAl2nm68FsG3x6MdIkmcDaNu8gTgvwyxMxHEiP11fyD9+lpgnUSnPC//NwhAYPS58g==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js" integrity="sha256-fe1CNxJdqcp2+X9H3Sd0yqtxOv0cyK9DN52g+NhnBgQ= sha384-I3+wmR2cuftFax1/khkYCw2l/24RBOm7dRvcOCGUesC9HveXuL9Gt2QI82rmENt6 sha512-Qxi9FQdJbTxZaVDSVzShM6J67oXjN6MEZ8nn5Fl83fdd9dxsZqX6yDJspSjeKK6Q12FOx6DIQd8l/fe9h1r0ng==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.1/angular-translate.min.js" integrity="sha256-aOs2ICGLk6gC0UX7UDhvXn/gvsa2qx5bUipyQFKmoOs= sha384-A+zN6Osqnkp8ThR1gJEJ4/dVw2Zwfz0llOo7BnyciCz1isb6OENEo8xfHx1gTWLX sha512-U5WInQAQvpR1C+dLWjcpVygbeof6FylSTlLbUC6eQml4iiEKcNhtPi0GSLCNRIcycohEV5IjfU/HPNHx+lI+Dw==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- USED SCRIPTS: GENERAL (2/2) -->
<!-- > GENERAL: ANGULARJS CONTROLLER -->
<script type="text/javascript" src="dist/controller.js" charset="UTF-8"></script>
<!-- > GENERAL: MOMENT.JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo= sha384-5wvDEKtdpg/AAUpUHtcjYKVs1qv2V/UFPCN2FNvgePyaKmpBjW+LrboDEuS5ssBe sha512-hlLgIh4nncb2yc4YPtWk5wOykcFxF0fBd5rHfJ6xsALI2khY3H8LbivswJE5Fpz7hws7CJCqOzdyjWHiKJYl+A==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js" integrity="sha256-15jnh2lee6Li94j6XCbw8PRzNZe29O/W9i97yXVyRmA= sha384-bnidgWGLxxEZXPx1eX9mXLAvpkXkRL3iQbkgEksVnj5tlsiymxadIxiM7q5a88Ji sha512-27vEz6bCFnYQ6tNjguaA5DK5TOGme/fdDxbEtuZxydpx4JLDaoO5ujAYO658OCrzcpELwhhaPI3fX6D71YV1qQ==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon#1.12.0/build/global/luxon.min.js" integrity="sha256-o1YsUhC0RuYMR+8b0zu9vjUuJa+pnS/8rB87wcyImTM= sha384-5Wo6YmI/Cgvh/Y576jEIIhWu6IvSt5wovJxutq18DkJwbHgVBrv1PIIpUFBTxI5D sha512-9j0Zy2i7ac00T3D+W6J3bHXp5S4ak5fF84Fyejc0S5D579pdNtEvBRc3DPxd0Amv31c5UcKz9EKgZXNpPDncqw==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">luxon.DateTime.local();</script>
<!-- > GENERAL: BOOTSTRAP DATE(TIME)PICKER -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js" integrity="sha256-jgMYw0Xf+iO0EYC4pnX8tS4vmDqyjtJ9dwfSMMjSZuY= sha384-hzexvprs0k2Q/IHSJOfegsjdg6kTcTTVxQdgHiB4+I/915hcvse9v42LLVVM5K4e sha512-9LUemrpP5JutDNVlv4gUnNWwZXm2+vdv5hVyBs5Jv9ps7L8rfM7s3XvZpWQZ8J24NtoFObTsTyVMHb1yt3daHQ==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" integrity="sha256-dsMvvkha4U8Hflt7QUPXZAKLwT/BObq7M5j5AZYnmDs= sha384-2Tnqs3x0ucZkxYqJ3UX1R/fkSRkMaDsdYWsUNc0hZVikDXRHamRor+AsNJ7Pi2DA sha512-q0z6v3s4gfltHTrrMhgvsG375RfT18n+jUtUT3vOBi0PUloPA4x/NEM2zp3U0dahP4YJCfP7tAlYtOYkZv7OZw==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-bs-daterangepicker/0.0.6/ng-bs-daterangepicker.min.js" integrity="sha256-gNo6MkJKhDMe/rKguZNSceihaZgV8qAmZq596TO0C2k= sha384-ssqNv6IP0gFZMqGCBXIchUj1hU+KtaR73qoM+4dwDrIcUFbfIsCiVHkrhF36C3yu sha512-At2HC9GDwT75iMnbAmHMeVa1FTf9vWd8jRo1iYrssIxXv7LJSfa+DPeIW9RqpQmzT+bxR2gW5cwikKMYDp0c5w==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/datepickk#1.4.1/dist/datepickk.min.js" integrity="sha256-a3ivkpG9FQ9r9MBj0CPQRgvomhFvEo6Q3hn3c/Uqj80= sha384-RS/z/Fj3PBS/SEuZRm4W4kj0lDIHAtywamV0X74KJkilLA6fL5AqECMIkjYA0Am7 sha512-7izfFFemCc9W6mAIb6pOFEysnmTe+0hTNAMXSaxGpJw7754ugRjw7fEDUJJjCwTpY//2wDvj7rJvetBSg8AdeQ==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: CHARTS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw= sha384-QzN1ywg2QLsf72ZkgRHgjkB/cfI4Dqjg6RJYQUqH6Wm8qp/MvmEYn+2NBsLnhLkr sha512-mf78KukU/a8rjr7aBRvCa2Vwg/q0tUjJhLtcK53PHEbFwCEqQ5durlzvVTgQgKpv+fyNMT6ZQT1Aq6tpNqf1mg==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js" integrity="sha256-RyKFOSKnuKFSYAyJlfeHdb8ljBAbLJOSh9Bz8pzhhkY= sha384-4l+KiSAWnxbgZLQwQow7VtknwS81RATqH0tAE4Yh8jjquAE9F+k81s2aZojpuox7 sha512-v3qBtRIcm5Ew3PcKHPvjBB7QFkm1XQ4WequO37YZe2IT0hRj+kdA/vtOMvb5/UrlVx1HMkV/dqA+Ka9POz6sVA==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: CUSTOM PROJECT SCRIPTS -->
<script type="text/javascript" src="dist/project.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
// Disable automatic style injection:
Chart.platform.disableCSSInjection = true;
console.clear();
</script>
</body>
</html>
Well,
seems you import a library that override the bootstrap behavior.
Remove the mdb library and check again.
You mixed 2 different UI libraries.
there is the official bootstrap theme, that is the one you use for the input & button.
And there is the MDB that stand for the material design bootstrap.
You can not use both,you have to make a choice which library to use then go with it without mixing.
Hope I've helped
<?xml version="1.0" encoding="UTF-8"?>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng-app="sensorsApp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" /> <!-- HTML5 HTTP-Header -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- HTML4 HTTP-Header -->
<meta http-equiv="content-type" content="text/css; charset=utf-8" />
<meta http-equiv="content-type" content="text/javascript; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- USED CSS: GENERAL (1/2) -->
<!-- > GENERAL: CUSTOM PROJECT STYLES -->
<link rel="stylesheet" type="text/css" href="styles/project.css">
<!-- USED CSS: BOOTSTRAP -->
<!-- > BOOTSTRAP FONT LIBS: -->
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78= sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr sha512-3M00D/rn8n+2ZVXBO9Hib0GKNpkm8MSUU/e2VNthDyBYxKWG+BftNYYcuEjXlyrSO637tidzMBXfE7sQm0INUg==" crossorigin="anonymous">
<!-- > BOOTSTRAP 4: -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY= sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T sha512-tDXPcamuZsWWd6OsKFyH6nAqh/MjZ/5Yk88T5o+aMfygqNFPan1pLyPFAndRzmOWHKT+jSDzWpJv8krj6x1LMA==" crossorigin="anonymous">
<!-- USED CSS: GENERAL (2/2) -->
<!-- > GENERAL: BOOTSTRAP DATE(TIME)PICKER -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" integrity="sha256-5Z/4A9O2iG86Ca27OwgMwLmRYt9bjLOoEpPXy7yhiSs= sha384-8wYGNo4TwC9xzqNRdt7OUN789eBPzNQlO/sxIKaJR1gkX0+Ok1kXxhHR4pZU+gP2 sha512-Dapa+NBx6nVgt1Q5L+vn8oXI+bcHD9qpWmWNlkqAIlzz6cpwb6IsEthpkmV455sUDs2FXAZKyNz4hY1Dl0xGyg==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" integrity="sha256-7B9s/BwXySAt0TMN6/mo6NCBm8oCfFNqaeJlz/9FCpE= sha384-3J4adb6KqO9u+ZgVfdmUqKDG4qWyG2qxGdXYoCXh3YmBQURWveIDgFh22pw1E3a9 sha512-gjpWBCm7COvj1rB4CrNkBAV+Uoxivp/2LPKpZkKcnFS4dDGhQtxdNgn4b8hLltoEVHu7LktbSf8dH8Igm/vi6A==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/datepickk#1.4.1/dist/datepickk.min.css" integrity="sha256-8pYhYq1SmTPr+/nu2genJ7ko5oPwyiY3TJN0UAAZGQw= sha384-M2Romq884NkvgBkdz3NdXBwgPBO8cCs0keFrHmCWoNQ+tJYBpktQErbvcD7gKXae sha512-zFB5O2YjVX9hdpLmz13ClhpHkX1MWNjuyfFlIiGUR9ziBrSvcpp4hx+qfpBZFsVHPHfMg1HFbC8E5uDf9Fd6HA==" crossorigin="anonymous">
<!-- > GENERAL: BOOTSTRAP CHARTS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E= sha384-q9MZ/PQCC1nIFQdrr9yNOFXeSaXjv/yPOJOdBd32aODh8+EM6udfo91a6mRbEDih sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" integrity="sha256-VSBoWx3wZz4Z6YAMGq1toMWvJN3G1w7KH+b61PGwppA= sha384-WxBbLYERKrFMTQ9LAaSYPo5qW9PJSzV6pbbaX8PqD20S4yudCgwblvRmuhXU6iWD sha512-vltzTDeCDN3MBaISvgsAAv6vJfbJkhjTokn/UttmEVCo0UEOsm7yhgqWJ3n0d5Wz/Fl8ZZSdLyyn7YGGbGwNYg==" crossorigin="anonymous">
-->
<!-- USED SCRIPTS: GENERAL (1/2) -->
<!-- > GENERAL: Needed polyfills for working Luxon with supporting IE 10 or 11 -->
<script type="text/javascript" src="https://polyfill.io/v3/polyfill.js?features=default,es5,es6,es7,String.prototype.repeat,Array.prototype.find,Array.prototype.findIndex,Math.trunc,Math.sign&flags=gated" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: jQuery 3 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8= sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha256-jDnOKIOq2KNsQZTcBTEnsp76FnfMEttF6AV2DF2fFNE= sha384-hKAOvu4SRkR5UhOl+rvozhqPNh0VgjTz0sydNTzye3vkV6VzpbLACSgthC2bhXeV sha512-CEiA+78TpP9KAIPzqBvxUv8hy41jyI3f2uHi7DGp/Y/Ka973qgSdybNegWFciqh6GrN2UePx2KkflnQUbUhNIA==" crossorigin="anonymous" charset="UTF-8"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<div class="container justify-content-md-center justify-content-center">
<form id="dateTimeRangeSelectionForm1" class="form-group" role="form">
<div class="form-group">
<div class="col-sm">
<div class="row">
<div class="row">
<label class="form-control-label">Selected date/time range:</label>
</div>
<div class="input-group date row">
<input type="daterange" id="dateRangePicker1" name="dateRangePicker1" class="form-control" ng-model="dateRangePicker1"></input>
<div class="input-group-append" data-target="#dateRangePicker1">
<button type="button" id="dateRangePicker1GlyphButton1" class="btn btn-outline-secondary" role="button"><i class="fas fa-calendar"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- USED SCRIPTS: BOOTSTRAP -->
<!-- > BOOTSTRAP GENERAL: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha256-ZvOgfh+ptkpoa2Y4HkRY28ir89u/+VRyDE7sB7hEEcI= sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 sha512-5WvZa4N7Jq3TVNCp4rjcBMlc6pT3lZ7gVxjtI6IkKW+uItSa+rFgtFljvZnCxQGj8SUX5DHraKE6Mn/4smK1Cg==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > BOOTSTRAP 4: -->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s= sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM sha512-Ah5hWYPzDsVHf9i2EejFBFrG2ZAPmpu4ZJtW4MfSgpZacn+M9QHDt+Hd/wL1tEkk1UgbzqepJr6KnhZjFKB+0A==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- USED SCRIPTS: ANGULARJS1 -->
<!-- AngularJS 1: -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js" integrity="sha256-23hi0Ag650tclABdGCdMNSjxvikytyQ44vYGo9HyOrU= sha384-TBbVc3SDLcWU5RloNEsoiDVvRK9iYkBNMm1OsAcOIVEASb7zzMWB0aMobj6CzKUw sha512-28WMav3WUIziq1D5l+8y2BrzN+CJgEeIyLksiKOSHWofTgaZc3RMPzvleRhXbLwnzf/C7Xnb0W6pE8PlqeRSog==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.js" integrity="sha256-AL1+LnGW9wl5bbvR2aXuGAmYsPKLYHzFbeRyHvPUHw8= sha384-I+qxwVtb8G6V2DkR4JZQBtMe7WBcZkOhEoYoYcvePXVXyQGJDRmZ5vYNRoavfaJ6 sha512-lkwD93i2YxHwDdR41e/MhAl2nm68FsG3x6MdIkmcDaNu8gTgvwyxMxHEiP11fyD9+lpgnUSnPC//NwhAYPS58g==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js" integrity="sha256-fe1CNxJdqcp2+X9H3Sd0yqtxOv0cyK9DN52g+NhnBgQ= sha384-I3+wmR2cuftFax1/khkYCw2l/24RBOm7dRvcOCGUesC9HveXuL9Gt2QI82rmENt6 sha512-Qxi9FQdJbTxZaVDSVzShM6J67oXjN6MEZ8nn5Fl83fdd9dxsZqX6yDJspSjeKK6Q12FOx6DIQd8l/fe9h1r0ng==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.1/angular-translate.min.js" integrity="sha256-aOs2ICGLk6gC0UX7UDhvXn/gvsa2qx5bUipyQFKmoOs= sha384-A+zN6Osqnkp8ThR1gJEJ4/dVw2Zwfz0llOo7BnyciCz1isb6OENEo8xfHx1gTWLX sha512-U5WInQAQvpR1C+dLWjcpVygbeof6FylSTlLbUC6eQml4iiEKcNhtPi0GSLCNRIcycohEV5IjfU/HPNHx+lI+Dw==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- USED SCRIPTS: GENERAL (2/2) -->
<!-- > GENERAL: ANGULARJS CONTROLLER -->
<script type="text/javascript" src="dist/controller.js" charset="UTF-8"></script>
<!-- > GENERAL: MOMENT.JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo= sha384-5wvDEKtdpg/AAUpUHtcjYKVs1qv2V/UFPCN2FNvgePyaKmpBjW+LrboDEuS5ssBe sha512-hlLgIh4nncb2yc4YPtWk5wOykcFxF0fBd5rHfJ6xsALI2khY3H8LbivswJE5Fpz7hws7CJCqOzdyjWHiKJYl+A==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js" integrity="sha256-15jnh2lee6Li94j6XCbw8PRzNZe29O/W9i97yXVyRmA= sha384-bnidgWGLxxEZXPx1eX9mXLAvpkXkRL3iQbkgEksVnj5tlsiymxadIxiM7q5a88Ji sha512-27vEz6bCFnYQ6tNjguaA5DK5TOGme/fdDxbEtuZxydpx4JLDaoO5ujAYO658OCrzcpELwhhaPI3fX6D71YV1qQ==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon#1.12.0/build/global/luxon.min.js" integrity="sha256-o1YsUhC0RuYMR+8b0zu9vjUuJa+pnS/8rB87wcyImTM= sha384-5Wo6YmI/Cgvh/Y576jEIIhWu6IvSt5wovJxutq18DkJwbHgVBrv1PIIpUFBTxI5D sha512-9j0Zy2i7ac00T3D+W6J3bHXp5S4ak5fF84Fyejc0S5D579pdNtEvBRc3DPxd0Amv31c5UcKz9EKgZXNpPDncqw==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">luxon.DateTime.local();</script>
<!-- > GENERAL: BOOTSTRAP DATE(TIME)PICKER -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js" integrity="sha256-jgMYw0Xf+iO0EYC4pnX8tS4vmDqyjtJ9dwfSMMjSZuY= sha384-hzexvprs0k2Q/IHSJOfegsjdg6kTcTTVxQdgHiB4+I/915hcvse9v42LLVVM5K4e sha512-9LUemrpP5JutDNVlv4gUnNWwZXm2+vdv5hVyBs5Jv9ps7L8rfM7s3XvZpWQZ8J24NtoFObTsTyVMHb1yt3daHQ==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" integrity="sha256-dsMvvkha4U8Hflt7QUPXZAKLwT/BObq7M5j5AZYnmDs= sha384-2Tnqs3x0ucZkxYqJ3UX1R/fkSRkMaDsdYWsUNc0hZVikDXRHamRor+AsNJ7Pi2DA sha512-q0z6v3s4gfltHTrrMhgvsG375RfT18n+jUtUT3vOBi0PUloPA4x/NEM2zp3U0dahP4YJCfP7tAlYtOYkZv7OZw==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-bs-daterangepicker/0.0.6/ng-bs-daterangepicker.min.js" integrity="sha256-gNo6MkJKhDMe/rKguZNSceihaZgV8qAmZq596TO0C2k= sha384-ssqNv6IP0gFZMqGCBXIchUj1hU+KtaR73qoM+4dwDrIcUFbfIsCiVHkrhF36C3yu sha512-At2HC9GDwT75iMnbAmHMeVa1FTf9vWd8jRo1iYrssIxXv7LJSfa+DPeIW9RqpQmzT+bxR2gW5cwikKMYDp0c5w==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/datepickk#1.4.1/dist/datepickk.min.js" integrity="sha256-a3ivkpG9FQ9r9MBj0CPQRgvomhFvEo6Q3hn3c/Uqj80= sha384-RS/z/Fj3PBS/SEuZRm4W4kj0lDIHAtywamV0X74KJkilLA6fL5AqECMIkjYA0Am7 sha512-7izfFFemCc9W6mAIb6pOFEysnmTe+0hTNAMXSaxGpJw7754ugRjw7fEDUJJjCwTpY//2wDvj7rJvetBSg8AdeQ==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: CHARTS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw= sha384-QzN1ywg2QLsf72ZkgRHgjkB/cfI4Dqjg6RJYQUqH6Wm8qp/MvmEYn+2NBsLnhLkr sha512-mf78KukU/a8rjr7aBRvCa2Vwg/q0tUjJhLtcK53PHEbFwCEqQ5durlzvVTgQgKpv+fyNMT6ZQT1Aq6tpNqf1mg==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js" integrity="sha256-RyKFOSKnuKFSYAyJlfeHdb8ljBAbLJOSh9Bz8pzhhkY= sha384-4l+KiSAWnxbgZLQwQow7VtknwS81RATqH0tAE4Yh8jjquAE9F+k81s2aZojpuox7 sha512-v3qBtRIcm5Ew3PcKHPvjBB7QFkm1XQ4WequO37YZe2IT0hRj+kdA/vtOMvb5/UrlVx1HMkV/dqA+Ka9POz6sVA==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: CUSTOM PROJECT SCRIPTS -->
<script type="text/javascript" src="dist/project.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
// Disable automatic style injection:
Chart.platform.disableCSSInjection = true;
console.clear();
</script>
</body>
</html>