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

Question

$('.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');
}

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

Answer 1

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

$('.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" />