从文本链接触发的 JQuery UI 日期选择器
Posted
技术标签:
【中文标题】从文本链接触发的 JQuery UI 日期选择器【英文标题】：JQuery UI datepicker triggered from text link 【发布时间】：2012-08-25 18:24:12 【问题描述】：我正在尝试设置我的 css 菜单，以便其中一个文本链接触发日期选择器日历打开。我已将所有内容简化为下面的代码。我遇到的问题是下面的代码不起作用，但是当我删除 ul, li 标签时它开始工作。
我正在使用 1.8.0 JQuery 和 1.8.23 JQuery UI。
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("#dp").datepicker(
onSelect: function(dateText, inst)
alert(dateText);
,
);
$("#datep").click(function()
$("#dp").datepicker("show");
);
);
</script>
</head>
<body>
<ul>
<li><a href="#" id="datep">Test</a><input type="hidden" id="dp" /></li>
</ul>
</body>
</html>
我注意到了一些奇怪的事情。如果我在 ul 下移动输入，它可以工作，但在几次点击后会出现错误，但如果我在该输入下添加空 div，那么它似乎会开始正常工作。
非常感谢任何帮助。
【问题讨论】：
为什么要为日期选择器使用隐藏的输入元素？使用普通文本输入并使用 CSS 将其隐藏（显示：无）。 两者产生相同的结果。 在我看来像一个 jQueryUI 错误 正如@Maksim Vi 下面所说的使用可见性：隐藏；和宽度：0；边框：无；在显示：无的地方工作；不是用于文本输入。 【参考方案1】：所以这是一个错误。您必须在隐藏输入之后添加一个块级元素：
HTML：
<ul>
<li><a href="#" id="datep">Test</a>
<input type="hidden" id="dp" />
<div></div>
</li>
</ul>
示例： http://jsfiddle.net/andrewwhitaker/LE2CG/1/
【讨论】：
将其更改为type='text' 无济于事。在小提琴中尝试一下
input 在您看来是隐藏的吗？那是提问者的要求，“工作演示”不满足。
我明白你的意思。不必在这里成为混蛋，您可以在评论中向我们解释，将display:none 样式应用于#dp 将破坏日期选择器。 visibility:hidden; 工作正常，width:0;border:none;
@MaksimVi.：我的评论不是很好，我很抱歉:-/。感谢您的评论
okies :) 无论如何我都会支持你:) 哈哈，你们俩都非常正确:)【参考方案2】：
另一个版本带有隐藏文本： http://jsfiddle.net/sKXJt/ 工作演示 http://jsfiddle.net/BhqmY/
这将有助于隐藏文本框：
http://forum.jquery.com/topic/attaching-datepicker-to-an-icon-for-a-hidden-input-field
Open JQuery Datepicker by clicking on an image w/ no input field
希望它对事业有所帮助 :) 我不确定是否反对 :) 任何人都可以在此处查看带有隐藏文本的版本：http://jsfiddle.net/sKXJt/
代码
$(document).ready(function()
$("#dp").datepicker(
onSelect: function(dateText, inst)
alert(dateText);
,
);
$('#datep').click(function()
$('#dp').datepicker('show');
);
);
工作图像
【讨论】：
...这有什么帮助？尝试隐藏input（这是用户的要求）
@AndrewWhitaker 呵呵，很酷，你投了反对票，因为 :)cooleos forum.jquery.com/topic/…【参考方案3】：
由于我在整个项目中都在使用它，因此我创建了一个紧凑的 jQuery 插件来执行此操作，并决定分享。
JSFiddle：https://jsfiddle.net/yahermann/xyjhyqma/
HTML：
<span class="some-datepicker-class">
<a href="(some link)" data-date-param="(some date param)">(some initial date)</a>
</span>
JAVASCRIPT：
$('span.some-datepicker-class').datepicker_link(); // see jsfiddle for options
默认的 onSelect 处理程序采用初始 HTML 中设置的可选链接和日期参数。如果两者都提供，则在选择新日期后，插件将加载提供的链接并将所选日期作为值包含到提供的参数中。示例：
<a href="http://example.com" data-date-param="mydate">2018-05-05</a>
将显示初始日期 2018-05-05。选择新日期后，插件将加载以下页面：http://example.com?mydate=(new_date)
如果不需要此功能，只需设置 href="#" 和/或提供您自己的 onSelect 回调。
【讨论】：
以上是关于从文本链接触发的 JQuery UI 日期选择器的主要内容，如果未能解决你的问题，请参考以下文章
如何从 DatePicker ui jquery 中删除时间