Question

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

Answer 1

执行此类操作的正确方法是为类型DateTime添加EditorTemplate。您在Views\Shared\EditorTemplates\下添加了一个UserControl，将@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（＆lt;＆lt; newer）
和
http://www.nickharris.net/2010/08/asp-net-mvc-editor-template-for-jquery-datepicker/

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

的EditorTemplate

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

Answer 3

添加日期选择器有很多种不同的方法，我无法想象它们与剃刀一起使用时会有很大的不同。一个简单的search屈服于this

Answer 4

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

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

@Html.TextBox("datepicker")

Answer 5

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

enter image description here

在新类中，将以下方法添加到类中（您需要向System.Web.MVC＆amp; 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（您可以使用“View”文件夹中的web.config，或者转到根目录并将其添加到那里），并将以下内容添加到namespaces元素中：

<add namespace="YourProjectNameGoesHere.UI"/>

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

enter image description here

既然我们有足够的能力来调用我们的扩展方法，那么让我们更加兴奋一点，将所有内容都包装成一个表格，然后回发到我们控制器中的一个动作。首先，我们需要将完整的表单添加到前端：

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

réferance url

Answer 6

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

<%@ 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"/>

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

6 个答案: