Jak dodać DatePicker do mojej witryny MVC3 C#

Question

Próbowałem dowiedzieć się, jak to zrobić przez całe popołudnie, ale nie mogę się pozbyć sposobu, w jaki DatePicker będzie działał z moją witryną.

Ponadto, jeśli to możliwe, chciałbym usunąć część czasu z DateTime, ponieważ interesuje mnie tylko data opublikowania wpisu.

Do tej pory umieściłem kod poniżej, prawie wszystko usunąłem, więc próbowałem wrócić do początku. Odwoływałem się do plików JQuery u góry _Layout.cshtml, które uważam za poprawne.

Przyjrzałem się wielu przewodnikom w Internecie, ale starałem się je zrozumieć, chociaż będę je czytał.

Dodałem te linie na początku mojego _Layout.cshtml (mam również rozpakowane i skopiowane foldery jQuery miejscach odwołuje poniżej, jak również)

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

moim zdaniem kod wygląda następująco :

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

mój model jest tutaj:

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

Dziękujemy z wyprzedzeniem, aby ktokolwiek fo r pomagając

Answer 1

Spróbuj najpierw:

Dodaj swój kod HTML bez pomocnika html:

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

Albo, jeśli chcesz dodać id z pomocnika hTML:

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

a następnie dodać ten kod javascript:

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

można spróbować to najpierw sprawdzić, czy ustawiono go cały konfiguracji w projekcie poprawnie. Powinieneś rozwiązać swój problem z tymi liniami.

Po uruchomieniu tego działania w swojej witrynie, przeczytaj o pomocnikach html i sposobie enkapsulacji kodu, aby nie musieć przepisywać tego za każdym razem.

Mam nadzieję, że pomoże!

Answer 2

W folderze Views/Shared/EditorTemplates trzeba utworzyć szablon dla typów DateTime, więc za każdym razem użyć @Html.EditorFor MVC wyświetlacz cokolwiek określić na szablonie

Answer 3

Możesz również chcieć ukryć czas w polu tekstowym, aby zobaczyć "08/11/2007" w przeciwieństwie do "08/11/2007 00:00:00".

Aby to zrobić, dodaj "[DataType (DataType.Date)]" do swojej klasy wiadomości, jak poniżej;

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

EdytorNie zaniedbuje dodatkowych atrybutów. Użyj TextBoxFor lub napisz EditorFor ...