JQuery DatePicker 图标仅在单击文本框后出现

发布于 2024-10-07 07:43:23 字数 1139 浏览 1 评论 0原文

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

我创建了一个名为 DateTime.ascx 的控件，这样每当我调用 Html.TextBoxFor() 方法并向其传递 DateTime 类型的字段时，该控件就会发挥作用，并呈现一个文本框+日期选择器，从而覆盖仅生成的标准功能一个文本框。

这是控件：

<%@ 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 的脚本，该脚本用于配置日期选择器。现在，我的问题是

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

：当页面加载时，仅出现一个用于编辑日期时间字段的文本框。当我单击文本框时，日历会按预期弹出，同时会出现按钮图像。我希望按钮图像在页面加载后、用户开始与控件交互之前就可见。

谢谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月亮邮递员 2024-10-14 07:43:23

问题是，在单击文本框之前，您不会绑定日期选择器，因此在加载之前没有可绑定的按钮。您应该只绑定日期选择器，是否有理由在每次单击按钮时取消绑定并重新绑定？根据您当前的解释，这会更有意义：

$(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.

回复收藏 0 原文

~没有更多了~