छिपा इनपुट

Question

के साथ jqueryui datepicker मुझे एक बटन और एक छिपी हुई इनपुट मिली।

मैं चाहता हूं कि डेटपिकर उस बटन के नीचे खुलता है जिसे मैं क्लिक करता हूं। और चयनित तिथि छिपी हुई इनपुट में डाली गई है।

मैं एक नया बटन नहीं बनाना चाहता (डेटपिकर विकल्पों का उपयोग करके), और मैं इनपुट नहीं दिखाना चाहता हूं।

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

कोई विचार?

Answer 1

यह एक छोटे से hacky है, लेकिन यह ठीक से काम करने लगता है:

1. बटन के बजाय input को datepicker देते हैं।
2. जब यह खुलता है तो बटन के नीचे डेटपिकर को स्थानांतरित करें।

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

उदाहरण:।।http://jsfiddle.net/StUsH/

Answer 2

मैं एक .show() करके ऐसा किया ध्यान केंद्रित() को छिपाने() - पूरी तरह से काम करता है, हालांकि यह थोड़ा अशुद्ध है:

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

http://jsfiddle.net/JKLBn/