javascript – 使用globalize库脚本进行MVC3日期验证

我试图让我的MVC3,EF4项目与 javascript datepicker一起工作,但我遇到问题,因为我希望日期是英国格式(年/月/日).

我花了几个小时研究这个问题,我已经决定实现’globalize’库脚本,就像我在link中看到的那样.

但是我得到了一个未捕获的TypeError：当我运行它时,无法在javascript(来自$.validator.methods.date行)中读取未定义的属性’methods’.我对javascript的了解非常有限,我发现使用’globalize’库的所有例子都没有提到这个错误,因此我很难过.

我在下面的视图中显示了相关代码：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.en-GB.js")" type="text/javascript"></script>

<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    Globalize.culture("en-GB");
    $.validator.methods.date = function (value,element) { return this.optional(element) || Globalize.parseDate(value); }
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('.date').datepicker({ dateFormat: "dd/mm/yy" });
    });
</script>

//SNIP

<div class="editor-field">
    @Html.TextBox("Expires",Model.Expires,new { @class = "date" })
    @Html.ValidationMessageFor(model => model.Expires)
</div>

请有人帮我解决这个问题.

非常感谢.

解决方法

我有一段时间没有使用过Globalize库,但我觉得这对你来说可能有点过头了 – 假设你只需要en-GB中的日期值,下面的Javascript / jQuery代码就可以了(和 here is a fiddle)：

<input type="text" class="date" placeholder="en-gb datepicker" />
<button id="btnGetVal">Get Value</button>

<script type="text/javascript">
$(document).ready(function () {
    /* you correctly have the date format set when initializing the datepicker */
    $('.date').datepicker({ dateFormat: "dd/mm/yy" });
    /* create an event handler for the "click" function of the button */
    $('#btnGetVal').on('click',function() {
       /* event handler */
       var targetValue = $('.date').val();
       alert(targetValue);
    });
});
</script>

我用jQuery 2.1.0和jQuery UI 1.10.4测试了这个 – 你可能需要为两者更新你的NuGet包(我看到你正在使用一个非常旧版本的jQuery,所以我假设你需要支持IE8或正在使用较旧版本的MVC).

顺便说一下,您可能希望确保初始化document.ready()函数内的所有Javascript代码,以便在加载时可以访问所有函数(因为在初始化datepicker()时无法访问Globalize代码我建议在这里阅读更多内容：http://learn.jquery.com/using-jquery-core/document-ready/