71

我想在用户单击图像时打开 JQuery Datepicker。之后没有出现所选日期的输入字段；我只是要通过 Ajax 将输入的日期保存到服务器。

目前我有这个代码：

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

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

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

4

8 回答 8

118

事实证明，一个简单的隐藏输入字段可以完成这项工作：

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

然后像往常一样为您的图像使用 buttonImage 属性：

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

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

JSFiddle

于 2009-07-14T18:42:50.033 回答
24

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>

JSFiddle

于 2009-07-10T21:39:03.483 回答
23

如果您使用输入字段和图标（如本例）：

<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" );
  });
于 2010-03-27T18:03:36.940 回答
8

要在鼠标悬停在日历图标上时更改“...”，您需要在日期选择器选项中添加以下内容：

    showOn: 'button',
    buttonText: 'Click to show the calendar',
    buttonImageOnly: true, 
    buttonImage: 'images/cal2.png',
于 2011-03-02T06:59:45.090 回答
3

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(); });
于 2009-12-22T22:59:05.173 回答
2

隐藏输入字段会导致日期选择器对话框定位出现问题（对话框水平居中）。您可以更改对话框的边距，但有更好的方法。

只需创建一个输入字段并通过将其不透明度设置为 0 并将其设置为 1px 宽来“隐藏”它。还可以将其放置在按钮附近（或下方），或者您希望日期选择器出现的任何位置。

然后将日期选择器附加到“隐藏”输入字段并在用户按下按钮时显示它。

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');
   });
});

注意：未在所有浏览器上测试。

于 2014-12-12T08:36:51.517 回答
1 
$(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'
  });
});

上面的代码属于这个链接

于 2014-04-18T05:07:38.567 回答
0 
<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 函数来完成的。

于 2017-02-10T20:04:49.333 回答