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

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