Javascript 单击链接时，如何在覆盖中切换日历或日期选择器？

我试图将jQuery附加到超链接，而不是传统的

input

元素。我知道这已经被讨论过了，这导致了我的实施：

$(document).ready(function()
{
  var picker_link_id = "datepicker_link"
  var picker_div_id  = "datepicker"

  var picker_div = $("#" + picker_div_id)

  // initialize the datepicker
  picker_div.datepicker({
    onSelect: 
      function(dateText, picker) {
        picker_div.hide();
        // custom work
      }

  });

  // position & toggle the datepicker on link click
  $("#" + picker_link_id).click(function() {
    var $this = $(this)

    // position the datepicker
    picker_div.css('position', 'absolute');
    picker_div.css('left', $this.position().left - (picker_div.width() - $this.width()));

    picker_div.toggle()

    return false;
  });

  // pressing ESC or clicking outside the datepicker should close it
  $(document)
    .bind("keypress", function(e) {
      if ( e.keyCode == 27 )
        picker_div.hide();
    })
    .bind("mousedown", function(e) {
      if ( e.target.id == $("#" + picker_link_id)[0].id )
        return;

        if ( e.target.id != picker_div_id  && $(e.target).parents('#' + picker_div_id).length == 0 )
            picker_div.hide();
    });
});

在我看来，我有以下HTML：

<a href="#" id="datepicker_link">September 26, 2011</a>             
<div id="datepicker"></div>

---

尽管上述方法有效，但我似乎正在创建一些jQuery逻辑。有更好的方法吗？

一种替代方法是使用

输入

元素，而不是

div

元素，并将输入元素放置在屏幕看不见的地方。然后您将能够使用

.datepicker（'show'）

和

.datepicker（'hide'）

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

然后，可以使用css规则定位datepicker div，如以下规则：

#ui-datepicker-div {
    top: 50px !important;
    left: 50px !important;
}

注意

！重要信息

需要使用关键字，以有效覆盖动态位置

---

这里有一个例子：.

我不明白为什么你要在点击锚后定位日期选择器……你不能简单地保留

picker\u div.toggle（）

语句吗？@WilliamNiu，我定位

picker\u div

给它一种“覆盖”的感觉。如果我只是切换它，那么当日期选择器变为可见并将其他元素推开时。这是我尝试的第一件事之一，但当日期选择器连接到div时，它似乎不起作用。不过，我会再次尝试以保持理智。。。