jquery 日历/日期选择器

Posted 2023-05-07

【中文标题】jquery 日历/日期选择器

【英文标题】：jquery calender / datepicker

【发布时间】：2013-03-30 22:03:49

【问题描述】：

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

<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(); 
    );

【参考方案1】：

这就是您要查找的内容，使用 show 方法：

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

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

【讨论】：

唯一的事情是我相信他的 datepicker id 是screening_01

@RickCalder 注意到，改变了

感谢您的回复。我很快就会在这里试试这个！

伙计，你们让这看起来很简单，我仍然是一个入门程序员，我现在正在学习 c#，但稍后会使用 javascript。

【参考方案2】：

使用日期选择器的show选项并在#screening_01中调用它

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

【参考方案3】：

也许这会对你有所帮助......

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

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

【参考方案4】：

日期选择器已经有一个在图标图像上触发的选项。

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