Bootstrap-Datepicker 插件配置选项详解

Bootstrap-Datepicker 插件配置选项详解

bootstrap-datepicker 项目地址: https://gitcode.com/gh_mirrors/boo/bootstrap-datepicker

Bootstrap-Datepicker 是一款基于 Bootstrap 框架的日期选择器插件，提供了丰富的配置选项来满足各种日期选择需求。本文将全面解析该插件的各项配置参数，帮助开发者更好地定制日期选择器功能。

日期输入格式支持

该插件支持多种日期输入格式：

1. Date 对象：标准的 JavaScript Date 对象
2. 格式化字符串：符合指定格式的日期字符串
3. 相对时间表达式：如 "-1d"（昨天）、"+6m +1y"（6个月加1年后）等
   • 支持单位：d（天）、w（周）、m（月）、y（年）
   • 特殊别名："yesterday"（等同于"-1d"）、"today"（"+0d"）、"tomorrow"（"+1d"）

数据属性配置方式

大多数选项可以通过 data-* 属性配置，转换规则为：

1. 将驼峰命名转换为短横线分隔
2. 添加 "data-date-" 前缀

例如：

• startDate → data-date-start-date
• format → data-date-format
• daysOfWeekDisabled → data-date-days-of-week-disabled

核心配置选项详解

自动关闭功能

autoclose
类型：Boolean
默认值：false
功能：选择日期后是否自动关闭日期选择器

智能年份解析

assumeNearbyYear
类型：Boolean 或 Integer
默认值：false
功能：处理两位数年份输入时的智能解析

• true：将"5/1/15"解析为2015年而非15年
• 数值（如20）：指定多少年内的两位数年份使用当前世纪

日期显示定制

beforeShowDay
类型：Function(Date)
功能：定制日期单元格的显示和行为
返回值可以是：

• undefined：无效果
• Boolean：是否可选
• String：附加CSS类名
• Object：包含enabled、classes、tooltip、content等属性

类似函数还有：

• beforeShowMonth（月份）
• beforeShowYear（年份）
• beforeShowDecade（十年）
• beforeShowCentury（世纪）

界面显示选项

calendarWeeks
类型：Boolean
默认值：false
功能：是否显示周数（每年第几周）

clearBtn
类型：Boolean
默认值：false
功能：是否显示"清除"按钮

container
类型：String
默认值："body"
功能：指定日期选择器弹出框的容器元素

日期限制选项

datesDisabled
类型：String 或 Array
默认值：[]
功能：禁用的具体日期

daysOfWeekDisabled
类型：String 或 Array
默认值：[]
功能：每周禁用的星期（0=周日到6=周六）

daysOfWeekHighlighted
类型：String 或 Array
默认值：[]
功能：每周高亮的星期

startDate/endDate
类型：Date 或 String
功能：设置可选日期范围

视图控制选项

defaultViewDate
类型：Date/String/Object
默认值：今天
功能：初始显示的日期视图

maxViewMode/minViewMode
类型：Number/String
功能：限制可选择的视图层级（日/月/年/十年/世纪）

startView
类型：Number/String
默认值：0（"days"）
功能：初始打开的视图层级

多日期选择功能

multidate
类型：Boolean/Number
默认值：false
功能：启用多日期选择

• true：不限数量
• 数值：限制选择数量

multidateSeparator
类型：String
默认值：","
功能：多日期间的分隔符

本地化选项

language
类型：String
默认值："en"
功能：设置语言（支持IETF语言代码）

其他实用选项

format
类型：String/Object
默认值："mm/dd/yyyy"
功能：日期显示格式
支持自定义toDisplay和toValue函数实现特殊转换逻辑

todayBtn
类型：Boolean/"linked"
默认值：false
功能："今天"按钮设置

• true：仅跳转到今天
• "linked"：跳转并选择

todayHighlight
类型：Boolean
默认值：false
功能：是否高亮今天日期

weekStart
类型：Integer
默认值：0（周日）
功能：设置每周起始日

最佳实践建议

1. 对于生日选择场景，建议设置：

   startView: 2,  // 从年份视图开始
   maxViewMode: 2,  // 限制只能选择到年份
   endDate: '0d'  // 不能选择今天之后的日期
   

2. 多语言支持时，确保引入对应的语言文件并正确设置language选项

3. 日期范围选择时，建议配合startDate和endDate确保逻辑正确

4. 移动端优化：

   disableTouchKeyboard: true,  // 禁用虚拟键盘
   orientation: "bottom auto"  // 优化弹出位置
   

通过合理配置这些选项，可以打造出符合各种业务场景需求的日期选择器组件。

bootstrap-datepicker 项目地址: https://gitcode.com/gh_mirrors/boo/bootstrap-datepicker