jQuery datepicker - initの後に.ui-datepicker-calendarの表示を変更する

Question

datepickerが既に初期化された後、ui-datepicker-calendarクラスのCSS表示属性を変更するにはどうすればよいですか？私はこの表の表示を切り替える選択可能なチェックボックスを持つHTMLフォームを持っています。私は、次のことを試してみた：

HTMLサンプル：

<div class="row"> 
    <div class="adddescr"><label for="date">Zeitraum:</label></div> 
    <div class="addinput" id="date"><input type="text" id="datefrom" name="datefrom" class="date" /> - <input type="text" id="dateto" name="dateto" class="date" /></div> 
</div> 
<div class="row"> 
    <div class="addinput"><label><input type="checkbox" id="dateplanedcheck" /> grobe Planung</label></div> 
</div> 

JS最初のアプローチ：

<script> 
    $(document).ready(function() { 
    $("#datefrom, #dateto").datepicker({ dateFormat: "dd.mm.yy", 

    [...] 

    beforeShow: function(input, inst) { 
    if ($("#dateplanedcheck").is(':checked')) { 
     $(".ui-datepicker-calendar").css("display", "none"); 
    }} 
    }); 

    [...] 

    }); 
<script> 

beforeShowが呼び出されますが、カレンダーがまだ表示されています。

JS第二のアプローチ：

<script> 
    $(document).ready(function() { 

    [....] 

    $("#dateplanedcheck").change(function() { 
    if ($(this).is(':checked')) { 
     $(".ui-datepicker-calendar").css("display", "none"); 
    } 
    }); 
    }); 
</script> 

私は何をしないのですか？これはjQueryでも動作しますか？ ありがとうございます！

Answer 1

チェックボックスをオンにした場合、カレンダーを表示しないようにしたいですか？

beforeShowのちょうどreturn false;。

$("#datefrom, #dateto").datepicker({ 
    dateFormat: "dd.mm.yy", 
    beforeShow: function(input, inst) { 
     if ($("#dateplanedcheck").prop('checked')) { 
      return false; 
      } 

    } 
}); 

http://jsfiddle.net/JzbPD/

回答：

はまだカレンダーを表示するが、それは目に見えない作り：それはhasnので

BeforeShowがテーブルの上にUI-DatePickerのカレンダーにアクセスすることはできませんまだレンダリングされていません。 $(inst.dpDiv).addClass('calendar-off')のようなクラスを適用し、スタイル.calendar-off table.ui-datepicker-calendar { display none; }を次のようにします。http://jsfiddle.net/JzbPD/4