通过单击没有输入字段的图像来打开JQuery Datepicker [英] Open JQuery Datepicker by clicking on an image w/ no input field

问题描述

我想让用户点击图像时打开JQuery Datepicker。所选日期之后没有输入栏;我只是要通过Ajax将输入的日期保存到服务器。

目前我有这个代码：

 < img src ='someimage.gif'id =datepicker/> 
 
 $（document）.ready（function（）{
 $（＃datepicker）。datepicker（{
 changeMonth：true，
 changeYear： 
}）。click（function（）{$（this）.datepicker（'show'）;}）; 
}）; 
  

但是当我点击图像时，没有任何反应。我也尝试将datepicker（）调用的结果保存到全局变量，然后从图像的onclick（）事件调用datepicker（'show'），但结果相同。

 < input type =hiddenid =dp/> 
  

然后使用buttonImage属性为您的图像，如正常：

  $（＃dp）。datepicker（{
 buttonImage：'../images/icon_star.gif'，
 buttonImageOnly： true，
 changeMonth：true，
 changeYear：true，
 showOn：'both'，
}）; 
  

最初我尝试了一个文本输入字段，然后设置一个 display：none 样式，但这导致日历从浏览器的顶部而不是从用户点击的地方出现。但隐藏的字段按照需要工作。

I want to have the JQuery Datepicker open when the user clicks on an image. There is no input field where the selected date appears afterwards; I'm just going to save the entered date to the server via Ajax.

Currently I have this code:

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

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

But nothing happens when I click on the image. I have also tried saving the result of the datepicker() call to a global var and then calling datepicker('show') from the onclick() event of the image, but same result.

解决方案

Turns out that a simple hidden input field does the job:

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

And then use the buttonImage attribute for your image, like normal:

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

Initially I tried a text input field and then set a display:none style on it, but that caused the calendar to emerge from the top of the browser, rather than from where the user clicked. But the hidden field works as desired.

这篇关于通过单击没有输入字段的图像来打开JQuery Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！