체크 상자를 기준으로 날짜 선택기를 변경하십시오.

Question

버튼 패널 내에 체크 상자가있는 날짜 선택 도구가 두 개 있습니다. 이 확인란이 선택되어 있는지 여부에 따라 날짜 선택 도구를 변경하려고합니다. 날짜 선택 도구를 실제로 변경하는 경우를 제외하고는 모두 작동하는 것으로 보입니다. 내가 달성하려고하는 것은 : 체크 박스가 체크되어 있다면 날짜 선택 도구는 월요일에 주 번호와주의 첫날을 보여줍니다. 상자를 선택하지 않으면이 주 번호와 한 주를 시작하는 요일을 표시하지 않습니다 일요일

입니다

스크립트 : 귀하의 주요 문제의 범위가

$(".datepicker").datepicker({ 
    showOn: 'button', 
    buttonText: 'Date', 
    showButtonPanel: true, 
    showWeek: false, 
    firstDay: 0, 
    beforeShow: function (input, inst) { 
    setTimeout(function() { 
     var buttonPane = $(input) 
      .datepicker("widget") 
      .find(".ui-datepicker-buttonpane"); 
           var html = ""; 
     var html = '<div class="broadcastFilter"><input type="checkbox"><label> Use Broadcast calendar </label></div>'; 
     buttonPane.append(html); 
     test.DateSelectionDateEventBind(); 
     var optionChecked = $('.broadcastFilter input[type="checkbox"]').is(':checked'); 
     //works fine up until here. 
     buttonPane.click(function() { 
      if(optionChecked) 
      { 
       $(".datepicker").datepicker('option', 'showWeek', true); 
       $(".datepicker").datepicker('option', 'firstDay', 1); 
      } 
      else 
      { 
       $(".datepicker").datepicker('option', 'showWeek', false); 
       $(".datepicker").datepicker('option', 'firstDay', 0); 
      } 
     }); 
    }, 1); 
    }, 
    onChangeMonthYear: function (input) { 
    setTimeout(function() { 
     var buttonPane = $(input) 
      .datepicker("widget") 
      .find(".ui-datepicker-buttonpane"); 
     var html = '<div><input type="checkbox"><label> Use Broadcast calendar </label></div>'; 
     buttonPane.append(html); 
     test.DateSelectionDateEventBind(); 
    }, 1); 
    } 
}); 

http://jsfiddle.net/dan_vitch/zEper/8/

Answer 1

. 다른 사용자의 경우 전체 buttonPane의 클릭 이벤트를 듣고 있으며 확인란의 이벤트는 아닙니다. 세 번째 문제는 datepicker를 열 때 확인란을 이전 값으로 설정하지 않는다는 것입니다. (아마도 여러분의 test 객체가 그것을 처리 할지라도, 나는 코드의 그 부분을 보지 못했고, 수수께끼는 단지 그것에 관한 에러를줍니다.)

따라서, 적절한 상태의 체크 박스를 초기화 :

buttonPane.append(html); 
buttonPane.find(':checkbox').prop('checked', $('.datepicker').datepicker('option', 'showWeek')); 

확인란을 들어

가 클릭 :

buttonPane.find(':checkbox').click(function() { 

... 그리고 그것을 클릭하면, 이전 optionChecked 속성을 확인하지 않습니다 변경되지는 않지만 체크 박스가 선택되어 있는지 확인하십시오 :

if($(this).is(':checked')) 

Here's a fiddle that takes care of all of that이지만 지금 당장은 확인란을 클릭 할 때마다 닫힙니다. 코드가 이전 상태를 복원함에 따라 코드를 다시 클릭하면 변경된 상태로 표시됩니다.

Answer 2

당신의 변수 "optionChecked". click 이벤트에 바인딩하는 익명의 함수 내에서 optionChecked는 존재하지 않습니다.

이 문제를 해결하는 가장 쉬운 방법은 클릭 기능 내에서 선언을 이동하는 것입니다.

buttonPane.click(function() { 
    var optionChecked = $('.broadcastFilter input[type="checkbox"]').is(':checked'); 

    if(optionChecked) { 
     $(".datepicker").datepicker('option', 'showWeek', true);  
     $(".datepicker").datepicker('option', 'firstDay', 1); 
    } 

나는 옵션을 변경하여 datepicker가 변경 사항을 표시하지 않을 가능성이 있다고 생각합니다. 나중에 datepicker의 새로 고침 메서드를 호출해야 할 수도 있습니다. 당신은 항상 체크 박스가 체크 박스의 상태를 변경하지 않는, 클릭하기 전에 결정 optionChecked 확인하고 한 가지를 들어

$('.datepicker').datepicker("refresh")