ASP.NET MVC Bootstrap Datepicker 日期验证问题

Question

我正在尝试让 Bootstrap Datepicker 工作。我按照以下来源的说明进行操作：

How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? （答案是Enzero）

&

http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#format

问题是，我想使用德国格式 (dd.mm.yyyy)，而不是常见的美国 mm/dd/yyyy 格式。所以我做了以下事情：

在模型中：

[Required]
[DataType(DataType.Date)]
[Display(Name = "Datum")]
[DisplayFormat(DataFormatString = "{0:dd.MM.yyyy}", ApplyFormatInEditMode = true)]
public DateTime? Day { get; set; }

在 Web.Config 中：

<system.web>
<globalization culture="de-DE" uiCulture="de-DE" />
...
</system.web>

在 Scripts\DatePickerReady.js 中：

if (!Modernizr.inputtypes.date) {
    $(function () {
        var date = new Date();
        date.setDate(date.getDate());
        $(".datecontrol").datepicker({
            startDate: date,
            format: 'dd.mm.yyyy'
        });
    });
}

结果是这样的：

这基本上就是我想要的。现在的问题是验证表明日期格式是错误的。 “字段基准必须是日期”

所以问题是，为什么验证不接受日期？

编辑#1：

我还使用 EditorTemplate 作为日期：(Views/Shared/EditorTemplates/date.cshtml)：

@model Nullable<DateTime>

@{
    DateTime dt = DateTime.Now;

    if (Model != null)
    {
        dt = (System.DateTime) Model;
    }

    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "form-control datecontrol", type = "date" })
}

编辑#2： 我刚刚读到，当您使用 TextBox（而不是例如 EditorFor）时，无法识别 DisplayFormat。这就解释了为什么验证不起作用。但是我还是不知道怎么解决。

编辑#3：

这是我在 IE F12 中看到的日期字段的 HTML 代码：

<input name="Day" class="form-control datecontrol input-validation-error" id="Day" aria-invalid="true" aria-required="true" aria-describedby="Day-error" type="date" value="11.08.2015" data-val-required="The Datum field is required." data-val="true" data-val-date="The field Datum must be a date.">

页面上加载的脚本有： jquery-2.1.4.js、bootstrap.js、bootstrap-datepicker.js、DatePickerReady.js、respond.js、jquery.validate.js、jquery.validate.unobtrusive.js

编辑#4： 我现在在 DatePickerReady.js 中使用它：

if (!Modernizr.inputtypes.date) {
    $(function () {
        var date = new Date();
        date.setDate(date.getDate());
        $(".datecontrol").datepicker({
            startDate: date,
            format: 'dd.mm.yyyy',
            autoclose: true,
            todayHighlight: true,
            weekStart: 1,
            language: 'de-DE',
            calendarWeeks: true
        });
    });
}

每个属性都有效，但“de-DE”似乎没有做任何事情。当时的语言仍然是英语。验证问题也仍然存在。

更多信息： ASP.NET MVC 5、.NET 4.6、Bootstrap.Datepicker 1.4.0、jQuery 2.1.4、jQuery.Validation 1.14.0、Microsoft.jQuery.Unobtrusive.Validation 3.2.3

Answer 1

当我想使用“dd MMM yyyy”作为日期格式并发现解决方案是编写我自己的 jQuery 验证器代码时，我遇到了类似的问题。

$(function () {
    try {
        $.validator.addMethod('date',
        function (value, element) {
            if (this.optional(element)) {
                return true;
            }
            var ok = true;
            try {
                ok = moment(value, "dd.mm.yyyy", true).isValid();   
            } catch (err) {
                ok = false;
            }
            return ok;
        });
    } catch (e) { }
});

注意 - 这使用 moment.js 进行验证，但由于引导程序 datetimepicker 需要它，所以这应该不是问题。更改格式以符合您的要求。

更新 - 抱歉，刚刚意识到我上传的原始代码中存在错误。我已经对其进行了编辑，现在应该可以使用了

Answer 2

我的配置： 型号：

[Required]
[Display(ResourceType = typeof(Resources.Data), Name = "FerretBirthDay")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd'/'MM'/'yyyy}")]
[DataType(DataType.Date)]
public DateTime BirthDate { get; set; }

查看：

@Html.TextBoxFor(m => m.BirthDate, "{0:dd.MM.yyyy}", new { @class = "form-control", id = "birthDate" })

$("#birthDate").datepicker();

我有 ru-RU 文化，但在日期格式上它等于 de-DE。突然，它起作用了。

Answer 3

我曾经遇到过类似的问题。我不得不改变我的 UI 文化（在 web.config 中），然后它开始正确验证。所以尝试这样的事情：

<configuration>
<system.web>
    <globalization uiCulture="de-DE" culture="de-DE" />
</system.web>

日期选择器端：

$('.datepicker').datepicker({
   language: "de-DE"
});

Answer 4

这是我的场景：

BundleConfig.cs：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                       "~/Scripts/jquery-{version}.js",
                       "~/Scripts/globalize.js",
                       "~/Scripts/globalize.culture.uk-UA.js"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/bootstrap-datepicker.js",
                      "~/Scripts/bootstrap-datepicker.uk.js",
                      "~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/datepicker.css",
                      ));

型号：

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:d}")]
public DateTime? PaymentDate { get; set; }

查看：

<div class="input-group date">
    @Html.EditorFor(model => model.PaymentDate, new
    {
        htmlAttributes = new
        {
            @class = "form-control form-date",
        }
     )
     <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

Js：

<script>
    (function($, Globalize) {

        // Clone original methods we want to call into
        var originalMethods = {
            min: $.validator.methods.min,
            max: $.validator.methods.max,
            range: $.validator.methods.range
        };

        // Tell the validator that we want numbers parsed using Globalize

        $.validator.methods.number = function(value, element) {
            var val = Globalize.parseFloat(value);
            return this.optional(element) || ($.isNumeric(val));
        };

        // Tell the validator that we want dates parsed using Globalize

        $.validator.methods.date = function(value, element) {
            var val = Globalize.parseDate(value);
            return this.optional(element) || (val);
        };

        // Tell the validator that we want numbers parsed using Globalize,
        // then call into original implementation with parsed value

        $.validator.methods.min = function(value, element, param) {
            var val = Globalize.parseFloat(value);
            return originalMethods.min.call(this, val, element, param);
        };

        $.validator.methods.max = function(value, element, param) {
            var val = Globalize.parseFloat(value);
            return originalMethods.max.call(this, val, element, param);
        };

        $.validator.methods.range = function(value, element, param) {
            var val = Globalize.parseFloat(value);
            return originalMethods.range.call(this, val, element, param);
        };

    }(jQuery, Globalize));


    $().ready(function() {

        var currentCulture = '@Thread.CurrentThread.CurrentUICulture.ToString()';
        Globalize.culture(currentCulture);

        $('.form-date').datepicker({
            language: '@Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName',
            todayBtn: "linked"
        });

    });
</script>