jquery：通过图像显示/隐藏日期选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/939914/
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
jquery: make date picker show/hide via image?
提问by JD Isaacks
I want to use an image of a calendar to show/hide the jquery datepicker. Based on the documentation it looks like I need to set buttonImage and buttonImageOnly, which I have. the date picker is working but it is always visible. here is my code:
我想使用日历图像来显示/隐藏 jquery 日期选择器。根据文档，我似乎需要设置我拥有的 buttonImage 和 buttonImageOnly。日期选择器正在工作，但它始终可见。这是我的代码：
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({
altField: '#from',
altFormat: 'yymmdd',
buttonImage: 'datepicker.png',
buttonImageOnly: true,
defaultDate: <?=getDaysFromToday($_GET['from'])?>,
showOn: 'focus'
});
});
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
$("#myform").submit();
}
});
</script>
Also I am trying to make it submit a form when you choose a date, I can't seem to get that to work either.
此外，我试图让它在您选择日期时提交表单，但我似乎也无法让它发挥作用。
Am I doing something wrong?
难道我做错了什么？
Thanks!
谢谢！
回答by Mario Menger
Replace
代替
showOn: 'focus'
with
和
showOn: 'button'
This will make the datepicker appear only when the button is clicked, not when the text field gets the focus.
这将使日期选择器仅在单击按钮时出现，而不是在文本字段获得焦点时出现。
Can't tell you why the form submit doesn't work. Have you bound any submit events to the form that might be returning false?
无法告诉您为什么表单提交不起作用。您是否将任何提交事件绑定到可能返回 false 的表单？
Since thisrefres to the input element inside the event handler, perhaps you can try this for the submit:
由于this涉及事件处理程序中的输入元素，也许您可以尝试提交：
this.form.submit();
Edit after comment: Have a look at this example, the button gets added automatically.
评论后编辑：看看这个例子，按钮会自动添加。
I've just realized you have two separate calls to datepicker. Combining the two into one might help with your event problems:
我刚刚意识到您对datepicker. 将两者合二为一可能有助于解决您的事件问题：
$("#datepicker").datepicker({
altField: '#from',
altFormat: 'yymmdd',
buttonImage: 'datepicker.png',
buttonImageOnly: true,
defaultDate: <?=getDaysFromToday($_GET['from'])?>,
showOn: 'focus'.
onSelect: function(dateText, inst) {
$("#myform").submit();
}
});
回答by testing
For those who are looking to position the icon not too close beside the input field:
对于那些希望将图标放置在输入字段旁边不太近的人：
http://forum.jquery.com/topic/altering-position-of-datepicker-icon#14737000001522067
http://forum.jquery.com/topic/altering-position-of-datepicker-icon#14737000001522067
.ui-datepicker-trigger {
margin-left : 5px;
vertical-align : top;
}
