如何将HTML5 input[type=date]格式转换为01-Jan-2024样式？

原生Input Date的限制 #

原生<input type="date">的显示格式由浏览器和用户操作系统的区域设置决定，无法通过placeholder、pattern等HTML属性直接修改成自定义格式。你尝试的这些属性仅用于输入提示或提交值验证，不会改变控件的显示样式。

解决方案：用文本框模拟自定义格式日期选择 #

通过普通文本框结合JavaScript实现自定义格式的日期展示与选择，同时兼容ASP.NET模型绑定：

1. 修改HTML结构 #

将type="date"改为type="text"并设置只读，搭配隐藏的原生日期控件触发选择：

<div class="form-group col-md-4">
    <label asp-for="OrderDate"></label>
    <div class="input-group">
        <input type="text" asp-for="OrderDate" class="form-control" readonly onclick="openDatePicker()">
        <input type="date" id="hiddenDatePicker" style="display:none" onchange="formatDate(this.value)">
    </div>
    <span asp-validation-for="OrderDate" class="text-danger"></span>
</div>

2. 添加JavaScript处理日期格式化 #

编写JS实现日期选择触发与格式转换：

function openDatePicker() {
    document.getElementById('hiddenDatePicker').click();
}

function formatDate(dateValue) {
    if (!dateValue) return;
    const date = new Date(dateValue);
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const day = String(date.getDate()).padStart(2, '0');
    const month = monthNames[date.getMonth()];
    const year = date.getFullYear();
    // 给绑定的文本框赋值
    document.querySelector('input[asp-for="OrderDate"]').value = `${day}-${month}-${year}`;
}

3. ASP.NET后端适配 #

如果后端OrderDate是DateTime类型，ASP.NET会自动处理ISO格式的日期绑定。若页面加载时需显示格式化后的日期，可在后端提前格式化：

// 后端示例：将DateTime转为指定格式字符串
model.FormattedOrderDate = model.OrderDate.ToString("dd-MMM-yyyy", System.Globalization.CultureInfo.InvariantCulture);

视图中直接绑定格式化后的字段：

<input type="text" value="@Model.FormattedOrderDate" class="form-control" readonly onclick="openDatePicker()">

注意事项 #

• 隐藏的原生date控件保留系统级日期选择的兼容性
• 文本框设为只读避免用户输入非法格式内容
• 如需表单验证，可添加自定义规则校验日期格式

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