JQuery UI日期选择器：使用链接触发日期选择器

Question

我正在使用JQuery的UI日期选择器: http://jqueryui.com/demos/datepicker/

已在此处实现：

http://www.clients.eirestudio.net/old/

我想使用链接作为触发器，但无法使其工作。

这是我的代码：

// JQuery UI
$("#datepicker").datepicker({
      changeMonth: true,
      changeYear: true,
      maxDate: '0m 0d',
      minDate: new Date(2000, 1 - 1, 1),
      dateFormat: 'dd-mm-yy'
});

<p class="clearfix hidden">
    <input id="" class="input float datepicker" type="input" name="" value="" />
    <a class="calendar ui-icon ui-icon-calendar">Date</a>

    <span class="mid-info">To</span>
    <input id="" class="input datepicker" type="input" name="" value="" />
    <a class="calendar" href="#">Date</a>
</p>

有什么想法吗？

- Keith Donegan

Answer 1

你可以像我在这个演示中所做的那样操作。

HTML：

<a href="#" id="toggleDP">Toggle</a>

JS：

var $dp = $("<input type='text' />").hide().datepicker({
    onSelect: function(dateText, inst) {
       $("body").append("<div>Selected "+dateText+"</div>");
    }
}).appendTo('body');

$("#toggleDP").button().click(function(e) {
    if ($dp.datepicker('widget').is(':hidden')) {
        $dp.show().datepicker('show').hide();
        $dp.datepicker("widget").position({
            my: "left top",
            at: "right top",
            of: this
        });
    } else {
        $dp.hide();
    }

    //e.preventDefault();
});

- gnarf

---

谢谢，到目前为止我找到的最好的解决方案 :) - Siim

这个解决方案似乎在使用jQuery 1.9和Chrome 29版本中无效。 - kibibu

对我在Chrome上起作用，唯一的问题是它将我滚动到底部，所以我编辑了它，通过单击链接并将其附加到当前单击元素的父级，只添加一次日期选择器。 - Mathijs Segers

Answer 2

我在我的应用程序中很容易地解决了这个问题 -- 如果您打开带有文本字段的日期选择器，您也可以使用此解决方案。我在图标中添加了一个 $('#date_field').focus() 链接。单击该图标，文本字段获取焦点，从而触发日期选择器打开。大功告成。

- Eric

---

我喜欢这个解决方案，快速简便。 - Winterain

谢谢！这种技术还可以用来创建一个简单的按钮，当点击时打开日期选择器（如果使用 onShow: "button" 日期选择器参数，则会创建额外的侧边按钮），如下所示：<input id="date" type="button" onclick="this.focus()"> 在其他地方，您可以正常使用 $("#date").datepicker()。 - Ghopper21

这是正确的答案，可以实现易于维护的代码。 - PseudoNinja

Answer 3

尝试使用以下方法：

    <a href="javascript:void(0);" onclick="$.datepicker._showDatepicker($('#inputID')[0]);">Text here</a>
    <input type="hidden" id="inputID"/>
    ...
    <script type="text/javascript">
      $(document).ready(
         function()
         {
             $('#inputID').datepicker();
         }
      );
    </script>

- Zsolti

---

到目前为止，最简单的解决方案是添加最少的代码和花哨的操作。谢谢！ - nicholeous

是的，我喜欢这个 :) +1 - faerin

Answer 4

这可能有助于其他人。

最终我使用了JQuery UI使其正常工作。

以下是代码:

$(".date-pick").datepicker({
      changeMonth: true,
      changeYear: true,
      maxDate: '0m 0d',
      minDate: new Date(2000, 1 - 1, 1),
      dateFormat: 'dd-mm-yy',
      showOn: 'button', 
      buttonImage: 'http://www.example.com/elements/images/calendar.png', 
      buttonImageOnly: true
      });

我将日期选择器的ID更改为date-pick类。

- Keith Donegan

---

你写出了什么HTML呢？链接中也添加了 date-pick 类吗？我这边遇到了一些麻烦。 - Steve

这完全没有回答问题哈哈。这不是使用链接来触发日历 - 它只是使用buttonImage来打开它。仍然需要一个输入字段，您可能甚至都没有... - nzifnab

Answer 5

根据@camilokawerin的答案，我做了以下修改，发现这是最简单和最干净的解决方案：

HTML:

<a href="#" id="selec">Click</a> <div id="datepicker" style="display:none"></div>

JS:

$("#datepicker").datepicker();
$('#selec').click(function(){
    $('#datepicker').toggle();
});

- Pere

---

看起来不错，但是你如何获取所选日期？ - tiho

@tiho 我在 onSelect 方法中获取它... 所有的内容都在文档中 http://api.jqueryui.com/datepicker/#option-onSelect - Pere

Answer 6

使用内联日期选择器可以更轻松地完成这个任务。请查看我的JSFiddle。

HTML

<a href="#" class="datepicker">Pick a date</a>

JS

var dpToggler = $('a.datepicker').button(),
    dp = $("<div />").css('position', 'absolute').hide().datepicker().appendTo(dpToggler);

dpToggler.on('click', function(e) {
  e.preventDefault();
  if (dp.is(':hidden')) {
    dp.show().position({
      my: 'left top',
      at: 'right top',
      of: this
    });
  } else {
    dp.hide();
  }
});

- camilokawerin

Answer 7

从jqueryui来看，似乎您应该添加showOn，以及可能需要（不确定是否必需）buttonImage：

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: '0m 0d',
    minDate: new Date(2000, 1 - 1, 1),
    dateFormat: 'dd-mm-yy',
    showOn: 'button', 
    buttonImage: 'images/calendar.gif', // adapt this to your image
    buttonImageOnly: true
});

- Tom Bartel

---

谢谢回复。不幸的是，我尝试过了，似乎也不起作用。 - Keith Donegan

我之前不知道datepicker()函数，而且buttonImage属性可能需要根据你的答案进行调整。对于这个错误我感到抱歉。 - Tom Bartel