Question

我有一个例子，当焦点在文本框上时，会弹出一个日历。

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jqueryui/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="js/jqueryui/jquery-ui.css" />
    <script type="text/javascript">
    $(function () {
        $("#<%= txtDate.ClientID %>").datepicker({ dateFormat: 'yy-mm-dd' });
    });
</script>

<asp:TextBox ID="txtDate" runat="server" Text="please select date" OnTextChanged="txtDate_TextChanged" AutoPostBack="true"/>

以上示例有效。但现在我想使用图像按钮弹出日历。所以代码变成了：

    <script type="text/javascript">
    $(function () {
        $("#<%= txtDate.ClientID %>").datepicker({ dateFormat: 'yy-mm-dd' });
        $("#<%= ImageOrderTime.ClientID %>").datepicker({ dateFormat: 'yy-mm-dd' });
    });
</script>

<asp:TextBox ID="txtDate" runat="server" Text="please select date" OnTextChanged="txtDate_TextChanged" AutoPostBack="true"/>
<asp:ImageButton Id="ImageOrderTime" ImageUrl="images/OrderTime.png" runat="server" AutoPostBack="true"/>

但是当我点击图片按钮时，日历不会显示。这有什么问题？感谢。

PS：以下是 datepicker 的定义：

 e.fn.datepicker = function(t) {
    if (!this.length) return this;
    e.datepicker.initialized || (e(document).mousedown(e.datepicker._checkExternalClick), e.datepicker.initialized = !0),
    0 === e("#" + e.datepicker._mainDivId).length && e("body").append(e.datepicker.dpDiv);
    var i = Array.prototype.slice.call(arguments, 1);
    return "string" != typeof t || "isDisabled" !== t && "getDate" !== t && "widget" !== t ? "option" === t && 2 === arguments.length && "string" == typeof arguments[1] ? e.datepicker["_" + t + "Datepicker"].apply(e.datepicker, [this[0]].concat(i)) : this.each(function() {
        "string" == typeof t ? e.datepicker["_" + t + "Datepicker"].apply(e.datepicker, [this].concat(i)) : e.datepicker._attachDatepicker(this, t)
    }) : e.datepicker["_" + t + "Datepicker"].apply(e.datepicker, [this[0]].concat(i))
},
e.datepicker = new n,
e.datepicker.initialized = !1,
e.datepicker.uuid = (new Date).getTime(),
e.datepicker.version = "1.11.4",
e.datepicker,

我是JS / Jquery的新手。不确定我是否提供了足够的信息，而且我也不知道为什么会弹出日历。请告诉我是否需要提供其他代码。

Answer 1

无需使用ImageButton。请删除它并使用下面的代码

$(function() {
    $("#<%= txtDate.ClientID %>").datepicker({
        showOn: 'button',
        buttonImage: 'images/OrderTime.png',
        buttonImageOnly: true,
        buttonText: 'Select date',
        dateFormat: 'yy-mm-dd'
    });
});

文档：https://jqueryui.com/datepicker/#icon-trigger

Answer 2

datepicker不适用于img元素。

您可以执行以下操作，点击图片上的日历：

$("#<%= ImageOrderTime.ClientID %>").click(function(event){
    $("#<%= txtDate.ClientID %>").click();
})

像这样在点击图片时显示日历。

如何通过图像按钮触发日历弹出？

2 个答案: