只有在单击文本框后才会显示JQuery DatePicker图标(JQuery DatePicker icon only appears after clicking on textbox)

我在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图像就可见。

谢谢。

I am using the jQuery DatePicker control in an ASP.NET MVC application.

I created a control called DateTime.ascx, so that whenever I call the Html.TextBoxFor() method passing it a field of type DateTime, this control comes into play, and a textbox+datepicker is rendered, overriding the standard functionality which produces just a textbox.

This is the control:

<%@ 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" } )%>

And here is an example call:

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

Now, I also include on the master page a script called DatePickerConfig.js which, well, configures the datepicker. Here it is:

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

Now, my problem: when the page loads, only a text box appears for editing the datetime field. When I click on the textbox, the calendar pops out as expected, and at the same time the button image appears. What I would like is for the buttonn image to be visible as soon as the page loads, and before the user starts to interact with the control.

Thanks.

最满意答案

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

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

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

The problem is you aren't binding the datepicker until you click on the textbox, so there is no button to bind until that loads. You should just bind the datepicker, Is there a reason you unbind and rebind on every button click? Per your current explanation, this would make more sense:

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

This will go through each field expecting a datepicker and bind the picker to that textbox.

更多推荐