Question

我在ASP.NET MVC应用程序中使用jQuery DatePicker控件。

我创建了一个名为DateTime.ascx的控件，这样每当我调用Html.TextBoxFor（）方法传递一个DateTime类型的字段时，这个控件就会起作用，并且会渲染一个textbox + datepicker，覆盖标准功能它只产生一个文本框。

这是控件：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%=Html.TextBox("", 
    (Model.HasValue ? Model.Value.ToString("MM/dd/yyyy") : DateTime.Today.ToShortDateString()), 
    new { @class = "UseDatePicker" } )%>

以下是一个示例电话：

<%: Html.EditorFor(model => model.Project.IssueDate)%>

现在，我还在母版页上包含一个名为DatePickerConfig.js的脚本，它可以配置datepicker。这是：

$(document).ready(function () {
    $(".UseDatePicker").live('click', function () {
        $(this).datepicker('destroy').datepicker({
            showOn: "both",
            buttonImage: "../../Content/calendar.gif",
        buttonImageOnly: true,
            changeMonth: true,
            changeYear: true
        }).focus();
    });
});

现在，我的问题是：当页面加载时，只会出现一个文本框来编辑日期时间字段。当我单击文本框时，日历会按预期弹出，同时显示按钮图像。我想要的是，只要页面加载，就会在用户开始与控件交互之前显示buttonn图像。

感谢。

Answer 1

问题是你没有绑定datepicker，直到你点击文本框，所以在加载之前没有要绑定的按钮。你应该只绑定datepicker，你有没有理由解除绑定并重新点击每个按钮？根据你目前的解释，这会更有意义：

$(document).ready(function () {
    $(".UseDatePicker").each(function(i) {
        $(this).datepicker({
            showOn: "both",
            buttonImage: "../../Content/calendar.gif",
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true
        });
    });
});

这将遍历期望日期选择器的每个字段，并将选择器绑定到该文本框。

只有在单击文本框后才会显示JQuery DatePicker图标

1 个答案: