.NET MVC详情视图日期问题：值存在不显示及格式不符

问题描述 #

• 初始问题：其他功能正常，但日期输入框不显示日期值，开发者工具中能看到该值存在。
• 更新后问题：日期框能正常显示，但格式不符合预期，需要dd/MM/yyyy格式，实际显示为MM/dd/yyyy。

详情视图代码 #

<div id="Search" class="row d-flex justify-content-around " style="box-sizing: border-box; border:5px solid#F5F5F5">
 <div class="col-2 d-flex flex-column">
     <label asp-for="brandname">Hãng*</label>
     <input asp-for="brandname" class="form-control plaintext" readonly/>
 </div>
 <div class="col-2 d-flex flex-column">
     <label asp-for="program">Tên chương trình*</label>
     <input asp-for="program" class="form-control plaintext" readonly/>
 </div>
 <div class="col-2 d-flex flex-column">
     <label asp-for="timestart">Ngày bắt đầu*</label>
     <input asp-for="timestart" class="form-control " readonly  />
 </div>
 <div class="col-2 d-flex flex-column">
     <label asp-for="timeend">Ngày kết thúc*</label>
     <input asp-for="timeend" class="form-control " readonly />
 </div>
 <div class="col-2 d-flex flex-column">
     <label asp-for="currency">Đơn vị tiền tệ</label>
     <input asp-for="currency" class="form-control plaintext" readonly/>
 </div>

 <table id="tableh" class="cell-border hover" style="width:100%">
     <thead>
         <tr>
             <th>Loại sản phẩm</th>
             <th>Điều kiện</th>
             <th>Rebate(%)</th>
             <th>Note</th>
         </tr>
     </thead>
     <tbody>
         @for(int i = 0; i < Model.Products.Count; i++)
         {
             <tr>
                 <td>
                 @Html.EditorFor(x => x.Products[i].productname, new{htmlAtributes = new{ @class="form-control"}})
                 </td>
                 <td>
                 @Html.EditorFor(x => x.Products[i].condition, new{htmlAtributes = new{ @class="form-control"}})
                 </td>
                 <td>
                 @Html.EditorFor(x => x.Products[i].rebate, new{htmlAtributes = new{ @class="form-control"}})
                 </td>
                 <td>
                 @Html.EditorFor(x => x.Products[i].note, new{htmlAtributes = new{ @class="form-control"}})
                 </td>  
             </tr>
         }
         </tbody>
     </table>
 </div>

模型代码（已将DateTime转换为DateOnly） #

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System;

namespace WebApplication4.Models
{
    public class Brand
   {
    [Key]
    public int brand_id { get; set; }
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    public string brandname { get; set; } = default!;
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    public string program { get; set; } = default!;
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    public string currency { get; set; } = default!;
    public string note { get; set; } = default!;
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", 
    ApplyFormatInEditMode = true)]
    public DateTime timestart { get; set; } 
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", 
    ApplyFormatInEditMode = true)]
    public DateTime timeend { get; set; } 

    public virtual List<Product> Products { get; set; } = new 
    List<Product>();
     }
   }

解决方案 #

解决初始显示问题 #

当使用DataType(DataType.Date)时，ASP.NET Core会生成type="date"的input元素，这类元素要求值必须是yyyy-MM-dd格式才能正确渲染显示。之前开发者工具能看到值但页面不显示，核心原因是后台传递的日期格式不符合input date的标准要求。

解决日期格式显示问题 #

针对只读场景，推荐以下两种方案：

方案1：直接渲染格式化文本（最简方案）

既然日期输入框是readonly状态，无需用户编辑，可将input改为文本模式，直接输出指定格式的日期：

• 修改视图中的日期输入框代码：

<input asp-for="timestart" class="form-control" readonly value="@Model.timestart.ToString("dd/MM/yyyy")" />
<input asp-for="timeend" class="form-control" readonly value="@Model.timeend.ToString("dd/MM/yyyy")" />

• 同时移除模型中的DataType(DataType.Date)属性，避免框架自动生成date类型input。

方案2：保留date类型，用JS转换显示格式

若后续可能取消只读，需保留date类型输入框，可通过JavaScript将显示格式转为dd/MM/yyyy：

• 调整HTML结构，添加用于显示格式化日期的元素：

<div class="col-2 d-flex flex-column">
    <label asp-for="timestart">Ngày bắt đầu*</label>
    <input asp-for="timestart" class="form-control" readonly style="display:none;" />
    <span class="form-control-plaintext"></span>
</div>
<div class="col-2 d-flex flex-column">
    <label asp-for="timeend">Ngày kết thúc*</label>
    <input asp-for="timeend" class="form-control" readonly style="display:none;" />
    <span class="form-control-plaintext"></span>
</div>

• 添加JavaScript代码：

const dateInputs = document.querySelectorAll('input[type="date"]');
dateInputs.forEach(input => {
    const displaySpan = input.nextElementSibling;
    const formatDate = () => {
        const dateValue = input.value;
        if (dateValue) {
            const [year, month, day] = dateValue.split('-');
            displaySpan.textContent = `${day}/${month}/${year}`;
        }
    };
    formatDate();
    input.addEventListener('change', formatDate);
});

模型层面补充调整

如果使用方案1，建议修改模型的DisplayFormat配置：

[Required(ErrorMessage = "Nhập thiếu kìa fen.")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = false)]
public DateTime timestart { get; set; } 
[Required(ErrorMessage = "Nhập thiếu kìa fen.")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = false)]
public DateTime timeend { get; set; } 

ApplyFormatInEditMode = false表示编辑模式下不使用该格式（若后续需要编辑，仍需遵循yyyy-MM-dd的标准格式）。

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