jQuery 사용자 정의 트리거 버튼이있는 날짜 선택 도구 사용

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

샘플 파 :이 같은 이것은 이것은

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

날짜 선택 아이콘에 대한 HTML은

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

경우 : datpicker을 만드는 방법의 예를 들어 GE는 아이콘을 클릭하여 표시 기능 open & 닫기 아이콘이있는 날짜를 클릭하십시오.

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