如何在Razor页面中使用用户选定的日期格式显示存储日期？

以下是几种无需依赖第三方库的可行方案，能让存储的yyyy-MM-dd格式日期和<input type="date">使用完全一致的用户区域格式展示：

方案1：复用浏览器<input type="date">的格式化逻辑（最可靠） #

直接借助浏览器内置的日期格式化能力——既然<input type="date">能正确识别用户区域，我们可以创建一个隐藏的临时输入框，利用它的解析逻辑来获取格式化后的日期文本：

function formatDateToUserLocale(isoDateStr) {
  const tempDateInput = document.createElement('input');
  tempDateInput.type = 'date';
  tempDateInput.value = isoDateStr; // 传入yyyy-MM-dd格式的日期

  if (tempDateInput.valueAsDate) {
    // 利用浏览器默认区域格式化日期，和<input type="date">显示逻辑完全一致
    return tempDateInput.valueAsDate.toLocaleDateString();
  }
  return isoDateStr; // 解析失败时返回原日期字符串
}

// 使用示例
const storedDate = '2023-12-25';
const userFormattedDate = formatDateToUserLocale(storedDate);
console.log(userFormattedDate); // 输出用户浏览器区域对应的格式（如dd/MM/yyyy、MM/dd/yyyy等）

这个方法完全复用浏览器处理日期输入的原生逻辑，确保和用户看到的输入框格式100%匹配，无需额外处理区域参数。

方案2：前端传递用户区域到服务器，服务器端格式化 #

如果需要在服务器端完成格式化，可以将浏览器的用户区域传递给服务器，用对应区域的规则处理日期：

前端（Razor页面） #

通过隐藏域或AJAX传递浏览器的默认区域：

<!-- 在表单中添加隐藏域，提交时传递用户区域 -->
<input type="hidden" name="userLocale" value="@navigator.language" />

服务器端（C#） #

接收区域参数后，创建对应CultureInfo进行格式化：

public IActionResult OnPost()
{
    // 获取前端传递的用户区域，默认值为en-US
    string userLocale = Request.Form["userLocale"].ToString() ?? "en-US";
    CultureInfo userCulture = new CultureInfo(userLocale);
    
    DateTime storedDate = DateTime.Parse("2023-12-25");
    // 使用用户区域的短日期格式格式化
    string formattedDate = storedDate.ToString("d", userCulture);
    
    ViewBag.FormattedDate = formattedDate;
    return Page();
}

方案3：正确使用JavaScript的toLocaleDateString() #

你之前遇到的toLocaleDateString()只显示en-US格式的问题，大概率是因为代码中硬编码了区域参数。正确的无参数调用会自动使用浏览器的默认用户区域：

const storedDate = '2023-12-25';
const dateObj = new Date(storedDate);
// 不带参数，自动使用浏览器默认区域的短日期格式
const formattedDate = dateObj.toLocaleDateString();

// 若需明确指定短日期风格，可添加options参数
const formattedDateWithStyle = dateObj.toLocaleDateString(undefined, { dateStyle: 'short' });

注意事项 #

• 确保代码中没有硬编码区域参数（如toLocaleDateString('en-US')），否则会覆盖浏览器的默认设置
• 部分浏览器可能需要用户明确开启区域权限，但主流现代浏览器都能自动识别系统区域设置

内容的提问来源于stack exchange，提问作者Benjamin J Hobbs