jquery - 如何使用超链接弹出 jQuery Datepicker

Question

我正在为移动设备创建一个网站（使用 JQuery Mobile），我需要一个日期选择器，当用户单击超链接时它会打开。当用户选择一个日期时，它将使用日期作为查询字符串中的参数重定向浏览器。

不确定是否可以在http://jsfiddle.net/ Cheers中创建它

Answer 1

这是您想要的日期选择器：http: //jqueryui.com/datepicker/

这是你的代码：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    $(function() {
         $( "#datepicker" ).datepicker();
    });


    function ajaxSubmit(){
         alert('Ajax submission script goes here')   
    };
</script>
<link rel="stylesheet" href="http://code.jquery.com/resources/demos/style.css" />

<p>Date: <input type="text" id="datepicker" onblur='ajaxSubmit();' /></p>

Answer 2

做了一些挖掘，找到了我问题的答案。基本上我必须为 DatePicker 创建一个隐藏的输入字段，因此它不会向用户显示。然后我有一个链接，它使用 javascript 在输入字段上触发日期选择器。DatePicker 有一个 onSelect 事件，当您选择可以放置重定向代码的日期时触发该事件。来源：从文本链接触发的 JQuery UI 日期选择器

HTML：

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

JS：

$(document).ready(function() {
    $("#dp").datepicker({
        onSelect: function(dateText, inst) {
            alert(dateText);
        },
        beforeShow: function (event, ui) {
            var $link = $("#datep");
            ui.dpDiv.offset({
                top: $link.offset().top + 10,
                left: $link.offset().left + 10
            });
        }
    });

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