MvcReportViewer控件日期参数日历控件不显示问题求助

在Visual Studio 2022的MVC项目里用NuGet安装的MvcReportViewer控件，渲染报表时日期参数仅显示文本框，Edge和Chrome浏览器中日历控件无法正常显示？试试下面这些解决办法：

1. 检查报表参数类型 #

先确认你的RDLC/SSRS报表中，BEGDATE、ENDDATE这类日期参数的类型是Date/Time，而非Text类型。如果参数类型设为Text，控件只会渲染文本框，不会触发日历选择器。

2. 手动引入日历控件依赖资源 #

MvcReportViewer通常依赖jQuery UI的日历组件，若项目未引入相关脚本和样式，就会导致日历控件无法加载。直接在布局页_layout.cshtml的<head>或页面底部添加以下代码：

<!-- 引入jQuery（与项目已有版本兼容即可） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI样式文件 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQuery UI核心脚本 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

注意：如果项目已引入jQuery，避免重复引入不同版本，选择与现有jQuery兼容的jQuery UI版本即可。

3. 手动绑定日历控件到日期文本框 #

若自动渲染失效，可在页面底部添加自定义脚本，手动将日期参数的文本框转为日历控件：

$(document).ready(function() {
    // 匹配报表生成的日期文本框，可根据实际name属性调整选择器
    $('input[name="BEGDATE"], input[name="ENDDATE"]').datepicker({
        dateFormat: 'yy-mm-dd', // 格式需与报表要求一致
        changeMonth: true,
        changeYear: true
    });
});

可通过浏览器开发者工具查看文本框的name属性或class，确保选择器能精准选中目标元素。

4. 调整MvcReportViewer调用参数 #

尝试在调用@Html.MvcReportViewer时，添加参数指定日期控件使用HTML5原生的date类型，现代浏览器会自动渲染日历选择器：

@Html.MvcReportViewer(
    "/Reports/SampleReport", null, null, null,
    new Dictionary<string, object> { 
        { "name_id", Model.User.name_id.ToString() }, 
        { "BEGDATE", DateTime.Now }, 
        { "ENDDATE", null } 
    }, null,
    new { Height = 900, Width = 900, style = "border: none" },
    System.Web.Mvc.FormMethod.Post,
    // 新增参数指定日期控件类型
    new { BEGDATE = new { type = "date" }, ENDDATE = new { type = "date" } }
)

另外也可检查MvcReportViewer的NuGet版本，旧版本可能存在现代浏览器兼容性问题，建议升级到最新稳定版。

5. 排查布局页资源冲突 #

查看项目布局页是否引入了其他JS框架（如Bootstrap）或自定义样式，这些资源可能与MvcReportViewer的控件渲染冲突。可临时注释掉布局页中非必要的资源，测试日历控件是否恢复正常，逐步排查冲突点。

用户提供的Razor代码 #

@model OIG.WebUI.ViewModels.ReportViewModel
@using DataModel;
@using MvcReportViewer

@{
    ViewBag.Title = "Test Page";
    Layout = "~/Views/Shared/_layout.cshtml";
}

<div class="row">
   <div class="col-sm-2">
      &nbsp;
   </div>

<div class="col-sm-8">
    @Html.MvcReportViewer(
          "/Reports/SampleReport",null,null,null,
            new Dictionary<string, object> { { "name_id", @Model.User.name_id.ToString() 
 }, 
{ "BEGDATE", DateTime.Now }, 
{ "ENDDATE", null } },null,

            new { Height = 900, Width = 900, style = "border: none" },

       System.Web.Mvc.FormMethod.Post

            )

</div>
<div class="col-sm-2">
    &nbsp;
</div>

问题截图 #

内容的提问来源于stack exchange，提问作者dar25