如何將DatePicker添加到我的MVC3 C＃網站

我一直在試圖弄清楚如何在整個下午都這樣做，但似乎無法控制如何讓DatePicker與我的網站一起工作。如何將DatePicker添加到我的MVC3 C＃網站

另外，如果可能的話，我想刪除DateTime的時間部分，因爲我只對日期條目發佈感興趣。

我已經包含了下面的代碼，我幾乎刪除了我迄今爲止嘗試的所有內容，所以它回到了開頭。我引用了_Layout.cshtml頂部的JQuery文件，我認爲這是正確的。

我已經看過很多網絡上的指南，但努力使他們很有意義，雖然我會繼續閱讀。

我已經添加了這些行我_Layout.cshtml的頂部（我也將解壓縮並複製JQuery的文件夾下面還有所引用的位置）

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

我的視圖代碼看起來是這樣的：

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

我的模型是在這裏：

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

非常感謝事先向任何人FO [R幫助

來源

2012-06-22 Harry

請先嚐試：

添加HTML代碼沒有HTML幫助：

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

或者，如果你想用HTML輔助添加id：

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

然後添加這段JavaScript代碼：

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

你可以試試這個首先要檢查是否已正確設置它的所有配置在您的項目。你應該用這些線解決你的問題。

當你在你的網站上得到這個工作後，閱讀關於html helpers以及如何封裝代碼，所以你不必每次重寫。

希望它有幫助！

來源

2012-06-22 16:32:34

非常感謝Cacho，這部分工作，我有一個普通的舊文本框，當我點擊它DatePicker UI彈出成功。 – Harry

很棒@哈利！我認爲你應該考慮提高你最喜歡的答案，並選擇作爲你的問題的答案，它不需要是我的答案，選擇最好的答案... –

對不起，如果你不心神？如何在視圖'

@Html.EditorFor(model => model.News_Date) @Html.ValidationMessageFor(model => model.News_Date)

'中重寫此位，以便我可以使用DatePicker引用TextBox？ – Harry

在您需要創建的DateTime類型模板的Views/Shared/EditorTemplates文件夾，所以每次使用@Html.EditorFor無論你在你的模板定義MVC顯示

來源

2012-06-22 16:26:56 pollirrata

您也可能希望從文本框中隱藏時間，以便您看到「08/11/2007」而不是「08/11/2007 00:00:00」。

爲此，請向您的新聞類添加「[DataType（DataType.Date）]」，如下所示;

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

來源

2012-09-18 08:37:17 Gavin

EditorFor忽略額外的屬性。無論是使用TextBoxFor或寫EditorFor模板...

來源

2014-03-25 10:32:34 Alexander

如何將DatePicker添加到我的MVC3 C＃網站

回答

相關問題