jQuery datepicker语言 - 在初始化后更改 .ui-datepicker-calendar 的显示

Question

在日期选择器初始化后，如何更改 ui-datepicker-calendar 类的 css 显示属性？我有一个带有可选复选框的 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>

之前显示被调用，但仍显示日历。

JS第二种方法：

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

我错过了什么？这甚至适用于jQuery吗？提前感谢！

Answer 1

所以你想不显示日历，如果选中复选框？

只是在之前的节目中return false;。

$("#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