2015-12-08 19 views
19

Używam Bootstrap 3 datepicker (http://eonasdan.github.io/bootstrap-datetimepicker/) przedstawić DateTime Picker dla nieruchomości model:Bootstrap 3 Datepicker i DateTime błąd walidacji

Model:

[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; } 
} 

Widok:

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

Ustawiam datepicker w formacie daty:

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

ja również ustawić kultury w pliku web.config:

<globalization culture="pt-PT"/> 

Ale ja zawsze otrzymuję komunikat o błędzie:

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

Możesz zweryfikować swój datetimicker poprzez javascript, utworzyć funkcję, która sprawdzi wartość. –

+1

Myślę, że Twój @ Html.EditorFor generuje jako pole tekstowe z type = 'textbox', ale powinno być type = 'date'. To może ci pomóc – Nimmi

+1

@Nimmi Cześć dzięki, jak mogę zmienić typ EditorFor? – Patrick

Odpowiedz

8

Po wielu godzinach, w końcu znalazł sposób, aby stworzyć dobre rozwiązanie, w oparciu o jQuery Validation globalizacji Plugin: URL

To rozszerzenie ma następujące zależności:

  • jQuery walidacji (która z kolei zależy od jQuery)
  • Globalizacji v1.x (która z kolei zależy od CDLR)

końcowy kod

pierwsze obejmują biblioteki (respektować kolejności):

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

używam Wzorzec modułu dla skryptu:

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

Widok pozostaje ten sam.

1

myślę locale: "PT" wspomina niesłusznie. Usuń go i przetestuj.

Proszę przeczytać poniżej:

enter image description here

+1

Witam, dziękuję za pomoc, ale wypróbowałem Twoje rozwiązanie i nie mogłem go uruchomić. Możesz sprawdzić moje, czy zgadzasz się z tym. – Patrick