4

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 の 2 番目のアプローチ:

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

  [....]

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

私は何が欠けていますか？これはjQueryでも機能しますか? 前もって感謝します！

4

1 に答える 1

6

チェックボックスがチェックされている場合、カレンダーを表示したくないですか？

ちょうどreturn false;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

于 2012-04-29T11:34:06.603 に答える