jQuery failed on calling "Slider" function - javascript

I want to create a slider in a html file with this bootstrap api, but it keeps showing `jquery-3.1.1.slim.min.js:2 jQuery.Deferred exception: $(...).Slider is not a function TypeError:
$(...).Slider is not a function
at HTMLDocument.<anonymous> (file:///Users/apple/Desktop/pjt/index.html:35:18)
at j (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30164)
at k (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30478) undefined
r.Deferred.exceptionHook # jquery-3.1.1.slim.min.js:2
k # jquery-3.1.1.slim.min.js:2
jquery-3.1.1.slim.min.js:2 Uncaught TypeError: $(...).Slider is not a function
at HTMLDocument.<anonymous> (index.html:35)
at j (jquery-3.1.1.slim.min.js:2)
at k (jquery-3.1.1.slim.min.js:2)`
I downloaded both js and css files from here.
this is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$("#ex6").Slider(); // I also tried .slider()
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
I also tried to use CDN to replace the local js and css but nothing changes


Like a slider documentation -- You have 2 ways to use it
var mySlider = new Slider('#ex6');
OR
$('#ex6').slider();
Working example using .slider
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$('#ex6').slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
working example using var myslider = new Slider('#ex6')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
var mySlider = new Slider('#ex6');
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
Note: On my examples I used slider CDN so if your code
not working with your css , js paths you can use CDN instead or check
your paths


Alright, I apologize for not writing my question clearly, so the issue is not from the html file, but from the framework that I am working on.
Since I was using electron, if you just load the html code, the application can not recognize the js files in the html unless you add the following code before and after your scripts.
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/vendor.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
Here's the source of the solution on this issue


Write slider instead of Slider
$("#ex6").slider();
And make sure the bootstrap-slider.js file is placed in assets/js/ folder

Related

Uncaught TypeError: $(...).modal is not a function, can't manage proper order [duplicate]

