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选项中将您的类（类）添加到 $（输入）.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" />

Answer 2

只需使用此处隐藏日期选择器日历

即可

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

    });

如何隐藏特定datepicker jquery UI的日历

2 个答案: