在MVC5中指定日期格式（dd / MM / yyyy）

Question

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

我尝试做的事情：

我在这个问题中阅读并实现了达林的答案： 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>

这是运行视图时的输出：

以月（mm）开头，但我想要的是这种格式： DD / MM / YYYY

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

Answer 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）。 / p>

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>