在 MVC5 中指定日期格式 (dd/MM/yyyy)

Posted 2023-02-24

【中文标题】在 MVC5 中指定日期格式 (dd/MM/yyyy)

【英文标题】：Specify Date format in MVC5 (dd/MM/yyyy)

【发布时间】：2017-10-04 21:05:30

【问题描述】：

我正在尝试处理用户输入的日期值，我想提示用户以这种格式输入日期：dd/MM/yyyy

我想做什么：

我在这个问题中阅读并实施了 Darin 的答案： Format datetime in asp.net mvc 4

这是我的实现：

在 Global.asax 中

    (ControllerContext controllerContext, ModelBindingContext bindingContext)
    
        var displayFormat = bindingContext.ModelMetadata.DisplayFormatString;
        var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);

        if (!string.IsNullOrEmpty(displayFormat) && value != null)
        
            DateTime date;
            displayFormat = displayFormat.Replace
            ("0:", string.Empty).Replace("", string.Empty);
            if (DateTime.TryParse(value.AttemptedValue, CultureInfo.InvariantCulture, DateTimeStyles.None, out date))
            
                return date;
            
            else
            
                bindingContext.ModelState.AddModelError(
                    bindingContext.ModelName,
                    string.Format("0 is an invalid date format", value.AttemptedValue)
                );
            
        

        return base.BindModel(controllerContext, bindingContext);
    

模型出发日期：

[Required(ErrorMessage = "Departure date is required")]
        [Display(Name = "Departure Date")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "0:dd/MM/yyyy", ApplyFormatInEditMode = true)]
        public DateTime DepartureDate  get; set; 

在视图中：

 <div class="col span-1-of-2">
                            @html.LabelFor(m => m.DesignVacation.DepartureDate)
                            @Html.EditorFor(m => m.DesignVacation.DepartureDate)

                        </div>

这是运行视图时的输出：

它以月（毫米）开头，但我想要的是这种格式： dd/MM/yyyy

如何使用 editorFor（如果可能的话使用 textboxFor）获取此格式。

【参考方案1】：

您正在使用EditorFor() 与[DataType] 和[DisplayFormat] 属性一起生成浏览器的HTML5 日期选择器。规范要求格式为yyyy-MM-dd（ISO 格式）。将属性更改为：

[Required(ErrorMessage = "Departure date is required")]
[Display(Name = "Departure Date")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "0:yyyy-MM-dd", ApplyFormatInEditMode = true)]
public DateTime DepartureDate  get; set; 

日期将以用户设备的文化显示，这就是 HTML-5 日期选择器的用途。

请注意，您不需要自定义模型活页夹（日期将以 ISO 格式发布，并由 DefaultModelBinder 正确绑定）。

但请注意，HTML-5 日期选择器仅在 Chrome 和 Edge 中受支持，并且普通文本框将在 Firefox 中显示（例如）。如果您想要一个一致的 UI，那么建议您使用 jquery datepicker 插件（例如 jquery-UI），但您还需要重新配置验证器以进行客户端验证（例如，请参阅 this answer）。

【参考方案2】：

如果您查看DisplayFormatAttribute.DataFormatString Property 的文档，您会看到

获取或设置字段值的显示格式。

没有提到它会改变datepicker的设计格式，它只是改变了值的格式。由于您从HTML 5 date picker 获取日期，因此您无法更改其格式Is there any way to change input type=“date” format? ，而且某些浏览器不支持HTML 5 date picker，但您可以使用jquery date picker

将此添加到head

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

在body

@Html.TextBoxFor(m => m.DesignVacation.DepartureDate)

最后加上script

<script>

   $(function()

       $('#DesignVacation_DepartureDate').datepicker(
        dateFormat: 'dd/mm/yy'
    );

);

</script>