2

我正在尝试设置我的 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，那么它似乎会开始正常工作。

任何帮助是极大的赞赏。

4

3 回答 3

9

所以这是一个错误。您必须在隐藏输入之后添加一个块级元素：

HTML：

<ul>
    <li><a href="#" id="datep">Test</a>
        <input type="hidden" id="dp" />
        <div></div>
    </li>
</ul>​

示例：http: //jsfiddle.net/andrewwhitaker/LE2CG/1/

于 2012-08-30T23:32:19.280 回答
3

另一个带有隐藏文本的版本：http: //jsfiddle.net/sKXJt/ 工作演示 http://jsfiddle.net/BhqmY/

这将有助于隐藏文本框：

希望它会有所帮助，因为:)我不确定是否:)投反对票，请在此处查看带有隐藏文本的版本：http: //jsfiddle.net/sKXJt/

代码

$(document).ready(function() {
    $("#dp").datepicker({
        onSelect: function(dateText, inst) {
            alert(dateText);
        },
    });

    $('#datep').click(function() {
        $('#dp').datepicker('show');
    });



});​

工作形象

在此处输入图像描述

于 2012-08-30T23:24:58.307 回答
0

由于我在整个项目中都在使用它，因此我创建了一个紧凑的 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 回调。

于 2018-05-12T18:56:58.973 回答