This question already has answers here:
TypeError: $(...).modal is not a function with bootstrap Modal
(14 answers)
Closed 1 year ago.
Possibly I did wrong script order,I am trying make a dynamic pop up modal, which will fetch data on click. my scripts are :
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome Intigration -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/responsive.css')}}">
<link rel="stylesheet" href="{{asset('css/fundraisers.css')}}">
<!-- <link rel="stylesheet" href="{{asset('css/support.css')}}"> -->
#yield('head-script')
<!-- must include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
{{-- for sweetalert2 --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"
integrity="sha512-
AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script type="text/javascript" src="{{asset('js/languageChange.js')}}"></script>
<script src="{{ asset('js/share.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<title>Mortfund</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-
iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap"
rel="stylesheet">
Laravel Body tag goes here ------
<script src="{{ url('js/authentication.js') }}"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js">
</script>
<script src="{{asset('js/script.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js">
</script>
<script src="{{asset('js/jquery.countup.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<script>
I excluded html and body tags to reduce the amount of code, which is not good for a posting in stack overflow. If you have any question please ask me.

Because you loaded JQuery thrice :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You need to load JQuery once in a page, If you loaded JQuery more than once then you will face error, Why do I need to load jquery twice

CSS Bootstrap 4 class with 'input-group-append' isn't correctly working. Last week the display of Styles are right

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>

AngularJs facebook like mention: how to start mention suggestions without the trigger character e.g. '#'

I am using a third party library mento.io Github for achieving my requirements.
This library is good enough to show suggestion after a specific character but my requirement is that user should get suggestions as soon as it starts typing like IntelliSense on some editor.
Problem
How to start the suggestion when an user hits any character. Right now its only working with # symbol
// Code goes here
var app = angular.module('app', ['mentio']);
app.controller('ctrl', function ($scope) {
$scope.people = [
{ label: 'Joe' },
{ label: 'Mike' },
{ label: 'Diane' }
]
$scope.myval = '';
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://jeff-collins.github.io/ment.io/dist/mentio.js"></script>
<script src="script.js"></script>
</head>
<body><div ng-app="app" ng-controller='ctrl'>
<input type="text" mentio id="test" mentio-id="'test'" mentio-typed-text="typedTerm" mentio-trigger-char="'#'" mentio-items="people"
ng-model="myval" />
</div>
</body>
</html>

If you need to figure this out with mentio.io lib, take a look at this pull request:
https://github.com/jeff-collins/ment.io/pull/94
I was faced the same problem using mento.io and just changed framework: https://leaverou.github.io/awesomplete

mentio-trigger-char="''" seems to work, seems a little bit akward for me but it works
// Code goes here
var app = angular.module('app', ['mentio']);
app.controller('ctrl', function ($scope) {
$scope.people = [
{ label: 'Joe' },
{ label: 'Mike' },
{ label: 'Diane' }
]
$scope.myval = '';
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://jeff-collins.github.io/ment.io/dist/mentio.js"></script>
<script src="script.js"></script>
</head>
<body><div ng-app="app" ng-controller='ctrl'>
<input type="text" mentio id="test" mentio-id="'test'" mentio-typed-text="typedTerm" mentio-trigger-char="''" mentio-items="people"
ng-model="myval" />
</div>
</body>
</html>

Owl carousel non existant

Ive tried a number of ways of re-aranging my code in my js files, re-aranging by scripts and a number of other things that I found on here, but unfortunately it still isnt working. I have no clue what to do anymore.
<!DOCTYPE html>
<html lang="en"> <
head><title> Audi Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Slider
================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script tyupe="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
<body>
<!-- Loader -->
<!-- Navigation
==============================-->
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<img src="img/audi-logo3.jpg" class="img-responsive pull-right" style="margin- right: 15px">
<div clas="collapse navbar-collapse">
<div class="nav-container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left" style="margin-top: 10px;">
<li>Home</li>
<li> Models</li>
<li>Owners & Customers </li>
<li>Shopping Tools</li>
<li>Global Inovation</li>
</ul>
</div>
</div>
</nav>
</div>
</nav>
<section style="margin-top: 85px;">
<div class="owl-carousel">
<div>
<img src="img/audi-r8.jpg">
</div>
<div>
<img src="img/audi-s8.jpg">
</div>
</div>
</section>
<!-- Script -->
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
My JS
(function(){
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
})

Remove the script tags from the head section, as they are already at the bottom of your body tag.
The problem is caused by the order you used there. If you need to use a library in your own code, you must declare that library first. That was not the case in your head section. It should be ok with what you have at the bottom of your body section.
Also, I don't see any script tag for jQuery, but you are using it. You need to include that first:
Just before </body>:
<!-- This script is hosted on a CDN, but you could host it too -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

First, I noticed a typo
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
THIS ONE --> <script **tyupe**="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
Also, I see that you are script loading the same 2 scripts at the bottom of your HTML, but the non minified versions. You should delete what is not being used, and fix that typo.
If you would of HTML validate/check your files, you would of found that typo error. Might be worth doing as there may be other simple errors.
Do you need to load a jQuery file? Make sure it's loaded before your javascript files

Can't implement JavaScript flip counter

I want to implement javascript flip counter. I included all needed files and added code as in this article - http://cnanney.com/journal/code/apple-style-counter-revisited/#demo.
I added html in my page:
<div id="counter" class="flip-counter"></div>
and added javscript to my application.js:
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
here is my included files(js and css):
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/counter.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui-1.8.22.custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-flipcounter.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.8.22.custom.min.js?body=1" type="text/javascript"> </script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
I will also write here what files demo page is including:
<!-- My flip counter script, REQUIRED -->
<script type="text/javascript" src="js/flipcounter.js"></script>
<!-- Style sheet for the counter, REQUIRED -->
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<!-- NOT REQUIRED FOR COUNTER TO FUNCTION, JUST FOR DEMO PURPOSES -->
<!-- jQuery from Google CDN, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- jQueryUI from Google CDN, used only for the fancy demo controls, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<!-- Style sheet for the jQueryUI controls, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<!-- Style sheet for the demo page, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="css/demo.css" />
and here is rar archive with working counter: https://dl.dropbox.com/u/86122402/cnanney-apple-style-flip-counter-13fd00129a41.rar.

add this to your application.js
$(function(){
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
});

Everything looks like it should work.
Try adding you JavaScript inside a self anonymous invoking function.
$(function(){
var myCounter = new flipCounter("counter", { inc:123, pace:600});
});
Also make sure all your included files point to the right location.
Replace it with the following to test.
<script type="text/javascript" src="js/flipcounter.js"></script>
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />

Categories

Resources