How hide calendar for specific datepicker 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="" />

I want my date picker to be independent from each other. I have many date picker some requires only year or month or whole date

I can hide the calendar by having

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

But I am afraid it will hide all calendar.

So i decided to just add class but it is not working.

How hide calendar for certain datepicker?

I use

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

My problem is when I select year the calendar will show.How to hide calendar after selecting year

Answer 1

You should add your class (classes) to $(input).datepicker("widget") within beforeShow datepicker option and then remove this class (classes) within onClose datepicker option.

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