ASP.NET MVC Bootstrap Datepicker Date Validation issue

Question

I am trying to get the Bootstrap Datepicker to work. I followed instructions from these sources:

How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? (Answer bei Enzero)

&

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

The problem is, that instead of the common american mm/dd/yyyy format, I want to use the german format (dd.mm.yyyy). So I did the following:

In Model:

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

In Web.Config:

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

In Scripts\DatePickerReady.js:

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

The result is this:

Which is essentially what I want. The problem is now that validation says that the date format is wrong. "The field Datum must be date"

So the question is, why is validation not accepting the date?

EDIT #1:

I also use an EditorTemplate for date: (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" })
}

EDIT #2: I just read that DisplayFormat is not recognized when you use a TextBox (instead of e.g. an EditorFor). That explains why Validation is not working. But I still don't know how to solve it, yet.

EDIT #3:

This is the HTML code for the Date field that I get I see in IE F12:

<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.">

The scripts that are loaded on the page are: jquery-2.1.4.js, bootstrap.js, bootstrap-datepicker.js, DatePickerReady.js, respond.js, jquery.validate.js, jquery.validate.unobtrusive.js

EDIT #4: I now use this in 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
        });
    });
}

Every attribute works, but the 'de-DE' does not seem to do a thing. Language of the days is still in english. The validation issue also persists.

Further information: 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

I had a similar problem when I wanted to use "dd MMM yyyy" as a date format and found the solution was to write my own jQuery validator code.

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

Note - This uses moment.js for the validation, but as this is needed by the bootstrap datetimepicker then this shouldn't be a problem. Change the format to match your requirements.

Update - apologies, just realised there was a bug in the original code I uploaded. I've edited it and it should work now

Answer 2

My configuration: Model:

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

View:

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

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

I have ru-RU culture, but in format of date it's equal to de-DE. Suddenly, it works.

Answer 3

I had similar problem once. I had to change my UI culture (in web.config) and then it started validating properly. So try something like this:

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

Datepicker side:

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

Answer 4

Here is my scenario:

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

Model:

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

View:

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