点击没有input字段的图像打开JQuery Datepicker

我想要在用户单击图像时打开JQuery Datepicker。 没有input字段，select的date之后出现; 我只是将input的date通过Ajax保存到服务器。

目前我有这样的代码：

<img src='someimage.gif' id="datepicker" /> $(document).ready(function() { $("#datepicker").datepicker({ changeMonth: true, changeYear: true, }).click(function() { $(this).datepicker('show'); }); }); 

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

Answer 1

原来，一个简单的隐藏input字段做的工作：

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

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

  $("#dp").datepicker({ buttonImage: '..http://img.dovov.comicon_star.gif', buttonImageOnly: true, changeMonth: true, changeYear: true, showOn: 'both', }); 

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

Answer 2

jQuery文档说datePicker需要连接到一个SPAN或DIV，当它没有与input框关联时。 你可以做这样的事情：

 <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字段和图标（如下例）：

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

您可以将dateselect器附加到您的图标（在我的情况下通过CSS在A标签）像这样：

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

Answer 4

要将鼠标hover在日历图标上时更改“…”，您需要在datepicker选项中添加以下内容：

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

Answer 5

HTML：

 <div class="CalendarBlock"> <input type="hidden"> </div> 

码：

 $CalendarBlock=$('.CalendarBlock'); $CalendarBlock.click(function(){ var $datepicker=$(this).find('input'); datepicker.datepicker({dateFormat: 'mm/dd/yy'}); $datepicker.focus(); }); 

Answer 6

有一个隐藏的input字段导致datepicker对话框定位问题（对话框水平居中）。 你可以改变对话框的边距，但有一个更好的方法。

只需创build一个input字段，并通过将其设置为0并将其设置为1px宽来“隐藏”它。 也将其放在靠近（或下面）button，或任何你想要dateselect器出现。

然后将dateselect器附加到“隐藏”input字段，并在用户按下button时显示它。

HTML：

 <button id="date-button">Show Calendar</button> <input type="text" name="date-field" id="date-field" value=""> 

CSS：

 #date-button { position: absolute; top: 0; left: 0; z-index: 2; height 30px; } #date-field { position: absolute; top: 0; left: 0; z-index: 1; width: 1px; height: 32px; // height of the button + a little margin opacity: 0; } 

JS：

 $(function() { $('#date-field').datepicker(); $('#date-button').on('click', function() { $('#date-field').datepicker('show'); }); }); 

注意：未经过所有浏览器的testing。

Answer 7

 $(function() { $("#datepicker").datepicker({ //showOn: both - datepicker will come clicking the input box as well as the calendar icon //showOn: button - datepicker will come only clicking the calendar icon showOn: 'button', //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png' buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png', buttonImageOnly: true, changeMonth: true, changeYear: true, showAnim: 'slideDown', duration: 'fast', dateFormat: 'dd-mm-yy' }); }); 

上面的代码属于这个链接

Answer 8

 <img src='someimage.gif' id="datepicker" /> <input type="hidden" id="dp" /> $(document).on("click", "#datepicker", function () { $("#dp").datepicker({ dateFormat: 'dd-mm-yy', minDate: 'today'}).datepicker( "show" ); }); 

你只需添加这个代码的图像点击或任何其他的HTML标签点击事件。 这是通过点击触发器时启动datepicker函数来完成的。