单击链接时，如何在叠加层中切换日历或日期选择器？

Question

我正在尝试将 jQuery datepicker 附加到超链接而不是传统的 input 元素。我知道这已经被讨论过 here 和 there 这导致我实现了这个：

$(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 逻辑。有没有更好的方法来做到这一点？

Answer 1

另一种方法是使用input 元素而不是div 元素，并将输入元素放置在屏幕视线之外。然后您将能够使用.datepicker('show') 和.datepicker('hide')。

然后就可以用css规则定位datepicker div了，比如下面这个：

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

注意需要使用!important 关键字，以有效地覆盖动态位置。

在此处查看示例：http://jsfiddle.net/william/VCQsk/。

Answer 2

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