jqueryui datepicker với đầu vào bị ẩn

Question

Tôi nhận được một nút và một đầu vào bị ẩn.

Tôi muốn trình mở khóa ngày mở bên dưới nút tôi nhấp vào. Và ngày đã chọn được chèn vào đầu vào bị ẩn.

Tôi không muốn tạo nút mới (sử dụng tùy chọn datepicker) và tôi không muốn hiển thị thông tin nhập.

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

Bất kỳ ý tưởng nào?

Answer 1

Đây là một chút hacky, nhưng nó dường như làm việc okay:

1. Gắn datepicker đến input thay vì nút.
2. Đặt lại vị trí của thanh công cụ ngày tháng bên dưới nút khi mở.

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

Ví dụ:..http://jsfiddle.net/StUsH/

Answer 2

Tôi đã làm điều này bằng cách thực hiện một .show() tập trung() ẩn() - hoạt động hoàn hảo mặc dù đó là một chút ô uế:

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

http://jsfiddle.net/JKLBn/