通过单击带有无输入字段的图像打开JQuery Datepicker

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

目前我有这样的代码：

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

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

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

来源

2009-07-10 ep4169

112

原来，一个简单的隐藏的输入字段做这项工作：

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

然后使用按钮画面属性为您的形象，像正常：

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

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

来源

2009-07-14 18:42:50 ep4169

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>

来源

2009-07-10 21:39:03

这有效，但奇怪的是我失去了这个月的一些功能。例如，我没有获得滚动打开动画效果。更重要的是，当我点击外部日历时，日历不会消失。 – ep4169 2009-07-10 22:32:52

另外，将click（）方法添加到#datepicker的目的是什么？另外，我的意思是“方法”，而不是“每月”。在大脑上获得日历！ – ep4169 2009-07-10 22:40:59

将click（）方法添加到#datepicker的原因是使其隐藏，否则它将保持可见。请记住，标准行为仅在日历与文本框关联时才有效。当您将鼠标移离日历时，您可能会添加一个.blur（）处理程序以隐藏它。 – 2009-07-10 23:31:19

HTML：

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

CODE：

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

来源

2009-12-22 22:59:05

如果您使用的是输入栏和图标（如本示例）：

<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-27 18:03:36 Pablius

要更改“...”当鼠标悬停在日历图标，您需要添加下面的日期选择器选项：

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

来源

2011-03-02 06:59:45

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

上面的代码属于this link

来源

2014-04-18 05:07:38 Kailas

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

只需创建一个输入字段，并通过将其设置为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-12 08:36:51 Jari

<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-10 20:04:49

通过单击带有无输入字段的图像打开JQuery Datepicker

回答

相关问题