如何在Blazor代码中触发隐藏的InputDate日期选择器弹窗

你的思路方向是对的，但Blazor官方的InputDate组件并没有公开OpenDatePickerDialog()这类方法，直接通过组件引用调用行不通，得换个方式实现。下面是具体的可行方案：

1. 隐藏InputDate输入框（避免display:none） #

不要用display:none隐藏组件，这会导致组件DOM不可交互，JS无法触发内部的原生输入框。改用绝对定位将其移出可视区域：

.hidden-input-date {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}

2. 完整组件实现代码 #

<div>
    <button @onclick="OpenPicker">点击选择日期</button>
    <EditForm Model="@dateModel">
        <InputDate 
            @ref="dateInputRef" 
            class="hidden-input-date" 
            @bind-Value="@dateModel.SelectedDate" 
        />
    </EditForm>
    <div>已选日期：@dateModel.SelectedDate?.ToString("yyyy-MM-dd")</div>
</div>

@code {
    private InputDate<DateTime?> dateInputRef;
    private DateModel dateModel = new();

    private async Task OpenPicker()
    {
        // 通过JS互操作触发原生输入框的点击事件
        await JS.InvokeVoidAsync("triggerDatePicker", dateInputRef.Element);
    }

    public class DateModel
    {
        public DateTime? SelectedDate { get; set; }
    }
}

3. 添加JS交互代码 #

在项目的全局JS文件（如wwwroot/js/site.js）或页面的<script>标签中添加：

window.triggerDatePicker = (element) => {
    // 找到InputDate内部的原生input元素并触发点击
    const nativeInput = element.querySelector('input[type="date"]');
    if (nativeInput) {
        nativeInput.click();
    }
};

核心逻辑说明 #

• InputDate本质是封装了原生<input type="date">，我们通过组件的Element属性拿到根DOM，再用JS找到内部的原生输入框，模拟点击事件唤起系统日期选择器。
• 绑定的SelectedDate会自动同步，直接在页面展示即可。
• 用绝对定位隐藏组件，既保证了组件正常初始化，又不会在页面上显示多余元素。

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