jquery-ui - 带有按钮而不是输入框的jquery ui datepicker

Question

我正在寻找一种通过按钮而不是输入框使用日期选择器的方法。当我单击按钮时，日期选择器将显示为按钮的下拉菜单，单击时会触发一些事件。类似于下图的东西

有什么帮助吗？

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 样式，但这导致日历从浏览器顶部出现，而不是从用户单击的位置出现。但是隐藏字段可以按需要工作。