jquery：通过图像显示/隐藏日期选择器？答案

【问题标题】：jquery: make date picker show/hide via image?jquery：通过图像显示/隐藏日期选择器？
【发布时间】：2010-10-30 16:59:29
【问题描述】：

我想使用日历图像来显示/隐藏 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>

我也试图让它在你选择日期时提交一个表单，我似乎也无法让它工作。

我是不是做错了什么？

谢谢！

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

替换

showOn: 'focus'

与

showOn: 'button'

这将使日期选择器仅在单击按钮时出现，而不是在文本字段获得焦点时出现。

无法告诉您为什么表单提交不起作用。您是否将任何提交事件绑定到可能返回 false 的表单？

由于this 引用了事件处理程序中的输入元素，也许你可以试试这个提交：

this.form.submit();

评论后编辑：看看this example，按钮会自动添加。

我刚刚意识到您有两个单独的电话给datepicker。将两者合二为一可能有助于解决您的事件问题：

$("#datepicker").datepicker({ 
    altField: '#from', 
    altFormat: 'yymmdd', 
    buttonImage: 'datepicker.png', 
    buttonImageOnly: true, 
    defaultDate: <?=getDaysFromToday($_GET['from'])?>, 
    showOn: 'focus'.
    onSelect: function(dateText, inst) {
        $("#myform").submit(); 
    }
});

【讨论】：

谢谢，我试过了，没有运气。我应该手动添加一个按钮吗？还是应该为我添加按钮？文档并没有真正说明。
查看您的示例后，我注意到#datepicker 是有问题的输入文本，我将其作为单独的 div。更改后，日期选择器最初是隐藏的，按钮现在在那里。但是，单击按钮似乎没有做任何事情。我认为以某种方式没有触发任何 jquery 事件，因为我也无法触发任何其他事件。也许这应该是一个新问题。
您的最后一次编辑修复了一切！！我需要结合这两个电话。谢谢！！

【解决方案2】：

对于那些希望将图标放置在输入字段旁边不要太近的人：

http://forum.jquery.com/topic/altering-position-of-datepicker-icon#14737000001522067

.ui-datepicker-trigger {
margin-left : 5px;
vertical-align : top;
}

【讨论】：