Gán jQuery datepicker cho phần tử div và nhận giá trị

Question

Tôi muốn hiển thị một datepicker sử dụng jQuery khi người dùng nhấp vào một số văn bản và sau khi người dùng chọn ngày trên datepicker, tôi có thể lấy giá trị từ bộ chọn ngày dưới dạng biến javascript . Mã của tôi giống như sau:

<div id="datepicker-container" style="display: none;"> 
    <div id="select-delivery-date-input"> </div> 
</div> 
<a id="show-datepicker">Select Delivery Date</a> 
<script> 
    $("#show-datepicker").click(function(){ 
     $("#datepicker-container").show(); 
    }); 
    $('#select-delivery-date-input').datepicker({ 
     dateFormat:'yy-m-d', 
     minDate: new Date(), 
    }); 
</script> 

Vấn đề là khi cửa sổ bật lên ngày, khi tôi cố gắng chọn ngày trên cửa sổ bật lên ngày, nó sẽ không đóng cửa sổ bật lên datepicker.

Fiddle example

Answer 1

Bạn có thể sử dụng tùy chọn onSelect datepicker của:

Được gọi khi datepicker được chọn. Hàm nhận ngày được chọn làm văn bản và thể hiện datepicker làm tham số.

Sau đó, bạn có thể sử dụng jQuery hide().

Dưới đây là một mẫu sống:

$(document).ready(function() { 
 
    $("#show-datepicker").click(function(){ 
 
    $("#datepicker-container").show(); 
 
    }); 
 
    $('#select-delivery-date-input').datepicker({ 
 
    dateFormat:'yy-m-d', 
 
    minDate: new Date(), 
 
    onSelect: function(selectedDate){ 
 
     console.log(selectedDate); 
 
     $("#datepicker-container").hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 

 
<div id="datepicker-container" style="display: none;"> 
 
    <div id="select-delivery-date-input"> </div> 
 
</div> 
 
<a id="show-datepicker">Select Delivery Date</a>

Answer 2

Hãy tìm thấy bên dưới đoạn code thay đổi:

$(document).ready(function() { 
var selectedDate; 

    $("#show-datepicker").click(function(){ 
     $("#datepicker-container").show(); 
    }); 
    $('#select-delivery-date-input').datepicker({ 
     dateFormat:'yy-m-d', 
     minDate: new Date(), 
     onSelect: function(date){ 
     selectedDate = date; 
     alert(selectedDate);//selected date is assigned to date1, you can use date1 anywhere 
     $("#datepicker-container").hide(); 
    } 
    } 
    ); 
});