Sử dụng bộ chọn Ngày jQuery với nút kích hoạt tùy chỉnh

Question

Làm cách nào để làm cho jQuery Datepicker mở ra bằng một nút do người dùng xác định?

Answer 1

Có built-in support for this, có một biểu tượng hoặc nút bên phải bên phải của hộp, như thế này:

$("#datepicker").datepicker({ 
    showOn: 'button', 
    buttonImage: 'images/calendar.gif', 
    buttonImageOnly: true 
}); 

Nếu bạn muốn hiển thị nó từ khác nút, hoặc thực sự bất kỳ sự kiện, hãy gọi show method, như thế này:

$("#myButton").click(function() { 
    $("#datepicker").datepicker("show"); 
}); 

You can try it here

Answer 2

Các mẫu pa ge như một ví dụ về làm thế nào để làm cho datpicker xuất hiện bằng cách nhấn vào biểu tượng:

here

Answer 3

$("#checkin").datepicker({ 
 
    dateFormat: 'dd/mm/yy', 
 
    minDate: '0', 
 
    changeMonth: true, 
 
    numberOfMonths: 1 
 
});

.datedivmng{ 
 
    float: left;position: relative; 
 
} 
 
.datedivmng .datepicker{ 
 
    position: relative;width: 87%!important; 
 
    cursor: pointer; 
 
} 
 
.datedivmng:after { 
 
    /* symbol for "opening" panels */ 
 
    font-family: 'FontAwesome'; 
 
    content: "\f073"; 
 
    color: #329ac4; 
 
    font-size: 16px; 
 
    text-shadow: none; 
 
    position: absolute; 
 
    vertical-align: middle; 
 
    pointer-events: none; 
 
    float: right; 
 
    top: 2px; 
 
    right: 7px; 
 
}

<div class="datedivmng"> 
 
    <input type="text" id="checkin" name="checkin" value="" /></div>

Answer 4

Đây là HTML cho biểu tượng bảng chọn ngày

onclick="show_date_picker('#datepicker_id'); on you icon element 

Đây là chức năng để mở & đóng datepicker vào biểu tượng bấm

function show_date_picker(source_datepicker){ 
    if($(source_datepicker).datepicker("widget").is(":visible")){ 
     $(source_datepicker).datepicker("hide"); 
    }else{ 
     $(source_datepicker).datepicker("show"); 
    } 
}