如何将 DatePicker 添加到我的 MVC3 C# 站点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11160166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add DatePicker to my MVC3 C# site
提问by Harry
I've been trying to figure out how to do this all afternoon, but can't seem to get a grip on how to get DatePicker to work with my site.
我整个下午都在试图弄清楚如何做到这一点，但似乎无法掌握如何让 DatePicker 与我的网站一起工作。
Also, if possible I would like to remove the Time part of the DateTime, as I'm only interested in the Date the entry gets posted.
另外，如果可能的话，我想删除 DateTime 的时间部分，因为我只对条目发布的日期感兴趣。
I've included the code so far below, I've pretty much removed everything I've attempted so far so it is back to the beginning. I've referenced the JQuery files at the top of _Layout.cshtml which I think is correct.
我已经在下面包含了代码，我已经删除了到目前为止我尝试过的所有内容，所以它又回到了开始。我在 _Layout.cshtml 顶部引用了 JQuery 文件，我认为这是正确的。
I've looked at many guides on the web, but struggled to make much sense of them, although I will keep reading.
我在网上看过很多指南，但很难理解它们，尽管我会继续阅读。
I've added these lines to the top of my _Layout.cshtml (I've also unpacked and copied the JQuery folders to the locations referenced below as well)
我已将这些行添加到我的 _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>
My View code looks like this:
我的视图代码如下所示：
@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>
My Model is here:
我的模型在这里：
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; }
}
}
Many thanks in advance to anyone for helping
非常感谢任何人的帮助
采纳答案by Cacho Santa
Try this first:
先试试这个：
Add your html code without the html helper:
添加没有 html 帮助程序的 html 代码：
<input type="text" id="news_date" name="news_date" />
Or, if you want to add the idwith the Html helper:
或者，如果您想id使用 Html 帮助程序添加：
@Html.EditorFor(model => model.News_Date, new { id = "news_date" } )
And then add this javascript code:
然后添加这个javascript代码：
$(document).ready(function () {
$("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
});
You can try this first to check if you have set it all the configuration in your project correctly. You should solve your problem with those lines.
您可以先尝试此操作，以检查您是否已正确设置项目中的所有配置。你应该用这些行来解决你的问题。
After you get this working in your site, read about html helpers and how to encapsulate code so you do not have to rewrite this everytime.
在您的站点中使用此功能后，请阅读有关 html 帮助程序以及如何封装代码的信息，这样您就不必每次都重写它。
Hope it helps!
希望能帮助到你！
回答by pollirrata
On the Views/Shared/EditorTemplatesfolder you need to create a template for DateTime types, so every time you use @Html.EditorForMVC display whatever you define on your Template
在Views/Shared/EditorTemplates文件夹上，您需要为 DateTime 类型创建一个模板，因此每次使用@Html.EditorForMVC 时都会显示您在模板上定义的任何内容
回答by Gavin
You may also wish to hide the time from the text box so that you see "08/11/2007" as opposed to "08/11/2007 00:00:00".
您可能还希望从文本框中隐藏时间，以便您看到“08/11/2007”而不是“08/11/2007 00:00:00”。
To do this, add "[DataType(DataType.Date)]" to your news class as below;
为此，将“[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; }
}
回答by Alexander
EditorFor neglects extra attributes. Either use TextBoxFor or write EditorFor template...
EditorFor 忽略额外的属性。使用 TextBoxFor 或编写 EditorFor 模板...
