jQuery datepicker – 在init之后更改.ui-datepicker-calendar的显示

在初始化datepicker之后,如何更改ui-datepicker-calendar类的css display属性？我有一个带有可选复选框的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吗？
提前致谢！

解决方法

因此,如果选中复选框,您是否希望不显示日历？

只是返回虚假;在beforeShow中.

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

    }
});

http://jsfiddle.net/JzbPD/

回答：

仍然显示日历但使其不可见：

BeforeShow无法访问表上的ui-datepicker-calendar,因为它尚未呈现.应用类似$(inst.dpDiv).addClass(‘calendar-off’)的类,然后使用样式.calendar-off table.ui-datepicker-calendar {display none;像这样：http://jsfiddle.net/JzbPD/4