在@Html Helper的type="month"控件中如何显示月份数字而非名称？

核心问题说明 #

原生type="month"输入控件的显示格式由浏览器的操作系统/语言区域设置决定，无法通过HTML属性直接修改显示样式——这就是你设置了Value为yyyy-MM但仍显示月份名称（如"March 2023"）的原因。以下是几种可行的解决方案：

方案1：改用TextBoxFor精准控制值格式 #

@Html.EditorFor可能会加载默认模板干扰显示逻辑，替换为@Html.TextBoxFor可以明确指定值的输出格式：

@Html.TextBoxFor(model => model.DueMonth, "{0:yyyy-MM}", new
{
    @class = "form-control",
    type = "month"
})

注意：此方案仅确保控件的值为yyyy-MM格式，控件的显示样式仍由浏览器区域设置决定，部分浏览器可能还是会显示月份名称。

方案2：放弃原生控件，自定义显示格式 #

如果需要强制显示MM yyyy格式（如"03 2023"），可以改用普通文本框配合自定义逻辑或第三方库实现：

示例1：纯JS自定义选择逻辑 #

<input type="text" id="DueMonth" class="form-control" 
       value="@(Model.DueMonth != null ? Model.DueMonth.ToString("MM yyyy") : "")">

<script>
// 绑定焦点事件，可扩展为自定义月份选择器
document.getElementById('DueMonth').addEventListener('focus', function() {
    // 此处可实现弹窗选择月份年份，或引入轻量级选择库
});
</script>

示例2：使用Bootstrap Datepicker（推荐） #

如果项目已引入Bootstrap，可利用其日期选择器组件指定显示格式：

<input type="text" id="DueMonth" class="form-control month-picker" 
       value="@(Model.DueMonth != null ? Model.DueMonth.ToString("MM yyyy") : "")">

<script>
$('.month-picker').datepicker({
    format: "mm yyyy", // 指定显示格式
    viewMode: "months", // 仅显示月份视图
    minViewMode: "months"
});
</script>

方案3：临时修改浏览器设置（仅测试用） #

若仅用于本地测试，可修改浏览器的语言/区域设置为优先显示数字月份的格式，但此方法无法控制用户端的显示效果，不适合生产环境。

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