c# - eonasdan - Bootstrap 3 Datepicker y DateTime error de validación

eonasdan bootstrap datetimepicker

Question

Estoy usando Bootstrap 3 Datepicker ( http://eonasdan.github.io/bootstrap-datetimepicker/ ) para presentar un Selector de fecha y hora para una propiedad modelo:

Modelo:

[Table("Calls")]
public partial class Call
{
[Key]
[DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
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; }
}

Ver:

<div class="form-group">
@Html.LabelFor(model => model.DateOfTheCall, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.DateOfTheCall, new { htmlAttributes = new { @class = "form-control date" } })
@Html.ValidationMessageFor(model => model.DateOfTheCall, "", new { @class = "text-danger" })
</div>
</div>

Establecí el selector de fecha con el formato de fecha:

// initialise any date pickers
$(''.date'').datetimepicker({
locale: ''pt'',
format: ''DD-MM-YYYY HH:mm''
});

También puse la cultura en el archivo web.config:

<globalization culture="pt-PT"/>

Pero siempre recibo el mensaje de error:

The field Data e Hora de início must be a date.

Answer 1

Creo que locale: "pt" se menciona mal. Por favor quítalo y prueba.

Porfavor lea abajo:

Answer 2

Después de muchas horas, finalmente encontré una manera de crear una buena solución, basada en el complemento de Globalización de Validación de jQuery:

• URL del proyecto: https://github.com/johnnyreilly/jquery-validation-globalize

Esta extensión tiene las siguientes dependencias:

• Validación de jQuery (que a su vez depende de jQuery)
• Globalizar v1.x (que a su vez depende de CDLR)

El código final

Primero, incluye las bibliotecas (respeta el orden):

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

Yo uso el patrón del módulo para el script:

// Module Pattern
// More information: http://toddmotto.com/mastering-the-module-pattern/
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.
$.when(
$.getJSON("/Scripts/cldr/supplemental/likelySubtags.json"),
$.getJSON("/Scripts/cldr/main/numbers.json"),
$.getJSON("/Scripts/cldr/main/ca-gregorian.json"),
$.getJSON("/Scripts/cldr/supplemental/timeData.json")
).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.
Globalize.locale("pt-PT");
});
// initialise any date pickers (I had my own properties)
$(''.date'').datetimepicker({
locale: ''pt'',
format: ''DD-MM-YYYY HH:mm'',
sideBySide: true,
showClose: true,
defaultDate: new Date(Date.now()),
toolbarPlacement: ''top'',
showTodayButton: true,
showClear: true,
});
};
return {
// Public functions
init: _init
};
})(jQuery);
// Load when ready
$(document).ready(function () {
Layout.init();
});

La vista sigue siendo la misma.