【问题标题】：how to fix 'The field must be a date' on a datetime property in mvc如何修复 mvc 中日期时间属性上的“字段必须是日期”
【发布时间】：2015-08-11 04:15:35
【问题描述】：

我需要为我的模型属性捕获日期和时间。在我的模型类中，我有以下内容

[Required]
[DataType(DataType.DateTime)]
public DateTime? CallBackDate { get; set; }

当我输入有效的日期时间（例如28/05/2015 15:55）时，我不断收到此错误The field CallBackDate must be a date.

我看到了类似的问题并尝试了各种答案，但似乎没有什么能摆脱这个。我正在使用不显眼的客户端验证，但我无法禁用它。

输入字段的来源有以下标记

<input autocomplete="off" class="jquery_datetimepicker form-control hasDatepicker" data-val="true" data-val-date="The field CallBackDate must be a date." data-val-required="The CallBackDate field is required." id="CallBackDate" name="CallBackDate" placeholder="Enter your CallBackDate" type="text" value="">

并且 jquery 日期时间选择器具有以下标记

$('.jquery_datetimepicker').datetimepicker({
    dateFormat: 'dd/mm/yy',
    minDate: 0,
    showWeeks: true,
    showStatus: true,
    highlightWeek: true,
    numberOfMonths: 1,
    showAnim: "scale",
    showOptions: {
        origin: ["top", "left"]
    },
    timeFormat: 'hh:mm tt'
});

有什么想法吗？谢谢

【问题讨论】：

Jquery Datepicker Chrome 的可能重复项这似乎是客户端验证的一个已知问题。
@Coulton 这绝对不是 chrome 或浏览器问题
你看答案了吗？该问题的解决方案并非特定于chrome，解决方案是修改jquery.validate的行为。您说错误是由客户端验证引起的？
是的，我确实看过问题和答案，但它不相关！
您可以根据this answer 修改验证器 - 但取决于您使用的日期选择器

标签： jquery asp.net-mvc jquery-ui asp.net-mvc-5

【解决方案1】：

由于 jquery.validate.unobtrusive.min.js 中的 MVC 错误（甚至在 MVC 5 中）可能会出现客户端验证问题，该错误不接受任何日期/日期时间格式。它不是由日期选择器或浏览器引起的。不幸的是，您必须手动解决它。

我的最终解决方案：

之前必须包含：

@Scripts.Render("~/Scripts/jquery-3.1.1.js")
@Scripts.Render("~/Scripts/jquery.validate.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
@Scripts.Render("~/Scripts/moment.js")

您可以使用以下方式安装 moment.js：

Install-Package Moment.js

然后你终于可以为日期格式解析器添加修复：

$(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid();
    }
});

【讨论】：

工作完美，谢谢。我只需要将格式更改为“DD/MM/YYYY”。
嗨，@lukyer，您的代码运行良好，但是当我将它与我的 MinAge 属性客户端验证结合使用时，我的 MinAge 验证变得不起作用。您对如何使这两种验证起作用有想法吗？我在这里发布了详细信息：stackoverflow.com/questions/56629714/…
对于荷兰语的 DateTime，包括我不得不稍微改变格式的时间：D-M-YYYY HH:mm:ss。我希望将来 asp.net mvc 将使与其他语言环境的处理更加简单，这样我们就不必花几个小时去谷歌了。
我遇到了类似的问题，我也发布了这个问题：stackoverflow.com/questions/61114448/… 我已经尝试使用您建议的解决方案，并且在调用函数来修复日期格式解析器时，我添加了一个调试器并且函数（值，元素），即值和元素参数显示为未定义。您能否提出相同的建议，我是否遗漏了什么或者我需要为参数传递一些适当的值？
我将日期格式更改为 yyyy-mm-dd - 修复了它，只是一个更好的日期格式。世界应该切换到这个。

【解决方案2】：

我添加了日期格式解析器的修复，但我需要将格式设置为“L”，以便它可以在所有区域设置中工作：

$(function () {
$.validator.methods.date = function (value, element) {
    return this.optional(element) || moment(value, "L", true).isValid();
}
});

【讨论】：

【解决方案3】：

