I am having problems with the daterangepicker script that I got from the adminlte.io template that cannot run on MVC web pages.
If I can run it in PHP, once I switch to asp.net MVC it won't work
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>MVC</title><!-- Tell the browser to be responsive to screen width --><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><link rel="stylesheet" href="~/bower_components/bootstrap/dist/css/bootstrap.min.css"><!-- Font Awesome --><link rel="stylesheet" href="~/bower_components/font-awesome/css/font-awesome.min.css"><!-- daterange picker --><link rel="stylesheet" href="~/bower_components/bootstrap-daterangepicker/daterangepicker.css');?>"><!-- bootstrap datepicker --><link rel="stylesheet" href="~/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css');?>"><!-- Bootstrap time Picker --><link rel="stylesheet" href="~/plugins/timepicker/bootstrap-timepicker.min.css');?>"><!-- Select2 --><link rel="stylesheet" href="~/bower_components/select2/dist/css/select2.min.css');?>"><!-- Ionicons --><link rel="stylesheet" href="~/bower_components/Ionicons/css/ionicons.min.css"><!-- Theme style --><link rel="stylesheet" href="~/dist/css/AdminLTE.min.css"><link rel="stylesheet" href="~/dist/css/skins/skin-black.css"><!-- iCheck --><link rel="stylesheet" href="~/plugins/iCheck/square/blue.css');?>"><link rel="stylesheet" href="~/dist/css/skins/_all-skins.min.css');?>"><!-- Google Font --><link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"></head><body class="fixed hold-transition skin-black sidebar-mini">
...<div class="content-wrapper"><!-- Content Header (Page header) -->
@RenderBody()<!-- /.content --></div><!-- /.content-wrapper --><!-- Main Footer --><footer class="main-footer"><!-- Default to the left --><strong>Copyright © 2019 <a href="#">Testing</a>.</strong> All rights reserved.</footer></div><!-- ./wrapper --><!-- REQUIRED JS SCRIPTS --><!-- jQuery 3 --><script src="~/bower_components/jquery/dist/jquery.min.js"></script><!-- Bootstrap 3.3.7 --><script src="~/bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!-- Select2 --><script src="~/bower_components/select2/dist/js/select2.full.min.js"></script><!-- InputMask --><script src="~/plugins/input-mask/jquery.inputmask.js');?>"></script><script src="~/plugins/input-mask/jquery.inputmask.date.extensions.js');?>"></script><script src="~/plugins/input-mask/jquery.inputmask.extensions.js');?>"></script><!-- date-range-picker --><script src="~/bower_components/moment/min/moment.min.js');?>"></script><script src="~/bower_components/bootstrap-daterangepicker/daterangepicker.js');?>"></script><!-- bootstrap datepicker --><script src="~/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js');?>"></script><!-- SlimScroll --><script src="~/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script><!-- iCheck 1.0.1 --><script src="~/plugins/iCheck/icheck.min.js"></script><!-- FastClick --><script src="~/bower_components/fastclick/lib/fastclick.js"></script><!-- AdminLTE App --><script src="~/dist/js/adminlte.min.js"></script><script>
$(function () {
//Initialize Select2 Elements
$('.select2').select2()
//Datemask dd/mm/yyyy
$('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
//Datemask2 mm/dd/yyyy
$('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
//Money Euro
$('[data-mask]').inputmask()
//Date range picker
$('#reservation').daterangepicker()
$('#periode').daterangepicker()
//Date range picker with time picker
$('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' })
//Date range as a button
$('#daterange-btn').daterangepicker(
{
ranges: {'Today': [moment(), moment()],'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],'Last 7 Days': [moment().subtract(6, 'days'), moment()],'Last 30 Days': [moment().subtract(29, 'days'), moment()],'This Month': [moment().startOf('month'), moment().endOf('month')],'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
}
)
//Date picker
$('#datepicker').datepicker({
autoclose: true
})
//Timepicker
$('.timepicker').timepicker({
showInputs: false
})
})</script>
...And in Index.cshtml
<!-- Date Range --><div class="col-xs-3 "><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="fa fa-calendar"></i></div><input type="text" class="form-control pull-right" id="reservation"></div></div></div>However, the DickerPicker feature does not function and becomes the input text as shown below
What is the solution to being able to run one of the features that are on my web pages? thank you