如何隐藏特定日期选择器 jquery UI 的日历答案

【问题标题】：How hide calendar for specific datepicker jquery UI如何隐藏特定日期选择器 jquery UI 的日历
【发布时间】：2016-08-06 08:53:02
【问题描述】：

$('.datepicker_year').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'yy',
  onClose: function(dateText, inst) {
    //            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();

    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(year, 1));
  },
  beforeShow: function(input) {
    setTimeout(function() {
      $(input).datepicker("widget").find(".ui-datepicker-current").addClass('hide');
      $(".ui-datepicker-month").addClass('hide');
      $("table.ui-datepicker-calendar").addClass('hide');
      $(".ui-datepicker-current").addClass('hide');
    }, 1);
  },
  onSelect: function(dateText) {
    $("table.ui-datepicker-calendar").addClass('hide');
  }
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input class="datepicker_year" type="text" id="" data-attr="" />

我希望我的日期选择器彼此独立。我有很多日期选择器，有些只需要年或月或整个日期

我可以隐藏日历

.ui-datepicker-calendar {
    display: none;
}

但我担心它会隐藏所有日历。

所以我决定只添加类，但它不起作用。

如何隐藏某些日期选择器的日历？

我用

onSelect: function(dateText) {
    $("table.ui-datepicker-calendar").addClass('hide');
}

我的问题是当我选择年份时日历会显示。选择年份后如何隐藏日历

【问题讨论】：

标签： jquery jquery-ui datepicker show-hide

【解决方案1】：

您应该在 beforeShow 日期选择器选项中将您的类（类）添加到 $(input).datepicker("widget")，然后在其中删除此类（类） onClose 日期选择器选项。

$('.datepicker-year').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'yy',
  beforeShow: function(input) {
    $(input).datepicker("widget").addClass('hide-month hide-current hide-calendar');
  },
  onClose: function(dateText, inst) {
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(year, 1));
    $(this).datepicker('widget').removeClass('hide-month hide-current hide-calendar');
  }
});
$('.datepicker').datepicker();

.hide-month .ui-datepicker-month,
.hide-current .ui-datepicker-current,
.hide-calendar .ui-datepicker-calendar{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input class="datepicker-year" type="text" />
<input class="datepicker" type="text" />

【讨论】：

【解决方案2】：

在你想隐藏日期选择器日历的地方使用它

 $(".date-picker").on('focus blur click',function () {
        $(".ui-datepicker-calendar").hide();

    });

【讨论】：