jQuery DatePicker MVC4 EditorFür

Question

Ich brauche Datepicker in einem EditorFor-Feld.

für die Ansicht Mein Code ist:

<div class="editor-label"> 
    @Html.Label("birthDate","birthDate") 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.birthDate, new { @class = "datepicker"}) 
    @Html.ValidationMessageFor(model => model.birthDate) 
</div> 

Das Skript:

<script type="text/javascript"> 
$(document).ready(
    function() { 
     $('.datepicker').datepicker({ 
      changeMonth: true, 
      changeYear: true, 
      minDate: "-99Y", 
      dateFormat: "dd/mm/yyyy" 
     }); 
    }); 

Ich kann es nicht machen. Ich habe den folgenden Fehler: Microsoft JScript-Laufzeitfehler: Objekt unterstützt diese Eigenschaft oder Methode 'Datepicker' nicht.

Ich habe bereits jQuery geladen, bevor ich versuche, die Funktion aufzurufen.

Answer 1

@Html.EditorFor(model => model.birthDate, new { @class = "datepicker"}) 

Wird nicht funktionieren, weil "EditorFor" nicht akzeptieren (Pass entlang zum DOM) eine Klasse.

Also, Sie Notwendigkeit zu verwenden „TextBoxFor“, die noch eine Klasse oder besser akzeptieren wird, erstellen Sie ein EditorTemplate ein beliebiges Feld zu behandeln, die eine Datetime ist und die Klasse dort hinzuzufügen. This link Details, wie Sie die Vorlage erstellen.

Sobald Sie die Klasse arbeiten (kann im Quellcode verifiziert werden), der Rest bezieht sich nur auf den Jquery-Code. Ich benutze

@Styles.Render("~/Content/themes/base/css") 
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/jqueryui") 

und aktivieren Sie es mit dem Skript, das Sie bereits haben. Achten Sie darauf, dass der Name '.datepicker' genau derselbe ist wie die Klasse.

Answer 2

EditorFor eine Klasse akzeptieren für mich

@Html.EditorFor(model => model.Birthday, new { htmlAttributes = new { @class = "datepicker",@Name="birthday",@PlaceHolder = "mm/dd/yyyy" } }) 

HTML-Markup

class="datepicker text-box single-line" 

Die Klasse ist die Arbeit.

Answer 3

hatte ich ein simmilar Problem gelöst durch die HTML5-Funktionalität, die Unterstützung für Datetime hat, würde ich in Ihrem Beispiel vorschlagen somthing wie diese versuchen:

<div class="editor-label"> 
    @Html.Label("birthDate","birthDate") 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.birthDate, new { @class = "datepicker", type="datetime-local"}) 
    @Html.ValidationMessageFor(model => model.birthDate) 
</div> 

das einzige, was ich addes ist eine Art = "datetime-local"