JQuery UI Datepicker: Fare un datepicker grilletto

Question

Sto usando UI datepicker di JQuery: http://jqueryui.com/demos/datepicker/

implementato qui:

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

voglio usare un link come il grilletto ma non ci riesco farlo funzionare.

Ecco il mio codice:

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

Tutte le idee?

Answer 1

Questo potrebbe aiutare qualcun altro.

Ho finito per farlo funzionare con l'interfaccia utente di JQuery.

codice qui sotto:

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

e ho cambiato il DatePicker id di classe data-pick

Answer 2

Da jqueryui, sembra che si dovrebbe aggiungere showOn e forse (non so se è necessario) 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

utilizzare:

<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

Si potrebbe fare qualcosa come ho fatto io 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

Ho appena risolto molto facilmente nella mia app - se avete il vostro datepicker aperto con un campo di testo, è possibile utilizzare questa soluzione anche. Ho aggiunto un collegamento $('#date_field').focus() all'icona. Fare clic sull'icona, il campo di testo diventa attivo e questo fa scattare il datepicker da aprire. Ecco.

Answer 6

Con inline datepicker è molto più semplice farlo. Controlla il mio 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

in base alla risposta @camilokawerin, ho fatto questo e lo trovo l'easieast e soluzione più pulita:

HTML:

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

JS:

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