Bootstrap Datepicker如何设置显示40个年份（当前年前后20/10年）

这个需求完全可行，Bootstrap Datepicker 提供了yearRange配置项，专门用来控制年份下拉选择框的显示范围。

核心配置说明 #

yearRange支持相对当前年份的表达式写法：

• c代表当前年份
• c-20表示当前年份往前推20年
• c+10表示当前年份往后推10年
  组合起来"c-20:c+10"就能实现你要的「当前年份前20年、后10年」的显示效果。

修改后的代码示例 #

方式1：初始化时一次性配置

$(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    showAnim: "clip",
    yearRange: "c-20:c+10" // 新增年份范围配置
});

方式2：保留原有分步设置的写法

$(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
});
$(".datepicker").datepicker("option", "showAnim", "clip");
$(".datepicker").datepicker("option", "yearRange", "c-20:c+10"); // 添加年份范围配置

额外说明 #

如果需要固定的年份范围（比如固定显示2003到2033年），也可以直接写具体年份区间："2003:2033"，但相对当前年份的写法更灵活，会随系统当前年份自动调整范围。

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