jQuery datepicker 中的日期模型

Posted 2023-05-07

【中文标题】jQuery datepicker 中的日期模型

【英文标题】：Date model in jQuery datepicker

【发布时间】：2014-03-31 17:31:15

【问题描述】：

我需要使用 datepicker 在 SQL-Server DB 中存储日期格式“29-12-2014”，但我收到消息 The field XXX must be a date.

我最后一次尝试是正则表达式：

模型#1：

[RegularExpression(@"([3][0,1]|[0-2]\d)-([1][0-2]|[0]\d)-(\d\d\d\d)", ErrorMessage = "Valor inválido.")]
public Nullable<DateTime> ETD  get; set; 

模型 #2：

[DataType(DataType.DateTime)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "0:dd-MM-yyyy")]
public Nullable<DateTime> ETD  get; set; 

查看：

<div class="editor-field">
    @html.TextBoxFor(model => model.ETD)
    @Html.ValidationMessageFor(model => model.ETD)
</div>

jQuery:

$(function () 
     $("#ETD").datepicker();
);

我总是收到消息“ETD 字段必须是日期。”

有什么想法吗？

谢谢。

【问题讨论】：

只是一个疯狂的猜测，也许使用$("#ETD").datepicker( dateFormat: "dd-MM-yyyy" );

您好，谢谢，我已经尝试过了，但还是不行:(

我有类似的东西，但它只在 safari 和 IE 中不起作用，chrome 很好。您是否尝试过跨浏览器？

是的，它也不能在 chrome 中工作......

【参考方案1】：

据我了解，“dd-MM-yyyy”格式是问题所在。 jquery 不显眼的验证正在尝试实例化一个新的 Date(strVal) 对象，它不知道如何处理字符串 '29-12-2014'。

见Unobtrusive validation in Chrome won't validate with dd/mm/yyyy

magritte 回答说，使用 jQuery Globalize 库重新定义不显眼的验证器的日期方法，以使用所需的格式字符串进行解析应该可以解决问题：

$.validator.methods.date = function (value, element) 
    return this.optional(element) || Globalize.parseDate(value, "dd-MM-yyyy", "en");

更新

我在本地重新创建了您的问题，并且能够在未安装全球化库时复制“在表单发布之前未触发必填字段验证”问题。安装并加载库后，前端按预期工作，接受修改后的 dd-MM-yyyy 日期的不显眼验证。

可以使用 NuGet 包管理器和以下包安装该库：http://www.nuget.org/packages/jquery-globalize/。然后您需要更新您的 html 以包含 globalize.js 脚本。

后端是另一个故事，它将依赖于您本地计算机的全球化配置文件。我假设您正在运行可能解析此格式的非 en/us 机器？我的机器是英国/美国，并不会原生解析修改后的日期格式，但是使用下面的命令，我成功地得到了一个有效的日期时间：

DateTime.ParseExact(Request.Form["ETD"], "dd-MM-yyyy", System.Globalization.CultureInfo.InvariantCulture);

【讨论】：

您好，谢谢，但如果我将此代码应用到我的页面，视图中的所有其他必填字段都将被忽略并提交页面

听起来有一个 javascript 错误——检查你的控制台。您需要下载/包含 jQuery globalize 库才能使其工作。 github.com/jquery/globalize 和 NuGet 上 @nuget.org/packages/jquery-globalize

嗨，谢谢，但似乎@sipwiz 的答案对我来说很好用，jQuery.validator.methods["date"] = function (value, element) return true; ，所以知道为什么你的不工作吗？似乎是一样的。网站其他部分关于验证的后果是什么？也许没有，因为我们只适用于日期类型？

从总体上看，'return true' 似乎将验证 -any- 输入为有效，完全破坏验证点。您尝试安装全球化插件吗？我没有在本地实现您的特定解决方案，但如果您能够从控制台发布任何 JavaScript 错误，它可能会有所帮助。

我没有任何错误，只有来自 jquery.validate.unobtrusive 库的消息。但也许因为我在 datepicker jQuqery 插件中定义了格式“dd-MM-yy”，所以我不必担心其他任何事情？

【参考方案2】：

这应该可以在框中设置您的格式：

$("#ETD").datepicker(
    dateFormat    : 'dd-mm-yy'
);

验证消息是来自 jQuery 还是 C#？关于前者，请参阅此答案：https://***.com/a/19519745/1803682

【讨论】：

您好，谢谢，但我已经对此进行了测试，但没有解决问题。目前我认为 DanS 响应解决了它

同意 - 我赞成 @DanS，因为它是我链接的解决方案的更好的具体实现（我认为）。

【参考方案3】：

在@DanS 的帮助下，我能够为我的国家葡萄牙 (pt-PT) 制定日期验证解决方案，以下是任何在验证日期时遇到问题的人的完整解决方案：

首先需要安装nuget包：

http://www.nuget.org/packages/jquery-globalize/

然后在您要进行验证的页面中（或像我一样在捆绑包中）包含指向核心库和您所在国家/地区的文化文件的链接（注意：始终将核心放在首位，然后是文化文件，否则您会得到一个未定义的错误）

bundles.Add(new ScriptBundle("~/bundles/saida").Include(
            "~/Scripts/Presenter/Saida/create.js",
            "~/Scripts/Globalize/globalize.js",
            "~/Scripts/Globalize/Cultures/globalize.culture.pt-PT.js",
            "~/Scripts/Common/date.js"));

设置模型：

[Required(ErrorMessage = "Preenchimento obrigatório.")]
[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "0:dd-MM-yyyy")]
[Display(Name = "Data da DAU")]
public DateTime? DAUData  get; set; 

我没有在 DataType 属性中放置任何 ErrorMessage，因为它没有传递给 View，相反，您可以在 View 中放置自定义消息：

<div class="editor-field">
    @Html.EditorFor(model => model.DAUData)
    @Html.ValidationMessageFor(model => model.DAUData, "Formato de data inválido.")
</div>

但是如果你使用带有格式定义的jQuery datepicker函数，就不用担心格式了：

$(function ()

    $(".datefield").datepicker( dateFormat: 'dd-mm-yy', changeYear: true );
);

属性 changeYear 是提供一个下拉列表来选择年份（不是强制性的，只是保证该值始终有效的一个不错的选项），并且不要忘记在您的文件中包含 jQuery 和 jQueryUI 引用来呈现日历正确。

为了完成客户端脚本，我有文化的格式验证：

$.validator.methods.date = function (value, element)

    return this.optional(element) || Globalize.parseDate(value, "dd-MM-yyyy", "pt-PT");
 

我在视图中也有一个日期格式的模板（将它放在 Shared/EditorTemplates/ 文件夹中，不要忘记在视图中使用 @Html.EditorFor razor 方法：

@
    var value = "";

    if (Model.HasValue) 
    
        value = String.Format("0:d", Model.Value.ToString("dd-MM-yyyy"));
    


@Html.TextBox("", value, new  @class = "datefield", type = "text", autocomplete = "off"     )

现在，只要您需要一个日期，就可以使用模板和“datepicker”类，就是这样！

再次感谢丹斯 ;)

【讨论】：

很高兴您启动并运行它！全球化和格式化总是一个棘手的问题：-D