jquery ui datepicker用按钮而不是输入框

Question

我正在寻找一种方法来使用带有按钮而不是输入框的日期选择器。当我单击按钮时，日期选择器将显示为按钮的下拉菜单，单击时会触发一些事件。 Somethign如下图所示

任何帮助？

Answer 1

如果您使用输入字段和图标（如此示例）：

<input name="Date" id="Date"  type="text" readonly  />
<a href="#" id="Date_icono" ></a>

您可以将日期选择器附加到您的图标（在我的情况下通过CSS在A标签内），如下所示：

$("#Date").datepicker();
  $("#Date_icono").click(function() { 
   $("#Date").datepicker( "show" );
  });

或

事实证明，一个简单的隐藏输入字段可以完成这项工作：

<input type="hidden" id="dp" />

然后使用图像的buttonImage属性，正常情况下：

$("#dp").datepicker({
    buttonImage: '../images/icon_star.gif',
    buttonImageOnly: true,
    changeMonth: true,
    changeYear: true,
    showOn: 'both',
 });

最初我尝试了一个文本输入字段，然后在其上设置了display：none样式，但这导致日历从浏览器顶部出现，而不是从用户单击的位置出现。但隐藏的字段可以按预期工作。