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

Это может помочь кому-то еще.

В итоге я получил его для работы с пользовательским интерфейсом JQuery.

код ниже:

$(".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 идентификатор класса дата-подборщика

Answer 2

Из 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 
}); 

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> 

Answer 4

Вы могли бы сделать что-то, как я сделал в 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(); 
}); 

Answer 5

Я просто решил это очень легко в моем приложении - если у вас есть DatePicker открытого с текстовым полем, вы можете использовать это решение тоже. Я добавил ссылку на значок $('#date_field').focus(). Щелкните значок, текстовое поле получает фокус, и это вызывает запуск датпикера. Вуаля.

Answer 6

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

Answer 7

на основе @camilokawerin ответа, я сделал это, и я считаю его easieast и чистое решение:

HTML:

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

JS:

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