如何以日期格式显示 EditorFor 模型值

Question

我有一个 html 页面的给定模型来接受日期。我正在尝试将 datefrom 和 dateto 输入框格式化为 "dd/mm/yyyy" 格式。目前，它仅显示为文本格式。如何让两列都接受数据为 dd/mm/yyyy。

EditDateModel
public class EditDateModel
    {
        public string FromDate { get; set; }
        public string ToDate { get; set; }
        
    }

@model EditDateModel
<table id="tblEntry" class="table table-striped">
    <thead>
        <tr>
            <th>Date From</th>
            <th>Date To</th>
        </tr>
    </thead>
    <tbody>
 <tr>
            <td>@Html.EditorFor(model => model.FromDate, new { htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>
            <td>@Html.EditorFor(model => model.ToDate, new { htmlAttributes = new { @class = "form-control w-100" } })</td>
  </tr>

    </tbody>
</table>

Answer 1

您不需要使用任何其他库。您可以使用asp.net DataAnnotations 来完成它的推荐，方便且易于使用。

Implementation:

让你的EditDateModel 如下所示：

public class EditDateModel
    {
        [DataType(DataType.Date, ErrorMessage = "Date only")]
        [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
        public string FromDate { get; set; }

        [DataType(DataType.Date, ErrorMessage = "Date only")]
        [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
        public string ToDate { get; set; }
    }

Note: 它需要using System.ComponentModel.DataAnnotations; 在顶部的包引用中引用。

Views:

<table id="tblEntry" class="table table-striped">
    <thead>
        <tr>
            <th>Date From</th>
            <th>Date To</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.EditorFor(model => model.FromDate, new { htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>
            <td>@Html.EditorFor(model => model.ToDate, new { htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>
        </tr>

    </tbody>
</table>

注意：您的FromDate 的格式是正确的

OutPut:

如果您想获得更多知识，可以参考我们的official documet here。对于任何类型的日期格式问题，您也可以refer this

希望它能解决您的问题。

Answer 2

你在正确的轨道上，但这里的事情是...... asp.net mvc 只负责生成 HTML 资源，以及嵌入其中的所有脚本。 因此，您将始终获得文本值。

为了满足您的要求，我建议在 js 中使用第三个支持转换实际 ui 交互日期格式的库。例如这里，我将使用 jquery 和 datepicker

// This is up at your HTML
<td>@Html.EditorFor(model => model.FromDate, new { htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>

// And this should be on your js below that
$(document).ready(() => {
            $('.datepicker').datepicker({
                format: "dd/mm/yyyy"
            });
        });
// Please don't forget to embed the library somewhere