JQuery UI Datepicker: einen Link Trigger picker machen

Question

Ich benutze JQuery UI Datepicker: http://jqueryui.com/demos/datepicker/

hier umgesetzt:

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

ich einen Link als Auslöser verwenden möchten, aber ich kann nicht Mach es zur Arbeit.

Hier ist mein Code:

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

Irgendwelche Ideen?

Answer 1

Dies jemand anderes helfen könnte.

Ich endete damit, es mit JQuery UI zu arbeiten.

-Code unten:

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

und ich änderte die Datepicker-ID auf dem neuesten Stand-pick Klasse

Answer 2

Von jqueryui scheint es, wie Sie showOn hinzufügen sollten und vielleicht (weiß nicht, ob es erforderlich ist) 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

Versuchen Sie es mit:

<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

Sie etwas tun könnte, wie ich es tat in 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

ich dies nur gelöst sehr leicht in meinem app - wenn Sie Ihre picker mit einem Textfeld geöffnet haben, können Sie diese Lösung verwenden. Ich habe einen $('#date_field').focus() Link zum Icon hinzugefügt. Klicken Sie auf das Symbol, das Textfeld erhält den Fokus und löst den Datapicker aus. Voila.

Answer 6

Mit inline datepicker ist es einfacher, dies zu tun. Überprüfen Sie meine 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

Basierend auf @camilokawerin Antwort, habe ich dies und ich finde es die easieast und sauberste Lösung:

HTML:

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

JS:

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