日期时间的显示格式在 MVC Core 和引导程序 4 中的编辑模式下不起作用

Posted

技术标签:

【中文标题】日期时间的显示格式在 MVC Core 和引导程序 4 中的编辑模式下不起作用【英文标题】:Display Format for datetime is not working in edit mode in MVC Core and bootstrap 4 【发布时间】:2020-10-26 04:29:02 【问题描述】:

我的模型中有一个DateTime 属性,装饰为

  [Display(Name = "Valid From")]
  [DataType(DataType.Date)]
  [DisplayFormat(DataFormatString = "0:dd-MMM-yyyy", ApplyFormatInEditMode = true)]
  public DateTime ValidFrom  get; set; 

当我在 html 表格的 td 中使用它时,它的格式会正确呈现。这就是我在正确渲染时使用它的方式 - @Html.DisplayFor(modelItem => item.ValidFrom)

它不能在编辑/创建模式下工作。这就是它默认通过脚手架在视图中创建的方式

<input asp-for="ValidFrom" class="form-control" />

当编辑/创建表单加载时

尝试通过指定明确的日期格式但不起作用

<input asp-for="ValidFrom" class="form-control"  data-date-format="dd-MMM-yyyy"   />

这就是它在表单上的呈现方式。你能指导一下实际缺少的东西吗?另外,如何将日期选择器控件的日期格式设置为 dd-MMM-yyyy?

【问题讨论】:

【参考方案1】:
<input asp-for="ValidFrom" class="form-control"  />

使用上面的代码,它会生成一个&lt;input type= "date" /&gt;元素,默认日期格式是“mm/dd/yyyy”。要更改日期格式,您可以尝试将日期类型更改为文本类型,如下所示:

<input asp-for="ValidFrom" class="form-control" data-date-format="dd-MMM-yyyy" type="text" placeholder="dd-MMM-yyyy" />

然后,输出如下:

然后,当您更改日期时,您可以使用 Bootstrap-datepicker 或 JQuery UI datepicker 来选择日期并更改日期格式。

[注意]如果你同时使用Bootstrap和JQuery UI,你可能会遇到JQuery冲突错误,这里是similar thread,你可以检查一下。

【讨论】:

感谢您提供确切的解决方案。它按预期工作。【参考方案2】:

您似乎没有在输入中指定类型

您的日期格式看起来不正确

我发现使用带有 DateTime 模型属性的 asp-for 存在问题(尽管这些可能适用于字符串值)

这是我在 MVC Core 3 中使用的内容。希望这会有所帮助

<input type="date" value="@Model.DateTo.ToHtmlInputDate()" asp-for="DateTo" min="@Model.EarliestDate.ToHtmlInputDate()" max="@Model.LatestDate.ToHtmlInputDate()" onchange="$('form').submit();" class="form-control">

这是我扩展 DateTime 的静态助手

public static string ToHtmlInputDate(this DateTime d)

    return d.ToString("yyyy-MM-dd");

【讨论】:

实际上我们只需要这种日期格式(dd-MMM-yyyy 即 XX-MonthShortName-XXXX) 我回顾了几个 MVC 5 和 6 项目,虽然我非常支持您提出的日期格式,但它看起来就像我在过去几个中使用的所有格式年与控制工作所需的时间相关。您可能可以拥有一个具有所需格式的文本框,然后弹出一个日历来更改该文本。我认为日期的普通方法是我指定的格式【参考方案3】:

通过将false 设置为DisplayFormat 属性,我可以让它在.net 6 和.net 5 MVC 中工作

[DataType(DataType.Date)]
[Display(Name = "Date saisine")]
[DisplayFormat(DataFormatString = "0:dd/MM/yyyy", ApplyFormatInEditMode = false)]
public DateTime? Birth get; set;

【讨论】:

以上是关于日期时间的显示格式在 MVC Core 和引导程序 4 中的编辑模式下不起作用的主要内容,如果未能解决你的问题,请参考以下文章

如何使用角度引导日期选择器显示正确的日期格式?

无法获取引导日期时间选择器以在表单字段中显示格式化的数据库值

如何使用 asp.net core mvc 在引导模式中加载 AngularJS 代码

MVC3显示日期+短时间无格式字符串

Angular 引导日期选择器如何显示“MM/dd/yyyy”和“MM/dd/yy”?

在引导程序日期选择器中禁用日期的自动格式化