如何在 asp.net mvc 3 中添加日期选择器？答案

【问题标题】：How to add Date Picker In asp.net mvc 3?如何在 asp.net mvc 3 中添加日期选择器？
【发布时间】：2012-01-18 04:47:55
【问题描述】：

在 Asp.net MVC 3 中如何添加和使用 DatePicker？

【问题讨论】：

你自己试过了吗？用谷歌搜索一下。
添加日期选择器与razor无关，即使使用aspx引擎方法也是一样的。

标签： asp.net-mvc asp.net-mvc-3 razor

【解决方案1】：

做这种事情的正确方法是为DateTime类型添加一个EditorTemplate。您在 Views\Shared\EditorTemplates\ 下添加一个用户控件，将@model 设置为DateTime 并让视图显示您想要的任何类型的日期视图/选择器等。

然后，当您使用 @Model.EditorFor() 时，它将正确显示正确的视图并将正确的值绑定到您的模型。

Lord Google 帮我找到： http://www.asp.net/mvc/tutorials/javascript/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4 ( 和
http://www.nickharris.net/2010/08/asp-net-mvc-editor-template-for-jquery-datepicker/

两篇文章都描述了如何添加使用 JqueryUI DateTimePicker 的 EditorTemplate

【讨论】：

【解决方案2】：

<table>
<tr>
<td style="background-color:#FFC0CB;color:#FF6347">@Html.TextBoxFor(model => 
model.Createddt, new { DateTime.Now, id="datepicker"})</td>
</tr>
</table>

<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").datapicker();
});
</script>

【讨论】：

【解决方案3】：

添加日期选择器有很多不同的方法，我无法想象其中任何一种方法与剃须刀一起使用会有很大不同。一个简单的search 产生了this

【讨论】：

【解决方案4】：

您可以创建一个文本框，然后使用 jquery 使其成为日期选择器，这是一段代码。请记住将 jquery 和 jquery UI js 库引用到您的项目中。

    <script>
      $(function() {
        $( "#datepicker" ).datepicker();
      });
    </script>

@Html.TextBox("datepicker")

【讨论】：

【解决方案5】：

创建辅助扩展 现在我们已经创建了一个工作日期选择器，让我们把它放到一个扩展方法中，以便清理 UI 并允许我们在其他地方使用它。在项目的根目录中创建一个名为“UI”的新文件夹，并在我们的新文件夹中创建一个名为“HtmlHelperExtensions.cs”的新类：

在新类中，将以下方法添加到类中（您需要在 System.Web.MVC 和 System.Text 中添加 using 子句）：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.Web.Mvc;

namespace DatePickerHarness.UI
{
    public static class HtmlHelperExtensions
    {

     public static string DatePicker(this HtmlHelper helper, string name, string imageUrl, object date)
        {
            StringBuilder html = new StringBuilder();

            // Build our base input element
            html.Append("<input type=\"text\" id=\"" + name + "\" name=\"" + name + "\"");

            // Model Binding Support
            if (date != null)
            {
                string dateValue = String.Empty;

                if (date is DateTime? && ((DateTime)date) != DateTime.MinValue)
                    dateValue = ((DateTime)date).ToShortDateString();
                else if (date is DateTime && (DateTime)date != DateTime.MinValue)
                    dateValue = ((DateTime)date).ToShortDateString();
                else if (date is string)
                    dateValue = (string)date;

                html.Append(" value=\"" + dateValue + "\"");
            }

            // We're hard-coding the width here, a better option would be to pass in html attributes and reflect through them
            // here ( default to 75px width if no style attributes )
            html.Append(" style=\"width: 75px;\" />");

            // Now we call the datepicker function, passing in our options.  Again, a future enhancement would be to
            // pass in date options as a list of attributes ( min dates, day/month/year formats, etc. )
            html.Append("<script type=\"text/javascript\">$(document).ready(function() { $('#" + name + "').datepicker({ showOn: 'button', buttonImage: '" + imageUrl + "', duration: 0 }); });</script>");

            return html.ToString();
        }
  }
  }

要添加命名空间，请打开您的 web.config（您可以使用“查看”文件夹中的 web.config，或者转到根目录并在那里添加），并将以下内容添加到命名空间元素中：

<add namespace="YourProjectNameGoesHere.UI"/>

现在我们已经有了它，我们可以从我们的视图中访问扩展方法：

现在我们已经能够调用我们的扩展方法，让我们让它更令人兴奋，并将所有内容包装成一个表单，该表单将返回到我们控制器中的一个动作。首先，我们需要将完整的表单添加到前端：

<%= Html.DatePicker("Date", "/Content/images/calendar.gif", this.ViewData["TheDate"]) %>

réferance url

【讨论】：

【解决方案6】：

我创建了一个 UserControl 并在 Views/Shared/EditorTemplates 中将其命名为“DateTime”（DateTime.ascx）添加添加：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%: Html.TextBox("",  String.Format("{0:yyyy-MM-dd}", Model.HasValue ? Model : DateTime.Today), new { @class = "dp"})%>

我的视图看起来像这样：

<div class="editor-field">
        @Html.EditorFor(model => model.ReleaseDate) 
        @Html.ValidationMessageFor(model => model.ReleaseDate)
    </div>

我的脚本如下所示：

<script type="text/javascript">
$(function () {
    $(".dp").datepicker();
});

这些是我添加到视图中的链接（如果你没有它们，你可以使用 Nuget 找到它们并输入“jquery.ui”）：

<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>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js") " type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" type="text/css" rel="Stylesheet"/>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" type="text/css"/ rel="Stylesheet"/>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" type="text/css" rel="Stylesheet"/>

【讨论】：