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

Posted 2023-05-07

【中文标题】jQuery datepicker - 在初始化后更改 .ui-datepicker-calendar 的显示

【英文标题】：jQuery datepicker - change display of .ui-datepicker-calendar after init

【发布时间】：2012-05-09 10:40:27

【问题描述】：

在 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 吗？ 提前致谢！

【参考方案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/

答案：

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

BeforeShow 无法访问表格上的 ui-datepicker-calendar，因为它还没有被渲染。应用像$(inst.dpDiv).addClass('calendar-off') 这样的类，然后像这样拥有.calendar-off table.ui-datepicker-calendar display none; 的样式：http://jsfiddle.net/JzbPD/4

【讨论】：

嗯，不。我想显示日历.. 我只是想在选中复选框的日子隐藏表格。其余部分应显示（月、年、导航、...）。见docs.jquery.com/UI/Datepicker#theming

啊，好吧-据我所知，在 BeforeShow 中，您无法访问桌子上的 ui-datepicker-calendar，因为它尚未呈现。你可以做的是应用像$(inst.dpDiv).addClass('calendar-off') 这样的类，然后像这样拥有.calendar-off table.ui-datepicker-calendar display none; 的样式？ jsfiddle.net/JzbPD/4

@Benno...很好的答案。特别是因为它展示了如何在同一页面上拥有多种不同的外观。