ASP.NET Core中Bootstrap Datepicker多语言显示与英文提交问题

我之前也碰到过一模一样的场景，核心矛盾就是显示格式和提交格式不匹配——要给用户展示本地化的西语日期，但ASP.NET模型只认英文格式的月份缩写，直接提交就会触发jQuery Validate和后端模型验证失败。你之前尝试提交时改语言没生效，是因为datepicker初始化后修改语言不会自动重新格式化已选中的日期，而且验证触发时机早于你修改的动作。

下面给你两种靠谱的解决方案，优先推荐第一种，用户体验更流畅：

方案一：用隐藏字段分离显示与提交值 #

这种方法让前台显示西语日期，但实际提交的是后台能识别的英文格式日期，从根源上避免格式冲突：

1. 修改HTML结构 #

保留显示用的文本框（用来展示西语日期），新增一个隐藏字段绑定你的模型属性：

<!-- 仅用于显示西语日期，不绑定模型 -->
<input type="text" id="JoiningDateDisplay" class="datepicker form-control"/>
<!-- 隐藏字段，绑定模型，存储后台需要的英文格式日期 -->
<input type="hidden" asp-for="JoiningDate" id="JoiningDateHidden" />

2. 配置Datepicker并处理日期转换 #

在datepicker的changeDate事件中，把选中的日期对象转换成英文格式的字符串，赋值给隐藏字段：

$(".datepicker").datepicker({
    format: "dd M yyyy", // 西语显示格式（比如"01 ene 2024"）
    language: "es",
    weekStart: 1,
    maxViewMode: 2,
    todayHighlight: true,
    startDate: startDate,
    daysOfWeekDisabled: [],
    showOnfocus: true,
    autoClose: true,
    orientation: "bottom"
}).on('changeDate', function(e) {
    // 获取选中的原生Date对象
    const selectedDate = e.date;
    // 定义英文月份缩写数组
    const englishMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                          "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    // 构造后台需要的"dd MMM yyyy"格式字符串
    const day = String(selectedDate.getDate()).padStart(2, '0');
    const month = englishMonths[selectedDate.getMonth()];
    const year = selectedDate.getFullYear();
    const englishDateStr = `${day} ${month} ${year}`;
    
    // 把英文格式日期存入隐藏字段
    $("#JoiningDateHidden").val(englishDateStr);
});

3. 处理编辑页的初始值回显 #

如果是编辑页面，需要把后台返回的英文格式日期转换成西语格式显示：

$(document).ready(function() {
    const initialDateVal = $("#JoiningDateHidden").val();
    if (initialDateVal) {
        // 解析成Date对象
        const dateObj = new Date(Date.parse(initialDateVal));
        // 用datepicker设置显示值
        $(".datepicker").datepicker('setDate', dateObj);
    }
});

4. 调整jQuery Validate规则 #

确保验证只针对隐藏字段，忽略显示用的文本框：

$("#yourFormId").validate({
    // 忽略显示文本框的验证
    ignore: "#JoiningDateDisplay"
});

方案二：提交前动态转换日期格式（不推荐，体验略差） #

如果不想加隐藏字段，可以在表单提交前，把显示的西语日期转换成英文格式，再更新文本框的值后提交：

$("#yourFormId").on('submit', function(e) {
    // 阻止默认提交
    e.preventDefault();
    const dateInput = $(".datepicker");
    const spanishDateStr = dateInput.val();
    
    // 把西语日期转换成Date对象（datepicker内置了解析方法）
    const dateObj = $.fn.datepicker.DPGlobal.parseDate(spanishDateStr, "dd M yyyy", "es");
    // 构造英文格式字符串
    const englishMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                          "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const day = String(dateObj.getDate()).padStart(2, '0');
    const month = englishMonths[dateObj.getMonth()];
    const year = dateObj.getFullYear();
    const englishDateStr = `${day} ${month} ${year}`;
    
    // 更新文本框值为英文格式
    dateInput.val(englishDateStr);
    // 提交表单
    this.submit();
});

这种方法的问题是用户会看到文本框内容突然变化，体验不如隐藏字段方案。

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