jQuery UI DatePicker: Hacer un selector de fechas eslabón de gatillo

Question

estoy usando selector de fechas UI de jQuery: http://jqueryui.com/demos/datepicker/

implementado aquí:

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

Quiero usar un enlace como el gatillo, pero no puedo haz que funcione

Aquí está mi código:

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

¿Alguna idea?

Answer 1

Esto podría ayudar a alguien más.

Terminé haciendo que funcionara con JQuery UI.

código de abajo:

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

y he cambiado el ID del selector de fecha para la clase fecha de captura

Answer 2

De jqueryui, parece que se debe añadir showOn y tal vez (no sé si se requiere) 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

Trate de usar:

<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

Se podría hacer algo como lo hice en 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

Acabo de resolver esto muy fácilmente en mi aplicación - si usted tiene su planificador de evento abierto con un campo de texto, puede utilizar esta solución también. Agregué un enlace $('#date_field').focus() al ícono. Haga clic en el ícono, el campo de texto se enfoca y eso activa el selector de fecha para abrirse. Voila.

Answer 6

Con inline datepicker es bastante más fácil hacer esto. Verifique mi 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

Basado en respuesta @camilokawerin, lo hice y me parece la solución más limpia y easieast:

HTML:

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

JS:

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