我从 adminlte.io 模板获取的 daterangepicker 脚本遇到问题，该脚本无法在 MVC 网页上运行。
如果我可以在 PHP 中运行它，一旦我切换到 asp.net MVC，它就无法工作
<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>
...在 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>但是，DickerPicker功能不起作用，变成如下所示的输入文本
如何解决才能运行网页上的其中一项功能？谢谢
最佳答案
您没有正确链接样式表和脚本，您应该从链接和脚本中删除 ');?>。这应该可以解决问题。
<!-- iCheck -->
<link rel="stylesheet" href="~/plugins/iCheck/square/blue.css">
<link rel="stylesheet" href="~/dist/css/skins/_all-skins.min.css">
<!-- 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>
关于javascript - Daterangepicker 无法在网页 ASP.NET MVC 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58653972/