JQuery UI Datepicker：制作链接触发日期选择器

Posted 2023-05-07

【中文标题】JQuery UI Datepicker：制作链接触发日期选择器

【英文标题】：JQuery UI Datepicker: Making a link trigger datepicker

【发布时间】：2011-01-13 00:19:47

【问题描述】：

我正在使用 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>

有什么想法吗？

【参考方案1】：

你可以像我在this fiddle做的那样做

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();
);

【讨论】：

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

此解决方案似乎不适用于带有 jQ​​uery 1.9 的 Chrome 29

在 chrome 上为我工作，我唯一的问题是它会将我滚动到底部，所以我编辑它以在单击链接并将其附加到当前单击的元素时仅添加一次日期选择器父母。

【参考方案2】：

我刚刚在我的应用程序中非常轻松地解决了这个问题——如果你用文本字段打开日期选择器，你也可以使用这个解决方案。我在图标上添加了$('#date_field').focus() 链接。单击图标，文本字段获得焦点并触发日期选择器打开。瞧。

【讨论】：

我喜欢这个解决方案，快速简单。

谢谢！这种技术对于创建一个简单的按钮也很有用，该按钮在单击时打开日期选择器（如果您使用 onShow: "button" datepicker 参数，则不会创建额外的侧边按钮），如下所示：<input id="date" type="button" onclick="this.focus()"> 在其他地方您可以执行正常的 @987654324 @.

这是正确答案，代码易于维护。

【参考方案3】：

这可能对其他人有所帮助。

我最终让它与 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
      );

我将 datepicker id 更改为 date-pick 类

【讨论】：

你最终得到了什么 HTML？您是否也将 date-pick 类添加到链接中？我在这方面遇到了麻烦。

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

【参考方案4】：

尝试使用：

    <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>

【讨论】：

迄今为止最简单的解决方案，添加的代码和改进最少。谢谢！

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

【参考方案5】：

根据@camilokawerin 的回答，我这样做了，我发现它是最简单、最干净的解决方案：

HTML：

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

JS：

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

【讨论】：

看起来不错，但是如何获得选定的日期？

@tiho 我在onSelect 方法中找到它...一切都在文档中api.jqueryui.com/datepicker/#option-onSelect

【参考方案6】：

来自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
);

【讨论】：

感谢您的回复。不幸的是，我试过了，它似乎也不起作用。

我以前不知何故忘记了 datepicker() 函数，正如您自己的回答所暗示的那样，buttonImage 属性可能必须进行调整。对不准确之处深表歉意。

【参考方案7】：

使用inline datepicker 更容易做到这一点。检查我的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();
  
);