Jquery 如何修复'；该字段必须是日期'；关于mvc中的datetime属性

我需要为我的模型属性捕获日期和时间。在我的模型课上，我有以下几点

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

当我输入有效的日期时间（例如，

28/05/2015 15:55

）时，我不断收到此错误

字段回调日期必须是日期。

我见过类似的问题，也尝试过不同的答案，但似乎没有什么能解决这个问题。我使用的是不引人注目的客户端验证，我不能禁用它

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

<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_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'
});

---

有什么想法吗？谢谢

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

例子 以下示例显示区域性如何影响日期解析：

输出

不是有效的en-US日期。

有效的fr日期。

客户端设置

---

您可能还需要确保客户端验证器正确使用区域性/全球化。如果您在MVC中使用jQuery验证插件，请参阅此扩展以帮助修改该插件以满足您的需要：

在模型中，例如：

    [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()));
    }
}); ....

$（'#startDate'）。日期时间选择器({
onClose：函数（dateText，inst）{
var endDateTextBox=$（“#endDate”）；
如果（endDateTextBox.val（）！=“”）{
var testStartDate=新日期（dateText）；
var testEndDate=新日期（endDateTextBox.val（））；
如果（testStartDate>testEndDate）
endDateTextBox.val（日期文本）；
}
否则{
endDateTextBox.val（日期文本）；
}
}，日期格式：'yy-mm-dd'，
onSelect：功能（selectedDateTime）{
var start=$（this）.datetimepicker（'getDate'）；
$（'endDate'）.datetimepicker（'option'，'minDate'，新日期（start.getTime（））；
}
}); ....

这产生了积极的影响：

---

dateFormat:'yy-mm-dd'，由于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")

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

Install-Package Moment.js

最后，您可以为日期格式解析器添加修复程序：

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

---

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

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

安装momente.js（安装包momente.js）

打开jquery.validate.js并找到方法date:function（值、元素）

替换以下内容：

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)));

完成

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

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

视图必须如下所示：

@Html.TextBoxFor（model=>model.DOB，新的{@class=“datetype”，type=“text”}）
@Html.ValidationMessageFor（model=>model.DOB）

$（函数（）{
$（“.datetype”）.datepicker（{dateFormat:'dd/mm/yy'}）；
});

---

它适合我。

我必须验证

dd/mm/yyyyy hh:ii

，在@lukyer answer的帮助下，我添加了

DD/MM/yyyyy HH:MM

工作正常

---

希望这有帮助

我不能用其他答案来解决它。就我而言，使用TextBoxFor不是强制性的；我改用了文本框

模型

看法

---

使用datetimepicker时，本地化或矩.js对我来说不起作用。分小时，然后检查是否正常工作。我正在使用 格式：“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());
}

---

如果使用JQuery UnubRosive验证，可以添加诸如behind和之类的规则来更改客户端验证消息

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

---

就我的模型而言，我有：

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

在我的脚本中，我认为：

$（函数（）{
$（'.datepicker'）.datepicker({
变化月：对，
变化年：是的，
格式：“dd-MMM-yyyy”
});
});这在客户端和服务器端都适用，我也安装了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();
}

这可能是客户端验证中的一个已知问题。@Coulton它肯定不是一个chrome或浏览器问题。您看到答案了吗？这个问题的解决方案并不是针对chrome的，解决方案是修改jquery.validate的行为。您说过错误是由客户端验证引起的？是的，我确实查看了问题和答案，但没有相关关系！您可以根据修改验证器，但这取决于您使用的日期选择器更新的答案，以包括对客户端验证器所需的更改。是另一个有效的解决方案，希望有帮助。非常有效，谢谢。我只需要将格式更改为“DD/MM/YYYY”。您好，@lukyer，您的代码运行良好，但当我将其与MinAge属性客户端验证结合使用时，我的MinAge验证就不起作用了。您对如何使这两种验证都起作用有什么想法吗？我在这里发布了详细信息：关于DateTime，用荷兰语，包括我不得不稍微更改格式的时间：
D-M-YYYY HH:mm:ss
。我希望在未来asp.net mvc将使处理其他地区变得更加简单，这样我们就不必在谷歌上搜索几个小时。我面临着类似的问题，我也提出了这个问题：我尝试过使用你建议的解决方案，在调用函数修复日期格式解析器时，我添加了一个调试器和该函数（值，元素）即值和元素参数显示为未定义。请您提出同样的建议，我是否缺少某些内容，或者我是否需要为参数传递一些适当的值？我将日期格式更改为YY mm dd-修复了它，只是一个更好的日期格式。世界应该切换到此。C
@Html.TextBox("MyDate", DateTime.Now.ToString(), new {@type="datetime"})

$.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());
}

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

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

$("#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();
}