Bootstrap-Datepicker 配置选项详解

Bootstrap-Datepicker 配置选项详解

bootstrap-datepicker uxsolutions/bootstrap-datepicker: 是一个用于 Bootstrap 的日期选择器插件，可以方便地在 Web 应用中实现日期选择功能。适合对 Bootstrap、日期选择器和想要实现日期选择功能的开发者。 项目地址: https://gitcode.com/gh_mirrors/bo/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. 将驼峰式命名转换为短横线分隔式（如 startDate → start-date）
2. 添加 "data-date-" 前缀（如 format → data-date-format）

核心配置选项详解

自动关闭 (autoclose)

• 类型：Boolean
• 默认值：false
• 说明：选择日期后是否立即关闭日期选择器

年份智能解析 (assumeNearbyYear)

• 类型：Boolean 或 Integer
• 默认值：false
• 说明：处理两位数年份输入时的智能解析逻辑
  • true：将"5/1/15"解析为2015年而非15年
  • 可配置数字指定年份阈值（如20表示20年内使用当前世纪）

日期显示定制 (beforeShowDay)

• 类型：Function(Date)
• 说明：自定义日期单元格的显示和行为
  • 可返回：undefined（无效果）、Boolean（是否可选）、String（额外CSS类）
  • 或返回对象：{enabled, classes, tooltip, content}

周数显示 (calendarWeeks)

• 类型：Boolean
• 默认值：false
• 说明：是否在周行左侧显示周数

清空按钮 (clearBtn)

• 类型：Boolean
• 默认值：false
• 说明：是否显示清空输入值的按钮

禁用日期 (datesDisabled)

• 类型：String 或 Array
• 默认值：[]
• 说明：指定禁用的日期列表

禁用星期 (daysOfWeekDisabled)

• 类型：String 或 Array
• 默认值：[]
• 说明：指定每周禁用的星期（0=周日，6=周六）

高亮星期 (daysOfWeekHighlighted)

• 类型：String 或 Array
• 默认值：[]
• 说明：指定每周高亮的星期

默认视图日期 (defaultViewDate)

• 类型：Date、String 或 Object
• 默认值：今天
• 说明：日期选择器首次打开时显示的日期

日期格式 (format)

• 类型：String
• 默认值："mm/dd/yyyy"
• 说明：定义日期的显示和解析格式
  • d, dd：日期（无前导零/有前导零）
  • D, DD：星期（缩写/全称）
  • m, mm：月份（数字，无前导零/有前导零）
  • M, MM：月份（缩写/全称）
  • yy, yyyy：年份（2位/4位）

语言设置 (language)

• 类型：String
• 默认值："en"
• 说明：设置界面语言（如"zh-CN"表示简体中文）

多日期选择 (multidate)

• 类型：Boolean 或 Number
• 默认值：false
• 说明：启用多日期选择功能，可指定最大选择数量

视图范围控制 (minViewMode/maxViewMode)

• 类型：Number 或 String
• 说明：限制可选择的日期粒度
  • 0/"days"：天级别
  • 1/"months"：月级别
  • 2/"years"：年级别
  • 3/"decades"：十年级别
  • 4/"centuries"：世纪级别

今天按钮 (todayBtn)

• 类型：Boolean 或 "linked"
• 默认值：false
• 说明：是否显示"今天"按钮
  • true：仅滚动到当前日期
  • "linked"：滚动并选择当前日期

周起始日 (weekStart)

• 类型：Integer
• 默认值：0（周日）
• 说明：设置一周的第一天（0=周日，6=周六）

高级配置选项

自定义模板 (templates)

• 类型：Object
• 默认值：{leftArrow: '«', rightArrow: '»'}
• 说明：自定义日期选择器中的箭头等元素

方向控制 (orientation)

• 类型：String
• 默认值："auto"
• 说明：控制日期选择器弹出框的位置（如"top left"）

Z轴偏移 (zIndexOffset)

• 类型：Integer
• 默认值：10
• 说明：设置日期选择器的z-index偏移量

使用建议

1. 对于生日选择等场景，建议设置 minViewMode 为 "years" 或 "decades"
2. 需要限制可选日期范围时，使用 startDate 和 endDate 组合
3. 多语言项目务必配置 language 选项
4. 移动端考虑设置 disableTouchKeyboard 为 true 避免虚拟键盘弹出

通过合理组合这些配置选项，可以打造出完全符合项目需求的日期选择器组件。

bootstrap-datepicker uxsolutions/bootstrap-datepicker: 是一个用于 Bootstrap 的日期选择器插件，可以方便地在 Web 应用中实现日期选择功能。适合对 Bootstrap、日期选择器和想要实现日期选择功能的开发者。 项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-datepicker