Bootstrap 5 Datepicker 示例

简介

Bootstrap 5 Datepicker 是一个基于 Bootstrap 5 的日期选择器插件，它提供了丰富的功能和灵活的配置选项，使得在网页或应用程序中集成日期选择器变得非常简单。本文将介绍如何使用 Bootstrap 5 Datepicker 插件，并提供一些示例代码供参考。

安装

你可以通过以下方式来安装 Bootstrap 5 Datepicker 插件：

使用 CDN

在你的 HTML 文件中添加以下代码片段：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datepicker/css/datepicker.css">
<script src="https://cdn.jsdelivr.net/npm/datepicker/js/datepicker.js"></script>

使用 npm

在你的项目目录中运行以下命令来安装依赖：

npm install @datepicker-js/bootstrap@5.0.2

然后在你的代码中导入并使用插件：

import { Datepicker } from '@datepicker-js/bootstrap';

// 使用 Datepicker 插件

示例

以下是一些示例代码，展示了如何使用 Bootstrap 5 Datepicker 插件的一些常见功能：

基本示例

<div class="input-group">
  <input type="text" class="datepicker-input">
  <button class="btn btn-secondary" id="datepicker-trigger">选择日期</button>
</div>

<script>
  const datepicker = new Datepicker(document.querySelector('.datepicker-input'), {
    clearButton: true,
    todayButton: true,
    showAllButton: true,
    weekStart: 1, // 从星期一开始
    format: 'yyyy-mm-dd', // 日期格式
  });

  document.querySelector('#datepicker-trigger').addEventListener('click', () => {
    datepicker.show();
  });
</script>

设置可选日期范围

<div class="input-group">
  <input type="text" class="datepicker-input">
</div>

<script>
  const datepicker = new Datepicker(document.querySelector('.datepicker-input'), {
    range: {
      from: new Date(),
      to: new Date().setMonth(new Date().getMonth() + 1), // 从当前日期到下个月
    },
  });
</script>

事件处理

<div class="input-group">
  <input type="text" class="datepicker-input">
  <button class="btn btn-secondary" id="datepicker-trigger">选择日期</button>
</div>

<script>
  const datepicker = new Datepicker(document.querySelector('.datepicker-input'), {
    onSelect: (instance, date) => {
      // 日期选择后的回调函数
      console.log(date);
    },
    onShow: (instance) => {
      // 日期选择器显示时的回调函数
    },
    onHide: (instance) => {
      // 日期选择器隐藏时的回调函数
    },
  });

  document.querySelector('#datepicker-trigger').addEventListener('click', () => {
    datepicker.show();
  });
</script>

结语

Bootstrap 5 Datepicker 是一个简单易用的日期选择器插件，它提供了丰富的功能和灵活的配置选项，方便程序员在网页或应用程序中集成和使用。通过本文的介绍和示例，你应该能够快速上手并使用 Bootstrap 5 Datepicker 插件了。详细的文档可以在官方文档中找到。