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

How can I change the css display attribute of the ui-datepicker-calendar class after the datepicker has already been initialized? I have a html form with a selectable checkbox from which I want to toggle the display of this table. I've tried the following:

在datepicker已经初始化之后，如何更改ui-datepicker-calendar类的css显示属性?我有一个带有可选择复选框的html表单，我想从中切换该表的显示。我试过以下:

HTML sample:

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 first approach:

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>

The beforeShow is called, but the calender is still displayed.

前面的内容被调用，但是日历仍然显示。

JS second approach:

JS第二种方法:

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

  [....]

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

What am I missing? Does this even work with jQuery? Thanks in advance!

我缺少什么?这是否适用于jQuery?提前谢谢!

1 个解决方案

#1

So you want to NOT show the calendar if the checkbox is checked?

如果复选框被选中，你不想显示日历?

Just return false; in the beforeShow.

只是返回false;beforeShow。

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

    }
});

http://jsfiddle.net/JzbPD/

Answer:

答:

Still displaying the calendar but making it invisible:

仍然显示日历，但使它不可见:

BeforeShow can't access the ui-datepicker-calendar on the table because it hasn't been rendered yet. Apply a class like$(inst.dpDiv).addClass('calendar-off') and then have the style .calendar-off table.ui-datepicker-calendar { display none; } like this: http://jsfiddle.net/JzbPD/4

因为它还没有呈现，所以不能在表*问ui-datepicker-calendar。应用一个类，比如$(inst.dpDiv). addclass ('calendar-off')，然后有样式.calendar-off表。ui-datepicker-calendar {显示没有;}这样:http://jsfiddle.net/JzbPD/4

#1