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

Posted 2023-05-07

【中文标题】如何将 DatePicker 添加到我的 MVC3 C# 站点

【英文标题】：How to add DatePicker to my MVC3 C# site

【发布时间】：2012-06-24 23:40:54

【问题描述】：

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

另外，如果可能的话，我想删除 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; 
    

非常感谢任何人的帮助

【参考方案1】：

先试试这个：

在没有 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 帮助程序以及如何封装代码的信息，这样您就不必每次都重写。

希望对你有帮助！

【讨论】：

非常感谢 Cacho，这部分正在工作，我有一个普通的旧文本框，当我点击它时，DatePicker UI 会成功弹出。

太棒了@Harry！我认为你应该考虑投票给你最喜欢的答案，并选择作为你问题的答案，它不需要是我的答案，选择最好的......

抱歉，如果您不介意，可以再提供一点帮助吗？如何在 View <div class="editor-field"> @Html.EditorFor(model => model.News_Date) @Html.ValidationMessageFor(model => model.News_Date) </div> 中重写此位，以便可以使用 DatePicker 引用 TextBox？

检查EditorFor重载，应该是这样的：@Html.EditorFor(model => model.News_Date, new object id = "news_date" ) 因为你需要添加一个html id到你的元素。

@Harry，我现在已经更新了我的答案，你可以试试，让我知道它是否有效？

【参考方案2】：

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

【参考方案3】：

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

【参考方案4】：

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