如何在创建和编辑视图的 ASP.NET MVC 中应用 jQuery DatePicker答案

【问题标题】：How to apply jQuery DatePicker in ASP.NET MVC in Create and Edit View如何在创建和编辑视图的 ASP.NET MVC 中应用 jQuery DatePicker
【发布时间】：2014-01-02 09:56:00
【问题描述】：

我正在开发一个 ASP.NET MVC 4 应用程序，并且在特定控制器的创建和编辑视图中应用 jQuery DatePicker 时遇到了困难，该控制器有一个字段为“PurchaseDate”，类型为 DateTime。我已经使用数据注释设置了所有日期格式。但它仍然无法按预期在编辑模式下工作。

如果有任何适当的解决方案，请回复。请参考以下代码：

我有一个模型类如下：

[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
public DateTime PurchaseDate { get; set; }

编辑视图如下：

@Html.TextBoxFor(model => model.PurchaseDate, new { @class = "form-control date-picker", value = Model.PurchaseDate.ToString("dd-mm-yyyy") })

我正在应用 jQuery DatePicker，如下所示：

$('.date-picker').datepicker({ rtl: App.isRTL(), autoclose: true });

【问题讨论】：

你好 Devraj，请参考更新后的代码 sn-p 可能对你有帮助的帖子。

标签： jquery asp.net-mvc jquery-ui-datepicker

【解决方案1】：

将你的 jQuery 代码更改为

$('.form-control').datepicker({ rtl: App.isRTL(), autoclose: true });

【讨论】：

你好 Rajesh，我认为 CSS 类没有任何问题，我已经按照你的建议进行了尝试，但它仍然在编辑视图中产生问题。

【解决方案2】：

您在编辑视图中的日期格式与您的模型不匹配。

您的模型有DataFormatString = "{0:MM/dd/yyyy}"，然后您在编辑视图中再次将值格式化为value = Model.PurchaseDate.ToString("dd-mm-yyyy")。

使两种格式相等。

并为您的文本框提供额外的类，如下所示。

@Html.TextBoxFor(model => model.PurchaseDate, new { @class = "form-control date-picker", value = Model.PurchaseDate.ToString("MM/dd/yyyy") })

【讨论】：

非常感谢 Devraj 的帮助，但它仍然无法正常工作。您能否简要介绍一下如何在 ASP.NET MVC 4 应用程序中处理 jQuery DatePicker？

【解决方案3】：

我正在使用 MVC 5，但它几乎也应该在 4 中工作：我有一个模板视图：

@model Nullable<DateTime>    
@{
    if (Model != null)
    {
        DateTime dt = (System.DateTime)Model;
        @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "text" })   
    }
    else
    {
        @Html.TextBox("", String.Format("{0:d}", string.Empty), new { @class = "datefield", type = "text" })    
    }            
}

适用于所有日期字段...对于使 type="text" 成为它与 Chrome 一起使用的唯一方式非常重要（日期 Chrome 将字段保留为空）！！！

然后我有一个 JS 文件（如果您只需要英语，请忘记 lang var）：

$(function () {
    var lang = window.navigator.userLanguage || window.navigator.language;       
    lang = lang.substring(0, 2);
    if (lang === "en")
        lang = "";
    $(".datefield").datepicker({
        changeMonth: true, changeYear: true,
        minDate: "-6M", maxDate: "+1Y +6M +1D",
        showOn: "both", buttonImage: "/Content/themes/base/images/calendar22.gif", buttonImageOnly: true, buttonText: "Kalender",
    });
    $.datepicker.setDefaults($.datepicker.regional[lang]);
  });

在 _Layout.cshtml 中这样调用/引用：

<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.min.js")"
        type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-i18n.min.js")"
        type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DatePickerReady.js")"
        type="text/javascript"></script>

最后你可以在你的视图中调用日期选择器应该使用的所有这些：

<div class="form-group">
    @Html.LabelFor(model => model.Enddate, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Enddate)
        @Html.ValidationMessageFor(model => model.Enddate)
    </div>
</div>

【讨论】：