Daterangepicker 在 Web 页面 ASP.NET MVC 中不起作用

Question

I am having problems with the daterangepicker script that I got from the adminlte.io template that cannot run on MVC web pages.我从无法在 MVC web 页面上运行的 adminlte.io 模板获得的 daterangepicker 脚本出现问题。

If I can run it in PHP, once I switch to asp.net MVC it won't work如果我可以在 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> ...

And in Index.cshtml在 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但是，DickerPicker 功能并没有 function 而是成为如下所示的输入文本

What is the solution to being able to run one of the features that are on my web pages?能够运行我的 web 页面上的功能之一的解决方案是什么？ thank you谢谢你

Answer 1

You are not linking the stylesheet and script properly and you should remove ');?> from your link and script.您没有正确链接样式表和脚本，您应该从链接和脚本中删除');?> 。 This should solve the problem.这应该可以解决问题。

    <!-- 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>

Daterangepicker 在 Web 页面 ASP.NET MVC 中不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-11-01 06:09:54

Daterangepicker 在 Web 页面 ASP.NET MVC 中不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-11-01 06:09:54

解决方案1
1 已采纳 2019-11-01 06:09:54