如何调整jQuery UI Datepicker中年份下拉框的高度？

我来帮你搞定这个Firefox里Datepicker年份下拉框过长的问题～针对jquery-ui-1.12.1版本，有两个实用的解决方案：

方法一：用CSS固定下拉框高度 #

直接给年份选择器添加样式，限制最大高度并开启垂直滚动，这样即使选项多也不会超出窗口。

在你的CSS中添加这段代码：

.ui-datepicker-year {
    max-height: 150px; /* 可根据需求调整高度值 */
    overflow-y: auto;
}

亲测在Firefox中这个样式能生效，下拉框超过设置的高度后会自动出现滚动条，不会再超出窗口边界。

方法二：限制年份范围减少下拉选项 #

如果下拉框选项太多是因为年份跨度太大，你可以通过Datepicker的配置项缩小年份范围，从根源减少选项数量。

初始化Datepicker时设置yearRange参数：

$(function() {
    $("#your-datepicker-id").datepicker({
        changeYear: true, // 确保开启年份选择功能
        yearRange: "-20:+10" // 表示显示当前年份往前20年到往后10年的范围，可自定义
    });
});

比如"-20:+10"代表今年减20年到今年加10年，你可以根据业务需求调整这个范围，比如"2000:2030"固定显示2000到2030年的选项。

建议 #

可以把两种方法结合起来使用：先通过yearRange合理限制年份范围，再用CSS固定下拉框高度，这样既能保证功能需求，又能完美解决超出窗口的问题。

内容的提问来源于stack exchange，提问作者Susmita Sadhu