BootstrapDatePicker Legacy是一款基于 Bootstrap 框架的日期选择器插件，它提供了一个丰富的 API 和可自定义的 UI。它易于使用且功能丰富，支持多种语言和日期格式。它可以方便地用于前端网页。

安装

BootstrapDatePicker Legacy 通过 NPM 发布。

您可以通过以下命令来安装：

npm install bootstrap-datepicker-legacy

引入

引入 Bootstrap 和 BootstrapDatePicker Legacy.jar 文件：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrap-datepicker.js"></script>
<link href="../dist/css/bootstrap-datepicker.css" rel="stylesheet">

快速上手

在你的 HTML 中加入以下代码：

<input type="text" id="datepicker">

在 JavaScript 文件中，使用以下代码：

$(function() {
   $('#datepicker').datepicker(
       {
           format: "yyyy-mm-dd",
           autoclose: true
       }  
   );
});

现在，您已经完成了基本的 BootstrapDatePicker Legacy 配置，在日期选择上对齐有了更好的掌控。

日期范围限制

BootstrapDatePicker Legacy 有两种日期范围限制，一种是 startDate，表示 DatePicker 可选的最小日期；另一个是 endDate，表示 DatePicker 可选的最大日期，代码如下所示。

$(function(){
  $('#datepicker').datepicker({
    startDate: new Date("2010-10-01"),
    endDate: new Date("2020-12-31"),
    format: 'yyyy-mm-dd',
    autoclose: true
  });
});

监听事件

BootstrapDatePicker Legacy 中提供了多种事件监听器，可根据您的需求进行处理。

这里举一个例子，限制选择的日期范围为今天及以后，在实现中同时监听 changeDate 和 show 事件。

-- -------------------- ---- -------
-------------
  -----------------------------
    ---------- --- -------
    ------- -------------
    ---------- ----
  --
  -----------------------------
    --- ------- - -------
    --- ---------- - --- -------
    --------------------------------------- - ---
    ---------- - ------------
      --------------------------------------------------
    -
  --
  ----------------------
    --- ---------- - --- -------
    --------------------------------------- - ---
    -------------------------------------------------------
  ---
---

上面的代码监听了 changeDate 和 show 事件，当选择的日期小于当前日期时，会将日期强制设置为当前日期；而在 datePicker 显示时，会将最早的选择日期想透入一天。

自定义模板

BootstrapDatePicker Legacy 允许完全自定义模板。您可以使用与 Bootstrap Theme 样式相同的模板样式，也可以在 CSS 中自定义模板样式。

在模板中，您可以使用一些参数取出选择的日期、月、年等高级信息。

以下是许多可用选项的列表：

dd 选中日期的两位数字表示。
d 选中日期的一位数字表示。
DD 选中日期的长名称。
D 选中日期的短名称表示。
mm 选中月份的两个数字表示。
m 选中月份的一位数字表示。
MM 选中月份的名称。
M 选中月份的名称缩写。
yyyy 选中年份的四位数字表示。
yy 选中年份的两位数字表示。

以下是自定义模板的示例代码：

-- -------------------- ---- -------
-------------
  -----------------------------
    ------- -------------
    ---------- -----
    -----------
        ---------- --- ---------------- ----------------------------
        ----------- --- ---------------- -----------------------------
        ------ --- ---------------- ----------------------------
        ------ --- ---------------- ----------------------
    -
  ---
---

在此示例中，BootstrapDatePicker Legacy 的左箭头、右箭头、今天和清除图标分别设置为了不同的模板。这些模板样式可以在 CSS 文件中进行自定义。

总结

通过本文，您已经获得了关于如何使用 BootstrapDatePicker Legacy 的详细教程。您可以使用此插件轻松地创建自定义的日期选择器，并在您的前端网页中加入丰富多彩的功能。

使用 BootstrapDatePicker Legacy 不仅可以节省您的时间，而且能够提供更好的用户体验和可操作性。愿此插件为您的前端技术发展提供帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066c7dccdc64669dde4c59

使用 Bootstrap DatePicker Legacy简介

安装

引入

快速上手

日期范围限制

监听事件

自定义模板

总结

纠错反馈