使用帶自定義觸發按鈕的jQuery Date選取器

Question

如何使用戶定義的按鈕打開jQuery Datepicker？

Answer 1

有built-in support for this，具有文本框的右右，像這樣的圖標或按鈕：

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

如果你想從另一個按鈕，或真的任何情況下表現出來，叫show method，像這樣：

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

You can try it here

Answer 2

樣品PA GE爲如何使datpicker的例子似乎通過點擊圖標：

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

這是HTML的日期選擇器圖標

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

這是功能打開&關閉日期選擇器圖標點擊

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