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

Question

我想让Bootstrap Datepicker工作。 我按照这些来源的说明：

如何使用Razor引擎在MVC 5项目上添加Date Picker Bootstrap 3？ （答案bei 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'
        });
    });
}

结果是这样的：

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

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

编辑＃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中看到的Date字段的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进行验证，但是由于引导日期时间选择器需要这个，所以这应该不是问题。 更改格式以符合您的要求。

更新 - 道歉，刚刚意识到我上传的原始代码中存在错误。 我已经编辑过，现在应该可以了

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').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>