2014-11-04 5 views
0

다른 라디오 버튼을 선택할 때마다 업데이트 할 jquery 날짜 선택기를 가져 오려고합니다.jQuery DatePicker 라디오 버튼 선택에 따른 업데이트 옵션

<div style="padding-bottom: 50px;"> 
    <label>Location: </label> 
    <input type="radio" name="locate" value="Internal">Internal 
    <input type="radio" name="locate" value="External">External 
</div> 
<div> 
    <label>Due Date: </label> 
    <input type="text" name="dueDate" id="dueDate" size="25" placeholder="Please Enter A Due Date" autocomplete="off" readonly="true"> 
</div> 

jQuery는 작동하지만 새로운 라디오 버튼을 클릭 할 때마다 datePicker를 업데이트하지 않습니다.

var locate = null; 
$("input[name='locate']").click(function() { 
    locate = this.value; 

    if (locate == "Internal") { 
     $("#dueDate").datepicker({ minDate: '-6M', maxDate: '+6M' }); 
     alert("Internal"); 
    } else { 
     $("#dueDate").datepicker({ minDate: -0, maxDate: '+6M' }); 
     alert("External"); 
    } 
}); 

답변

1

라디오 버튼의 선택 값을 올바르게 검색하지 않습니다. 아래처럼 if 상태를 변경해보십시오.

if ($("input[name='locate']:checked").val() == 'Internal'){ 
    $("#dueDate").datepicker({ minDate: '-6M', maxDate: '+6M' }); 
} 
else { 
    $("#dueDate").datepicker({ minDate: -0, maxDate: '+6M' }); 
} 

UPDATE 1 : 사용 destroy는 날짜 선택기를 파괴하고 라디오 버튼의 옵션 변경으로 다시 작성합니다. 다음은 완전한 코드입니다. 당신이 선택하면 DEMO

$("input[name='locate']").click(function() { 
    locate = this.value; 
    var dateField = $('#dueDate'); 

if ($("input[name='locate']:checked").val() == 'Internal'){ 
    dateField.datepicker('destroy'); 
    dateField.datepicker({ minDate: '-6M', maxDate: '+6M' }); 
} 
else { 
    dateField.datepicker('destroy'); 
    dateField.datepicker({ minDate: -0, maxDate: '+6M' }); 
} 

}); 

작업 링크는 Internal하면 6 개월 최대 개까지 다시 갈 수있을거야, 그리고 Extrenal가 다음 선택 될 때 현재 날짜에서입니다.

+0

내가 언급 한 내용을 구현했으며 라디오 버튼을 변경할 때 날짜 선택 도구를 업데이트 할 때마다 여전히 업데이트되지 않습니다. 업데이트 할 때마다 페이지를 새로 고쳐야합니다. – pptaszek1990

+0

@ pptaszek1990 좋아, 전체 코드와 데모 페이지 링크로 내 대답을 편집했습니다. –

+0

굉장! 잘 했어! 도와 줘서 고마워! – pptaszek1990

관련 문제