Datepicker funktioniert nicht in asp.net MVC

Question

Ich verwende .net MVC. Dies ist meine Rasierer Ansicht von erstellen Sie eine Rechnung, die eine Eigenschaft Fälligkeitsdatum haben. Ich möchte Datumsauswahl in meinem Code verwenden, aber es funktioniert nicht, wenn ich folgenden Code verwenden:

<div class="form-group"> 
     @Html.LabelFor(model => model.DueDate, new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.TextBoxFor(model => model.DueDate, new { id = "datepicker" }) 
      @Html.ValidationMessageFor(model => model.DueDate) 
     </div> 
    </div> 
    <script type="text/javascript"> 
$(document).ready(function() { $("#datepicker").datepicker({ });}); 
</script> 

Also änderte ich den Code zu folgenden dann begann es funktioniert, aber wie kann ich den duedate Wert an die Steuerung den obigen Code übergeben Fügt dem Objekt automatisch den Fälligkeitswert hinzu, aber der folgende Code kann nicht.

 <div class="form-group"> 
     @Html.LabelFor(model => model.DueDate, new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      <input type="date" id="datepicker" class="form-control"/> //Changing 
      @Html.ValidationMessageFor(model => model.DueDate) 
     </div> 
    </div> 
    <script type="text/javascript"> 
$(document).ready(function() { $("#datepicker").datepicker({ });}); 
</script> 

Answer 1

Der Code in Ihrem ersten Schnipsel verwendet ein Datum Zeitsteuerung Picker zur Verfügung gestellt von jQuery UI library.To es sich arbeiten müssen einen Verweis auf die folgenden Dateien in dieser Reihenfolge hinzuzufügen:

1. jquery.js
2. jQueryUI.js
3. jQueryUI.css

So sollte Ihre endgültige Code wie folgt aussehen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"> 
<script type="text/javascript"> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
</script> 

Der Code in Ihrem zweiten Schnipsel verwendet eine HTML-5-Eingang vom Typ Datum, wie es automaticallly von Stephen.This wies darauf hin, macht die Eingabe ein Datum Zeitauswahl wenn es vom Browser unterstützt wird.

Der Grund für die zweite Schnipsel ist, müssen in MVC die Bindung geschieht auf der name property.Since C# Eigenschaft DueDate Sie funktionierte nicht, dass aufgerufen wird name="DueDate" mit dem Eingangselement hinzuzufügen.

ändern Sie diese Zeile:

<input type="date" id="datepicker" class="form-control"/> 

Um dies:

<input name="DueDate" type="date" id="datepicker" class="form-control"/>