如何触发 jQuery UI DatePicker onclick？

Posted 2023-05-07

【中文标题】如何触发 jQuery UI DatePicker onclick？

【英文标题】：How to fire jQuery UI DatePicker onclick?

【发布时间】：2012-03-19 12:54:14

【问题描述】：

DatePicker 的标准代码是：

<script>
    $(function() 
       $( "#datepicker" ).datepicker();
    );
</script>
<p>Date: <input type="text" id="datepicker"></p>

如何从内联 html 启动 datepicker onclick 事件，我的意思是：

<input ... onclick="" >

并且没有单独的 JS 代码？

我试过了：

<p>Date: <input type="text" id="datepicker" onclick="$(function() $('#datepicker').datepicker(););"></p>

但它只在第二次点击时起作用。

如何让它在第一次点击时起作用？

【问题讨论】：

这里是如何做到这一点的答案***.com/a/1127215/1078487

谢谢。我刚刚更新了我的 q: How to launch datepicker onclick event from inline html

首先不是一个好主意，不可能有任何理由必须是内联 onclick，页面中没有其他日期选择器代码

【参考方案1】：

<p>Date: <input type="text" id="dp" onclick="$('#dp').datepicker();$('#dp').datepicker('show');"></p>​

这个工作有机会吗？

我不是专家，但我相信您必须单击它两次，因为第一次单击只是将它初始化为日期选择器。在这个初始化之后，它的行为就像一个普通的日期选择器，不管 onclick。

【讨论】：

谢谢！那行得通！来自 docs：datepicker("show") - 调用之前附加的日期选择器。所以 "$('#dp').datepicker()" - 初始化；

谢谢！那行得通！来自 docs：datepicker("show") - 调用之前附加的日期选择器。 1. 所以 "$('#dp').datepicker()" - 初始化； 2. $('#dp').datepicker('show'); - 强制显示日期选择器。对吗？

是的，它就是这么做的。我认为这不是最佳实践，并且根据您的程序的工作方式，您可能想查看 jQuery 中的 .live 函数？无论如何很高兴它有所帮助。

【参考方案2】：

创建日期选择器后，这样打开它：

 $('#datepicker').datepicker('show')

转到 datepicker API 文档查看方法选项卡，它就在那里

【讨论】：

正如您在 q 中看到的那样：我知道如何将它与单独的 js 代码一起使用。我的目标是使用内联 onlclick="" 事件执行。

【参考方案3】：

试试这个代码：

<script>
$(function() 
    $("#datepic").datepicker( showOn: 'button',buttonImage: 'image/calendar.gif');

);
</script>

<input type="text" id="datepic" /> 

【参考方案4】：

喜欢这个吗？

http://jsfiddle.net/tZXjR/

【讨论】：

谢谢。我刚刚更新了我的 q: How to launch datepicker onclick event from inline html