通过单击没有输入字段的图像打开 JQuery Datepicker
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1112035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open JQuery Datepicker by clicking on an image w/ no input field
提问by ep4169
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.
我希望在用户单击图像时打开 JQuery Datepicker。之后没有出现所选日期的输入字段；我只是打算通过 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.
但是当我单击图像时没有任何反应。我还尝试将 datepicker() 调用的结果保存到全局变量，然后从图像的 onclick() 事件中调用 datepicker('show')，但结果相同。
回答by ep4169
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:
然后像平常一样使用 buttonImage 属性作为您的图像：
$("#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:nonestyle 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.
最初我尝试了一个文本输入字段，然后display:none在其上设置样式，但这导致日历从浏览器顶部出现，而不是从用户单击的位置出现。但隐藏字段按需要工作。
回答by Jose Basilio
The jQuery documentation says that the datePicker needs to be attached to a SPAN or a DIV when it is not associated with an input box. You could do something like this:
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>
回答by Pablius
If you are using an input field and an icon (like this example):
如果您使用输入字段和图标（如本例）：
<input name="hasta" id="Hasta" type="text" readonly />
<a href="#" id="Hasta_icono" ></a>
You can attach the datepicker to your icon (in my case inside the A tag via CSS) like this:
您可以将日期选择器附加到您的图标（在我的情况下，通过 CSS 在 A 标签内），如下所示：
$("#Hasta").datepicker();
$("#Hasta_icono").click(function() {
$("#Hasta").datepicker( "show" );
});
回答by Mohamed Ghr
To change the "..." when the mouse hovers over the calendar icon, You need to add the following in the datepicker options:
要在鼠标悬停在日历图标上时更改“...”，您需要在日期选择器选项中添加以下内容：
showOn: 'button',
buttonText: 'Click to show the calendar',
buttonImageOnly: true,
buttonImage: 'images/cal2.png',
回答by Rahen Rangan
HTML:
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(); });
回答by Jari
Having a hidden input field leads to problems with datepicker dialog positioning (dialog is horizontally centered). You could alter the dialog's margin, but there's a better way.
隐藏输入字段会导致日期选择器对话框定位出现问题（对话框水平居中）。您可以更改对话框的边距，但有更好的方法。
Just create an input field and "hide" it by setting it's opacity to 0 and making it 1px wide. Also position it near (or under) the button, or where ever you want the datepicker to appear.
只需创建一个输入字段并通过将其不透明度设置为 0 并使其宽度为 1px 来“隐藏”它。还将其放置在按钮附近（或下方），或者您希望日期选择器出现的任何位置。
Then attach the datepicker to the "hidden" input field and show it when user presses the button.
然后将日期选择器附加到“隐藏”输入字段并在用户按下按钮时显示它。
HTML:
HTML：
<button id="date-button">Show Calendar</button>
<input type="text" name="date-field" id="date-field" value="">
CSS:
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:
JS：
$(function() {
$('#date-field').datepicker();
$('#date-button').on('click', function() {
$('#date-field').datepicker('show');
});
});
Note: not tested with all browsers.
注意：未在所有浏览器上进行测试。
回答by Kailas
$(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'
});
});
The above code belongs to this link
以上代码属于这个链接
回答by karthikeyan ganesan
<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" );
});
you just add this code for image clicking or any other html tag clicking event. This is done by initiate the datepicker function when we click the trigger.
您只需为图像点击或任何其他 html 标签点击事件添加此代码。这是通过在我们单击触发器时启动日期选择器功能来完成的。
