I've been working with a code and it's all fine, but I cant change the data format. Also, when I deleted the " $('#reservationdate').datetimepicker({" code
it still works and it shouldn't, so I don't know where to start. I'm using the same example in adminLTE with no help.
What I'm getting: "08/21/2020 4:32 PM"
when i send the $_POST i'm getting "\/" between the dates:
08\/26\/2020 5:20 PM
What I want: "21/08/2020"
Extra: I'm using links in href for datetimepicker because I couldn't find the link rel or the script location in the "pages/forms/advance.html" file.
Header:
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="css/adminlte.min.css">
<link rel="stylesheet" href="css/sweetalert2.min.css">
<link rel="stylesheet" href="css/admin.css">
<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Bootstrap Color Picker -->
<link rel="stylesheet" href="plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
<!-- Tempusdominus Bbootstrap 4 -->
<link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<!-- Bootstrap4 Duallistbox -->
<link rel="stylesheet" href="plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
Footer:
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<!-- AdminLTE App -->
<script src="js/adminlte.min.js"></script>
<!-- Select2 -->
<script src="plugins/select2/js/select2.full.min.js"></script>
<!-- Bootstrap4 Duallistbox -->
<script src="plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<!-- InputMask -->
<script src="plugins/moment/moment.min.js"></script>
<script src="plugins/inputmask/min/jquery.inputmask.bundle.min.js"></script>
<!-- date-range-picker -->
<script src="plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Bootstrap Switch -->
<script src="plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
app.js: (Even if i delete this code it will work)
$('#reservationdate').datetimepicker({
format: 'dd/mm/yyyy'
});
The problem was in the class of the input, because it was "datetimepicker", but it had to be "datepicker" or "timepicker". From that point I could change the format.
How it was:
<input type="date" class="form-control datetimepicker-input" data-target="#reservationdate" name="fecha_evento"/>
How it wa resolved:
<input type="date" class="form-control datepicker-input" data-target="#reservationdate" name="fecha_evento"/>
pd. The libraries didn't got problems as they showed to be compatible.
Maybe mm mean minute?
You can try using MM/YYYY?
Related
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>
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"
],
I have imported scripts in the following order. Still I am getting error Uncaught TypeError: $(...).highcharts is not a function. Please help guys. Thanks in advance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Bootstrap core CSS -->
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="http://localhost/SendStation/resources/assets/css/admin.css">
<script type="text/javascript">
$(function() {
$('#chart1').highcharts({
//chart values
});
});
</script>
I'm trying to append some options on the Silvio Moreto's Bootstrap select picker.
When I try to update it after the append, jquery throws this error:
Uncaught TypeError: $(...).selectpicker is not a function
I've read around that It's because select picker is not fully initialized, but if I go to my heading partial, the select picker js and css is included way before the function that tries to update it.
I've also read that this should be done inside a $(function(){}); block. But since the file that is performing the operation is a plain functions file that is called inside a $(function(){}); block the problem shouldn't present.
This is my heading file:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GMS</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<link rel="stylesheet" href="{{url('css/general.css')}}">
<link rel="stylesheet" href="{{url('css/modal.css')}}">
<link rel="stylesheet" href="{{url('css/status_page.css')}}">
<link rel="stylesheet" href="{{url('css/dropdowns.css')}}">
<link rel="stylesheet" href="{{url('css/animator.css')}}">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- Bootstrap select with live src -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<!--
|-----------------------------------
| Custom CSS
|-----------------------------------
-->
#section('css')#show
<!--
|-----------------------------------
| Custom JS
|-----------------------------------
-->
<script src="{{url('js/general.js')}}"></script>
<script src="{{url('js/functions/functions.js')}}"></script>
<script src="{{url('js/functions/animator.js')}}"></script>
<script src="{{url('js/app/gms.js')}}"></script>
<script src="{{url('js/app/controllers/auth_controller.js')}}"></script>
<script src="{{url('js/app/controllers/redirect_controller.js')}}"></script>
<script src="{{url('js/app/controllers/changelog_controller.js')}}"></script>
<script src="{{url('js/app/factories/changelog_factory.js')}}"></script>
#section('js')#show
This is the function that performs the changes in the select:
function fillContracts(contracts) {
for(var i = 0; i < contracts.length; i++)
{
console.log('Iterating');
console.log('Contract ID: ' + contracts[i].id);
console.log('Contract TITLE: ' + contracts[i].titolo);
$('#selectpicker').html('<option>Test1</option><option>Test2</option>').selectpicker('refresh');
}
console.log('Done');
}
The file containing this function is injected in the heading using Blade. The Laravel's template engine. When I check the page source, it's correctly included after the select picker.
If it might help, the data that I try to append comes from a AJAX call. But I can't figure out what's wrong...
Thanks for any help!
Update
I'm still trying to figure out what's wrong. The problem is that I keep getting the error when I try to use the selectpicker plugin. But I can't understand what's missing...
Bootstrap CSS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Jquery:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
Bootstrap-select.min.css
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
And the bootstrap-select.min.js:
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
how i was able to solve it is by putting
Bootsrap select.js as the last script inclusion
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
if it continues to give you issue.
avoid selectpicker(refresh) and populate select box by javascript means
<script>
document.getElementById("selectboxID").innerHTML = '<option>Test1</option><option>Test2</option>';
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>