如何隐藏特定日期选择器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');
}

我的问题是，当我选择年份时，日历就会显示出来。如何在选择年份后隐藏日历？

- Brownman Revival

Answer 1

您需要在datepicker选项中的 beforeShow 中将您的类（classes）添加到 $(input).datepicker("widget")，然后在 onClose 选项中删除这个类（classes）。

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

- Anton Novik

Answer 2

只需在需要隐藏日期选择器日历的地方使用此代码

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

    });

- Nur Uddin