Question

我无法在单击图像上弹出日期选择器并将所选输入发送到我的文本输入字段。基本上，当用户点击日历图像时，应该出现日期选择器弹出窗口，他们选择一个输入，它出现在文本输入中。此外，如果输入日期然后检查日历，我需要输入文本以在日历上显示正确的日期。这是我的输入和图像部分。

<p>Date: <input type="text" class="screening_01" id="screening_01" maxlength="10" size="10" value="<%=session.getAttribute("screening_01")==null?"":session.getAttribute("screening_01")%>" /></p>
<div id="calender"><img src="/images/calendar.png" /></div>

这是一个有效的日期选择器，但只有在我单击文本输入时才会有效。

$(function() {
    $( "#screening_01" ).datepicker();
});

现在我需要弹出单击日历图像或div时弹出，可能是这样的？（当然没有工作）

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

Answer 1

这是您正在寻找的，使用show方法：

$("#calender").click(function() {
   $("#screening_01").datepicker( "show" );
});

如有疑问，请始终查看API参考： http://api.jqueryui.com/datepicker/#method-show

Answer 2

datepicker已经有一个触发图标图像的选项。

$( "#datepicker" ).datepicker({
      showOn: "both", //image click and focus on input field
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true
    });

Answer 3

使用datepicker的show选项，并在#screening_01

中调用它

$("#calender").click(function() {
  $( "#screening_01" ).datepicker('show');
});

Answer 4

这可能会对你有帮助......

$( "#screening_01" ).datepicker({
  showOn: "button",
  buttonImage: "images/calendar.gif",
  buttonImageOnly: true
});

供参考： http://jqueryui.com/datepicker/#icon-trigger

jquery日历/ datepicker

4 个答案: