JQuery UI Datepicker:创建一个链接触发器datepicker

Question

我正在使用JQuery的UI datepicker: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>

有任何想法吗？

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

Answer 2

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

Answer 3

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

我最终得到它与J​​Query 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类

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