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

Question

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

我试图做的:

我在这个问题中阅读并实现了Darin的答案: 在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),但您还需要重新配置验证器以进行客户端验证(请参阅此答案以获取示例).

Answer 2

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

\n\n

\n

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

\n

\n\n

没有提到它会改变 的设计格式datepicker，它只是改变值的格式。因为您正在获取日期，所以HTML 5 date picker无法更改其格式有没有办法更改输入 type=\xe2\x80\x9cdate\xe2\x80\x9d 格式？\n并且有些浏览器不支持HTML 5 date picker，但你可以使用jquery date picker

\n\n

添加这个head

\n\n

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

\n\n

并在body

\n\n

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

\n\n

最后添加script

\n\n

<script>\n\n   $(function(){\n\n       $(\'#DesignVacation_DepartureDate\').datepicker({\n        dateFormat: \'dd/mm/yy\'\n    });\n\n});\n\n</script>\n

\n