以模型为例：

    [Display(Name = "Insert Start Date")]
    [Required(ErrorMessage = "You must specify the date of the event!")]
    [DataType(DataType.DateTime, ErrorMessage = "Podaj prawidłową datę wydarzenia")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
    public DateTime StartDate { get; set; }

    [Display(Name = "Insert End Date")]
    [Required(ErrorMessage = "You must specify the date of the event!")]
    [DataType(DataType.DateTime, ErrorMessage = "Podaj prawidłową datę wydarzenia")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
    public DateTime EndDate { get; set; }

并查看我的示例代码：

<script>
$('#startDate').datetimepicker({
    onClose: function (dateText, inst) {
        var endDateTextBox = $('#endDate');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    }, dateFormat: 'yy-mm-dd',
    onSelect: function (selectedDateTime) {
        var start = $(this).datetimepicker('getDate');
        $('#endDate').datetimepicker('option', 'minDate', new Date(start.getTime()));
    }
}); ....

这带来了积极的影响： dateFormat: 'yy-mm-dd',

【讨论】：

here 是另一个可行的解决方案，希望有所帮助。

【解决方案4】：

$(function () {
    $.validator.addMethod('date',
    function (value, element) {
        if (this.optional(element)) {
            return true;
        }
        var valid = true;
        try {
            $.datepicker.parseDate('dd/mm/yy', value);
        }
        catch (err) {
            valid = false;
        }
        return valid;
    });
    $(".datetype").datepicker({ dateFormat: 'dd/mm/yy' });
});

将此代码放在文件 datepicker.js 中，并将此文件包含在 html 中

【讨论】：

【解决方案5】：

您需要确保您的应用程序的Culture 设置正确。

示例

以下示例显示文化如何影响日期解析：https://dotnetfiddle.net/vXQTAZ

DateTime dateValue;
string dateString = "28/05/2015 15:55";

if (DateTime.TryParse(dateString, CultureInfo.CreateSpecificCulture("en-US"), DateTimeStyles.None, out dateValue))
{
    Console.WriteLine("Valid en-US date.");
}
else
{
    Console.WriteLine("Not a valid en-US date.");
}

if (DateTime.TryParse(dateString, CultureInfo.CreateSpecificCulture("fr-FR"), DateTimeStyles.None, out dateValue))
{
    Console.WriteLine("Valid fr-FR date.");
}
else
{
    Console.WriteLine("Not a valid fr-FR date.");
}

输出

Not a valid en-US date.

Valid fr-FR date.

客户端设置

您可能还需要确保您的客户端验证器使用正确的文化/全球化。如果您在 MVC 中使用 jQuery 验证插件，请参阅此扩展以帮助修改该插件以满足您的需求：http://blog.icanmakethiswork.io/2012/09/globalize-and-jquery-validate.html

【讨论】：

更新了答案以包括对客户端验证器的必要更改。

【解决方案6】：

我必须验证dd/mm/yyyy hh:ii 并在@lukyer 的帮助下添加了答案 DD/MM/YYYY HH:mm 工作正常希望对您有所帮助！

【讨论】：

【解决方案7】：

我无法通过其他答案来解决它。就我而言，使用 TextBoxFor 不是强制性的。我改用了 TextBox。

型号

[Required(ErrorMessage = "Required")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime MyDate{get;set;}

查看

@Html.TextBox("MyDate", DateTime.Now.ToString(), new {@type="datetime"})

【讨论】：

【解决方案8】：

在 additional-methods.js 文件中添加以下方法，并将此文件包含在您的项目中：

      $.validator.addMethod('date',
        function (value, element) {
            if (this.optional(element)) {
                return true;
            }
            var valid = true;
            try {
                $.datepicker.parseDate('dd/mm/yy', value);
            }
            catch (err) {
                valid = false;
            }
            return valid;
        });

视图必须是这样的：

       @Html.TextBoxFor(model => model.DOB, new { @class = "datetype", type ="text" })
       @Html.ValidationMessageFor(model => model.DOB)

     $(function () {
              $(".datetype").datepicker({ dateFormat: 'dd/mm/yy' }); 
      });

它对我有用。

【讨论】：

【解决方案9】：

本地化或 moment.js 在使用 datetimepicker 时对我不起作用。拆分小时，然后检查正在工作。我在用格式：'dd.mm.yyyy hh:ii' 用于日期时间选择器。

$.validator.methods.date = function (value, element) {
    var dateL = value.split(" ");
    var date = dateL[0].split(".");
    var hour = dateL.length > 1 ? dateL[1].split(":") : "";
    return this.optional(element) || !/Invalid|NaN/.test(dateL.length > 1 ? new Date(date[2], date[1], date[0],hour[0],hour[1]).toString() : new Date(date[2], date[1], date[0]).toString());
}

【讨论】：

【解决方案10】：

如果您使用 JQuery 不显眼的验证，您可以添加后面的规则并更改客户端验证消息。

$('#inputName').rules('add',{
   messages:{
       date:'Invalid format date'
   }
})

【讨论】：

【解决方案11】：

在我的模型中，我有：

[DisplayFormat(DataFormatString = "{0:dd MMM yyyy}", ApplyFormatInEditMode = true)].

在我的脚本中，我有：

    $(function () {
                $('.datepicker').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    format: "dd MMM yyyy"
                });
        });

当我将脚本的格式更改为格式时：dd M yyyy - 它起作用了。

【讨论】：

问题是关于日期时间选择器而不是日期选择器

【解决方案12】：

这对我在客户端和服务器端都有效，我也安装了 moment.js。

$("#datepicker").datepicker();
$('#datepicker').datepicker("option", "dateFormat", "dd/mm/yy");

$.validator.methods.date = function (value, element) {
    return this.optional(element) || moment(value, "DD/MM/YYYY", true).isValid();
}

【讨论】：

【解决方案13】：

安装moment.js（安装包Moment.js）
打开jquery.validate.js，找到方法date:function(value, element)

为此替换内容：

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
return this.optional(element) || (isChrome ? moment(value, 'L').isValid() : !/Invalid|NaN/.test(new Date(value)));

完成

【讨论】：

不建议更改库代码。如果您使用包管理器并安装最新版本，这将被清除