Come aggiungere DatePicker al mio sito MVC3 C#

Question

Ho cercato di capire come farlo tutto il pomeriggio, ma non riesco a capire come far funzionare DatePicker con il mio sito.

Inoltre, se possibile, desidero rimuovere la parte relativa all'ora del DateTime, poiché sono interessato solo alla data in cui viene inserita la voce.

Ho incluso il codice di seguito, ho praticamente rimosso tutto ciò che ho tentato finora, quindi è tornato all'inizio. Ho fatto riferimento ai file JQuery nella parte superiore di _Layout.cshtml che ritengo sia corretto.

Ho guardato molte guide sul web, ma ho faticato a dare molto senso a loro, anche se continuerò a leggere.

ho aggiunto queste righe per la parte superiore del mio _Layout.cshtml (ho anche decompressi e copiati le cartelle jQuery per le posizioni di riferimento sotto così)

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

Il mio codice View si presenta così :

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

Il mio modello è qui:

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

Molte grazie in anticipo a chiunque fo r aiutare

Answer 1

Prova questa prima:

aggiungere il codice html senza l'aiuto html:

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

Oppure, se si desidera aggiungere il id con l'helper HTML:

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

e quindi aggiungere il codice javascript:

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

Si può provare questo prima di verificare se è stato impostato tutta la configurazione nel progetto in modo corretto. Dovresti risolvere il tuo problema con quelle linee.

Dopo aver funzionato nel tuo sito, leggi informazioni sugli helper HTML e su come incapsulare il codice in modo da non doverlo riscrivere ogni volta.

Spero che aiuti!

Answer 2

Sulla cartella Views/Shared/EditorTemplates è necessario creare un modello per i tipi DateTime, così ogni volta che si utilizza @Html.EditorFor visualizzazione MVC che hai inserito come sul modello di

Answer 3

Si potrebbe anche voler nascondere l'ora dalla casella di testo in modo da visualizzare "08/11/2007" anziché "08/11/2007 00:00:00".

Per fare ciò, aggiungere "[DataType (DataType.Date)]" al proprio corso di notizie come di seguito;

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

Editor Per trascurare gli attributi aggiuntivi. Utilizzare TextBoxFor o scrivere il modello EditorFor ...