Bootstrap 3 Datepicker and DateTime validation error

Bootstrap 3 Datepicker and DateTime validation error

I’m using Bootstrap 3 Datepicker ( to present a DateTime Picker for a model property:
public partial class Call
public int Id { get; set; }

[Required(ErrorMessage = “Campo obrigatório”)]
[Display(Name = “Data e Hora de início”)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = “{0:dd-MM-yyyy HH:mm}”)]
public DateTime DateOfTheCall { get; set; }


@Html.LabelFor(model => model.DateOfTheCall, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.DateOfTheCall, new { htmlAttributes = new { @class = “form-control date” } })
@Html.ValidationMessageFor(model => model.DateOfTheCall, “”, new { @class = “text-danger” })

I set the datepicker with the date format:
// initialise any date pickers
locale: ‘pt’,
format: ‘DD-MM-YYYY HH:mm’

I also set the culture in the web.config file:

But I’m always getting the error message:
The field Data e Hora de início must be a date.


Solution 1:

After a lot of hours, I finally found a way to create a good solution, based on the jQuery Validation Globalize Plugin:

This extension has the following dependencies:

  • jQuery Validation (which itself depends on jQuery)
  • Globalize v1.x (which itself depends on CDLR)
Related:  twitter bootstrap 3 input-group-addon not all the same size

The final code

First, include the libraries (respect the order):

<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<script src="~/Scripts/cldr/unresolved.js"></script>
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/moment-with-locales.min.js"></script>
<script src="~/Scripts/bootstrap/bootstrap.js"></script>
<script src="~/Scripts/respond/respond.js"></script>
<script src="~/Scripts/jquery/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery/jquery.validate.globalize.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.js"></script>

I use the Module Pattern for script:

// Module Pattern
// More information:

var Layout = (function ($) {
    // Prevents certain actions from being taken and throws exceptions
    "use strict";

    // Private functions
    var _init = function () {

        // Use $.getJSON instead of $.get if your server is not configured to return the
        // right MIME type for .json files.
        ).then(function () {

            // Normalize $.get results, we only need the JSON, not the request statuses.
            return [].slice.apply( arguments, [ 0 ] ).map(function( result ) {
                return result[ 0 ];

        }).then( Globalize.load ).then(function() {

            // Your local settings code goes here.

        // initialise any date pickers (I had my own properties)
            locale: 'pt',
            format: 'DD-MM-YYYY HH:mm',
            sideBySide: true,
            showClose: true,
            defaultDate: new Date(,
            toolbarPlacement: 'top',
            showTodayButton: true,
            showClear: true,

    return {

        // Public functions
        init: _init



// Load when ready
$(document).ready(function () {

The view remain the same.

Related:  Rails: Using simple_form and integrating Twitter Bootstrap

Solution 2:

I think locale : “pt” is mentioned wrongly. Please remove it and test.

Please read below:

enter image description here