如何将DatePicker添加到我的MVC3 C#站点

时间:2012-06-22 16:17:36

标签: c# asp.net-mvc-3 jquery-ui razor datepicker

我一直试图弄清楚如何在整个下午这样做,但似乎无法掌握如何让DatePicker与我的网站一起工作。

另外,如果可能的话,我想删除DateTime的Time部分,因为我只对条目发布的日期感兴趣。

到目前为止,我已经包含了代码,我已经删除了迄今为止我尝试过的所有内容,所以它已经回到了开头。我在_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; }
    }
}

非常感谢任何人提供帮助

4 个答案:

答案 0 :(得分:13)

首先尝试:

添加你的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帮助程序以及如何封装代码的信息,这样您就不必每次都重写它。

希望它有所帮助!

答案 1 :(得分:1)

Views/Shared/EditorTemplates文件夹上,您需要为DateTime类型创建模板,因此每次使用@Html.EditorFor MVC显示您在模板上定义的内容

答案 2 :(得分:0)

您可能还希望隐藏文本框中的时间,以便您看到“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; }
}

答案 3 :(得分:0)

EditorFor忽略了额外的属性。使用TextBoxFor或编写EditorFor模板......