在 jquery-UI datepicker 中调整 Year 下拉菜单的高度答案

【问题标题】：Resize the height of dropdown for Year in jquery-UI datepicker在 jquery-UI datepicker 中调整 Year 下拉菜单的高度
【发布时间】：2018-05-29 09:10:59
【问题描述】：

我正在使用 Jquery UI 日期选择器组件 (jquery-ui-1.12.1)。但我无法修改年份下拉列表的大小。我想修复下拉列表的高度（特别是“年份”），因为它显示了一个长列表，在 Mozilla Firefox 的情况下会溢出窗口边界。图片如下：

谁能帮我解决这个问题？

【问题讨论】：

我会仔细检查，但我认为您需要通过 CSS 定义 <select> 显示的选项项目数。
对不起，不是 CSS，它在 HTML 中作为 size 属性。请查看：stackoverflow.com/help/mcve 请提供示例，我们可以进一步提供帮助。

标签： jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案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 并自行设置样式。

【讨论】：