Daterangepicker在网页ASP.NET MVC中不起作用
Daterangepicker在网页ASP.NET MVC中不起作用
提问于 2019-11-01 12:04:11
我从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功能将不起作用，并成为如下所示的输入文本
怎样才能运行我的网页上的一个功能呢？谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-01 14:09:55
您没有正确链接样式表和脚本，应该从链接和脚本中删除');?>。这应该可以解决问题。
<!-- 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58653972
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号