Blazor Server单页加载bootstrap-datepicker报错：Datepicker未定义

问题原因 #

bootstrap-datepicker的JS文件采用IIFE（立即执行函数表达式）封装，执行后会将datepicker方法挂载到jQuery的原型上，同时把Datepicker构造函数挂载到全局window对象，但ES模块有独立作用域，直接通过import加载该文件时，模块内部不会主动导出Datepicker方法，所以你调用jsModule.InvokeVoidAsync("Datepicker", ...)会提示找不到该方法。

解决方案 #

通过自定义ES模块包装bootstrap-datepicker，将需要的功能暴露为可导出的方法，再由Blazor调用。

步骤1：创建自定义包装模块 #

在wwwroot/js目录下新建datepicker-wrapper.js文件，内容如下：

// 导入依赖（如果jQuery和Bootstrap未全局引入，可在此导入，否则可省略前两行）
import './jquery.min.js'; // 替换为你实际的jQuery文件路径
import './bootstrap.bundle.min.js'; // 替换为你实际的Bootstrap JS路径
import './bootstrap-datepicker.js';

// 封装初始化方法，供Blazor调用
export function initDatepicker(element) {
    // 使用jQuery初始化日期选择器
    $(element).datepicker();
}

步骤2：修改Blazor组件代码 #

更新你的.razor文件，导入自定义包装模块而非直接导入bootstrap-datepicker.js，并添加组件销毁时的资源释放逻辑：

<!-- 仅在当前页面加载日期选择器样式 -->
<link rel="stylesheet" href="./css/bootstrap-datepicker.min.css" />

<input @ref=ReferenceToInputControl class="form-control" id="obdInput">

@code {
    ElementReference ReferenceToInputControl;
    private IJSObjectReference? jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 导入自定义包装模块
            jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./js/datepicker-wrapper.js");
            await jsModule.InvokeVoidAsync("initDatepicker", ReferenceToInputControl);
        }
    }

    // 组件销毁时释放JS模块资源
    public async ValueTask DisposeAsync()
    {
        if (jsModule != null)
        {
            await jsModule.DisposeAsync();
        }
    }
}

关键说明 #

1. 样式加载：通过组件内的<link>标签引入bootstrap-datepicker的CSS，确保仅当前页面加载样式，符合你的需求。
2. 依赖处理：bootstrap-datepicker依赖jQuery和Bootstrap，需确保这两个资源已加载（可通过全局引入或在包装模块中导入）。
3. 资源释放：实现DisposeAsync方法释放JS模块，避免内存泄漏。

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