Question

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

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

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。 DatePicker有一个onSelect事件，当您选择我可以放置重定向代码的日期时会触发该事件。资料来源：JQuery UI datepicker triggered from text link

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");
    });
});

如何使用超链接弹出jQuery Datepicker

2 个答案: