Bootstrap-Datepicker 组件方法详解-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00447/article/details/148392651

Bootstrap-Datepicker 组件方法详解

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

前言

Bootstrap-Datepicker 是一个基于 Bootstrap 框架的日期选择器组件，提供了丰富的 API 方法供开发者调用。本文将全面解析该组件的各种方法，帮助开发者更好地掌握其功能特性。

方法调用基础

所有方法都通过 jQuery 插件方式调用，基本语法如下：

$('.datepicker').datepicker('方法名', 参数1, 参数2);

核心操作方法

1. 显示与隐藏控制

show() - 显示日期选择器面板

$('.datepicker').datepicker('show');

hide() - 隐藏日期选择器面板

$('.datepicker').datepicker('hide');

2. 生命周期管理

destroy() - 完全移除日期选择器

$('.datepicker').datepicker('destroy');

该方法会清除所有绑定的事件、内部对象和添加的 HTML 元素。别名：remove。

日期操作相关方法

1. 日期更新与设置

update() - 更新日期选择器的值

// 使用当前输入值更新
$('.datepicker').datepicker('update');

// 设置单个日期
$('.datepicker').datepicker('update', '2023-05-15');

// 设置多个日期
$('.datepicker').datepicker('update', '2023-05-15', '2023-05-20');

// 使用Date对象
$('.datepicker').datepicker('update', new Date(2023, 4, 15));

// 使用日期数组
$('.datepicker').datepicker('update', [new Date(2023, 4, 15), new Date(2023, 4, 20)]);

// 清空选择
$('.datepicker').datepicker('update', '');

setDate() - 设置单个日期（本地时间）

$('.datepicker').datepicker('setDate', new Date());

setUTCDate() - 设置单个日期（UTC时间）

$('.datepicker').datepicker('setUTCDate', new Date());

2. 多日期操作（适用于多选模式）

setDates() - 设置多个日期（本地时间）

// 多个参数形式
$('.datepicker').datepicker('setDates', new Date(), new Date(2023, 5, 1));

// 数组形式
$('.datepicker').datepicker('setDates', [new Date(), new Date(2023, 5, 1)]);

setUTCDates() - 设置多个日期（UTC时间）

$('.datepicker').datepicker('setUTCDates', [new Date(), new Date(2023, 5, 1)]);

clearDates() - 清除所有已选日期

$('.datepicker').datepicker('clearDates');

日期获取方法

1. 单日期获取

getDate() - 获取选择的日期（转换为本地时间）

var selectedDate = $('.datepicker').datepicker('getDate');

getUTCDate() - 获取选择的日期（UTC时间，不转换）

var selectedUTCDate = $('.datepicker').datepicker('getUTCDate');

2. 多日期获取

getDates() - 获取所有选择的日期（转换为本地时间）

var selectedDates = $('.datepicker').datepicker('getDates');

getUTCDates() - 获取所有选择的日期（UTC时间，不转换）

var selectedUTCDates = $('.datepicker').datepicker('getUTCDates');

日期范围控制

1. 获取日期范围

getStartDate() - 获取最小可选日期

var minDate = $('.datepicker').datepicker('getStartDate');

getEndDate() - 获取最大可选日期

var maxDate = $('.datepicker').datepicker('getEndDate');

2. 设置日期范围

setStartDate() - 设置最小可选日期

// 设置最小日期
$('.datepicker').datepicker('setStartDate', new Date(2023, 0, 1));

// 取消限制
$('.datepicker').datepicker('setStartDate', null);

setEndDate() - 设置最大可选日期

// 设置最大日期
$('.datepicker').datepicker('setEndDate', new Date(2023, 11, 31));

// 取消限制
$('.datepicker').datepicker('setEndDate', '');

特殊日期控制

1. 禁用特定日期

setDatesDisabled() - 设置禁用的日期

// 禁用单个日期
$('.datepicker').datepicker('setDatesDisabled', '2023-05-01');

// 禁用多个日期
$('.datepicker').datepicker('setDatesDisabled', ['2023-05-01', '2023-05-02']);

// 取消禁用
$('.datepicker').datepicker('setDatesDisabled', []);

2. 按星期禁用

setDaysOfWeekDisabled() - 设置每周禁用的星期

// 禁用周末（0=周日，6=周六）
$('.datepicker').datepicker('setDaysOfWeekDisabled', [0,6]);

// 取消禁用
$('.datepicker').datepicker('setDaysOfWeekDisabled', []);

3. 高亮特定星期

setDaysOfWeekHighlighted() - 设置每周高亮的星期

// 高亮周一和周五（1=周一，5=周五）
$('.datepicker').datepicker('setDaysOfWeekHighlighted', [1,5]);

// 取消高亮
$('.datepicker').datepicker('setDaysOfWeekHighlighted', []);

最佳实践建议

日期格式统一：建议在整个项目中统一使用ISO格式（YYYY-MM-DD）或Date对象来处理日期，避免格式混乱。
时区处理：明确业务需求是否需要考虑时区，选择使用setDate/getDate（本地时间）还是setUTCDate/getUTCDate（UTC时间）。
性能优化：频繁操作日期选择器时，建议先隐藏(hide)再批量操作，最后显示(show)，减少不必要的DOM操作。
内存管理：不再使用的日期选择器应及时调用destroy()方法释放资源。