Wie man DatePicker zu meiner MVC3 C# Seite hinzufügt

Question

Ich habe versucht, herauszufinden, wie man dies den ganzen Nachmittag macht, aber scheint nicht in den Griff zu bekommen, wie man DatePicker mit meiner Seite arbeiten kann.

Auch, wenn möglich, möchte ich den Time-Teil der DateTime entfernen, da ich nur an dem Datum interessiert bin, an dem der Eintrag gepostet wird.

Ich habe den Code so weit unten eingefügt, ich habe so ziemlich alles entfernt, was ich bisher versucht habe, also ist es wieder an den Anfang. Ich habe die JQuery-Dateien am Anfang von _Layout.cshtml referenziert, was ich für richtig halte.

Ich habe mir viele Führer im Internet angeschaut, aber ich hatte Mühe, ihnen einen Sinn zu geben, obwohl ich weiter lesen werde.

Ich habe diese Zeilen an den Anfang meiner _Layout.cshtml (ich habe auch entpackt und kopiert die JQuery Ordner die nachfolgend auch bezeichnet)

<link href="@Url.Content("~/Content/jquery-ui/redmond/jquery-ui-1.8.21.custom.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery-1.8.11.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/ui/minified/jquery.ui.core.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/ui/minified/jquery.ui.datepicker.min.js")" type="text/javascript"></script> 

My View Code wie folgt aussieht hinzugefügt :

@model dale_harrison.Models.News 

@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"  type="text/javascript"></script> 

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>News</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.News_Entry) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.News_Entry) 
      @Html.ValidationMessageFor(model => model.News_Entry) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.News_Date) 
     </div> 
     <div class="editor-field"> 
      @*@Html.EditorFor(model => model.News_Date)*@ 
      @Html.EditorFor(model => model.News_Date, new object{ id = "news_date" }) 
      @Html.ValidationMessageFor(model => model.News_Date) 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#news_date").datepicker({ dateFormat: 'dd/mm/yy' }); 
    }); 
</script> 

Mein Modell ist hier:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Data.Entity; 

namespace dale_harrison.Models 
{ 
    public class News 
    { 
     public int ID { get; set; } 
     public string News_Entry { get; set; } 
     public DateTime News_Date { get; set; } 
    } 

    public class NewsDBContext : DbContext 
    { 
     public DbSet<News> News_Entries { get; set; } 
    } 
} 

Vielen dank im Voraus für jeden fo r helfen

Answer 1

Versuchen Sie dies zuerst:

Ihre HTML-Code hinzufügen ohne hTML-Helfer:

<input type="text" id="news_date" name="news_date" /> 

Oder, wenn Sie die id mit dem hTML-Helfer hinzufügen möchten:

@Html.EditorFor(model => model.News_Date, new { id = "news_date" }) 

Und dann diese Javascript-Code hinzufügen:

$(document).ready(function() { 
      $("#news_date").datepicker({ dateFormat: 'dd/mm/yy' }); 
}); 

Sie diese zuerst versuchen können, zu überprüfen, ob Sie es die ganze Konfiguration in Ihrem Projekt richtig eingestellt haben. Sie sollten Ihr Problem mit diesen Zeilen lösen.

Nachdem Sie dies auf Ihrer Website arbeiten, lesen Sie über HTML-Helfer und wie Code zu kapseln, so dass Sie dies nicht jedes Mal neu schreiben müssen.

Hoffe es hilft!

Answer 2

Auf dem Views/Shared/EditorTemplates Ordner, den Sie benötigen eine Vorlage für Datetime-Typen zu erstellen, so dass jedes Mal, wenn Sie verwenden @Html.EditorFor MVC-Display, was auch immer Sie auf Ihre Vorlage definieren

Answer 3

Sie können auch die Zeit aus dem Textfeld ausblenden, so dass Sie "08/11/2007" im Gegensatz zu "08/11/2007 00:00:00" sehen.

Fügen Sie zu Ihrer Nachrichtenklasse "[DataType (DataType.Date)]" wie folgt hinzu:

public class News 
{ 
    public int ID { get; set; } 
    public string News_Entry { get; set; } 
    [DataType(DataType.Date)] 
    public DateTime News_Date { get; set; } 
} 

Answer 4

EditorFür vernachlässigt zusätzliche Attribute. Benutze entweder TextBoxFor oder schreibe EditorFor template ...