在jquery-UI datepicker中调整Year的下拉列表的高度

Question

我使用的是Jquery UI datepicker组件（jquery-ui-1.12.1）。但是我无法修改年份下拉列表的大小。我想修复下拉列表的高度（特别是对于＆＃39; year＆＃39;），因为它显示了一个很长的列表，在Mozila Firefox的情况下溢出了窗口边界。这是图片：

任何人都可以帮我解决这个问题吗？

Answer 1

浏览器呈现<select>的选项列表，但overflow和height无法轻松管理。我有一个解决方法，使用jQuery UI SelectMenu。见这里：

$(function() {
  $("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true
  });
  $("#datepicker").click(function() {
    setTimeout(function() {
      $(".ui-datepicker-month, .ui-datepicker-year").selectmenu();
    }, 10);
  });
});

span.ui-selectmenu-button.ui-button {
  width: 30%;
}

ul.ui-menu {
  max-height: 120px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" id="datepicker"></p>

这会将<select>元素替换为可管理的下拉列表。由于它基于盒子模型，你可以过度使用CSS并自己设计样式。