datepicker jQueryUI avec entrée cachée

Question

je me suis un bouton et une entrée cachée.

Je veux que le datepicker ouvre sous le bouton je clique dessus. Et la date sélectionnée est insérée dans l'entrée cachée.

Je ne veux pas créer un nouveau bouton (en utilisant les options de datepicker), et je ne veux pas montrer l'entrée.

<button type="button" class="btn" id="date_button">Select Date...</button> 

<input type="hidden" name="date" id="date_field" /> 

<script> 
    $('#date_button').datepicker({ 
     showOn: "button", 
     onSelect: function(dateText) { 
      $('#date_field').val(dateText); 
      $('#date_button').text(dateText); 
     } 
    }) 
</script> 

Des idées?

Answer 1

C'est un peu hacky, mais il semble fonctionner bien:

1. Fixez le datepicker au input au lieu du bouton.
2. Repositionner le datepicker être sous le bouton quand il ouvre.

var $button = $("#date_button"), 
    left = $button.offset().left, 
    top = $button.offset().top + $button.height(); 

$('#date_field').datepicker({ 
    onSelect: function(dateText) { 
     $('#date_field').val(dateText); 
     $button.text(dateText); 
    }, 
    beforeShow: function (event, ui) { 
     setTimeout(function() { 
      ui.dpDiv.css({ left: left, top: top });  
     }, 5);    
    } 
}); 

$button.on("click", function() { 
    $("#date_field").datepicker("show"); 
}); 

Exemple:..http://jsfiddle.net/StUsH/

Answer 2

Je l'ai fait en faisant une .show() mise au point() cacher() - fonctionne parfaitement bien qu'il est un peu sale:

$(document).ready(function() { 
    $('input').datepicker(); 
     $('#mybutton').click(function() { 
     $('input').show().focus().hide(); 
    }); 
}); 

http://jsfiddle.net/JKLBn/