单击没有输入字段的图像打开JQuery Datepicker

Question

我想在用户点击图片时打开JQuery Datepicker.没有输入字段,之后显示所选日期; 我只想通过Ajax将输入的日期保存到服务器.

目前我有这个代码:

<img src='someimage.gif' id="datepicker" />

$(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
        }).click(function() { $(this).datepicker('show'); });
 });

但是当我点击图像时没有任何反应.我还尝试将datepicker()调用的结果保存到全局var,然后从图像的onclick()事件中调用datepicker('show'),但结果相同.

Answer 1

原来一个简单的隐藏输入字段完成工作:

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

然后像往常一样使用图像的buttonImage属性:

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

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

Answer 2

jQuery文档说,当datePicker与输入框没有关联时,它需要连接到SPAN或DIV.你可以这样做:

<img src='someimage.gif' id="datepickerImage" />
<div id="datepicker"></div>

<script type="text/javascript">
 $(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
    })
    .hide()
    .click(function() {
      $(this).hide();
    });

    $("#datepickerImage").click(function() {
       $("#datepicker").show(); 
    });
 });
</script>

Answer 3

如果您使用输入字段和图标(如此示例):

<input name="hasta" id="Hasta"  type="text" readonly  />
<a href="#" id="Hasta_icono" ></a>

您可以将日期选择器附加到您的图标(在我的情况下,通过CSS在A标签内),如下所示:

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

Answer 4

要在鼠标悬停在日历图标上时更改"...",您需要在datepicker选项中添加以下内容:

    showOn: 'button',
    buttonText: 'Click to show the calendar',
    buttonImageOnly: true, 
    buttonImage: 'images/cal2.png',