如何使用bootstrap的daterangepicker插件

Posted 2023-04-13

方法/步骤

1
首先，我们将这款日期控件下载下来。百度bootstrap-daterangepicker即可。

2
下载下来解压的文件如图。
主要文件有
daterangepicker.js
moment.js
bootstrap.min.css
daterangepicker-bs3.css
即两个js文件，两个css文件。

3
我们先打开demo看一下。
这个日历效果很好，外形也十分美观。

4
打开demo的代码，小编就以demo为例，来介绍一下这款日期控件的用法。
首先，我们可以看到，这里有一个input。
然后js中通过id“#reservation”来定位这个input，使它成为一个日期控件。
激活日期控件的方法很简单（无参数法）
$('#reservation').daterangepicker();
这样就可以建立一个最简单日期选择器了。
效果如图。

5
加参数的日历可以通过自己修改初始化参数来选择自己要用的日期选择器。
bootstrap的这款控件还是相当强大的，几乎可以满足你的一切要求。
在参数的设置下，你可以得到各种各样的日期选择格式，如图。

6
具体的参数列表在bootstrap的官网上可以找到，介绍还算清楚。地址如图。
但一般用不到那么多，需要改的一般就是format、weekStart、startView等。

END
方法/步骤2

但参数不一定可以满足我们的需求，有时候我们还需要其他的东西，比如说想要一个中文的日期选择器。
那么这就需要我们自己手动改一下代码了。
打开daterangepicker.js文件。
这里面就是日期选择器的源码。
这里面只是对参数分析和日期选择器基础模板的代码，但是具体的显示的东西在另一个文件里。

其实这个日期选择器的生成机制很简单。
就是js中写好了基本框架的html代码，然后根据初始化参数添加上对应的html代码，再用jquery的append等类似的函数输出这个日期选择器到指定位置。
所以，我们可以在js中找到模板的html代码，并根据自己的需要加以更改。
比如我想要一个中文的日期选择器。
打开moment.js文件，这里面有一些数组，储存的显示的东西，比如星期，12个月份的显示，当然，都是英文的。
看到这一行代码了吗：_months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_")
这是月份，我们把它改成中文。
当然，还有其他的地方，我们都可以根据自己的需要进行更改。
注意：记得更改引用文件。 参考技术A 首先，我们将这款日期控件下载下来。百度bootstrap-daterangepicker即可。 2 下载下来解压的文件。 主要文件有 daterangepicker.js moment.js bootstrap.min.css daterangepicker-bs3.css 即两个js文件，两个css文件。 3 我们先打开demo看一下。...本回答被提问者采纳

如何在 Vue 组件中使用 Bootstrap？

【中文标题】如何在 Vue 组件中使用 Bootstrap？

【英文标题】：How can I use Bootstrap in Vue components?

【发布时间】：2020-12-17 15:53:41

【问题描述】：

我在这两个地方放了相同的 html（使用 Bootstrap 4.5.2）。

index.html App.vue

在 index.html 中，Bootstrap 样式有效。在 App.vue 中，按钮之间的空间失败。我通过将mr-1 类添加到按钮来解决此问题。将普通 Bootstrap 放入组件时如何避免修复它？

我尝试了什么（结果相同）

在index.html添加官方BootstrapCDN代码

将此添加到main.js 并安装模块

import jQuery from "jquery";
global.jQuery = jQuery;
let Bootstrap = require("bootstrap");
import "bootstrap/dist/css/bootstrap.css";

在 App.vue 的 <style> 部分添加了这个

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');

莫敏的建议：

将所有内容安装在项目文件夹目录中

npm install bootstrap jquery popper.js

将此添加到main.js: 的顶部

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

【问题讨论】：

您在使用 BootstrapVue 吗？还是你现在想要？ bootstrap-vue.org

没有。不，我可能不得不这样做。我的网站也将使用 Django + Bootstrap。

@DavidSmolinkski 我认为您不一定需要，但我之前使用过 BootstrapVue，我发现它非常有用且易于实现。绝对值得一试:)

我 90% 确定我会使用 Vuetify。它有很多视频教程，我应该学习一个 UI 框架。在我学习代码的 1 或 2 年中，我基本上消除了阅读视频之外的需要。我仍然会尝试让纯 Bootstrap 工作。 Django 模板将具有 Bootstrap。我选择了 Bootstrap，这样我可以有更少的选择、一个普通的网站和更多的教程。

【参考方案1】：

如果您需要 Bootstrap，请使用 BootsrapVue，它会为您完成繁重的工作。 如果您仍然愿意接受其他选择，Vuetifyjs 是一个非常好的框架，可以提供很多东西。

【参考方案2】：

BootstrapVue 是一个不错的选择，但这完全取决于您。人们可以整天推荐其他替代方案（例如 Tailwind Vue）。 BootstrapVue 很好，因为如果您已经熟悉 Bootstrap，那么您将立即熟悉 BootstrapVue。同样，如果它确实对您的目的有用，那就去吧。

我个人喜欢包含您需要的内容的功能。

在此处的 BootstrapVue 文档“单个组件和指令”中了解更多信息：https://bootstrap-vue.org/docs#component-groups-and-directives-as-vue-plugins

【参考方案3】：

添加引导样式和 javascript

在您的项目目录中安装 Bootstrap 及其依赖项。

npm install bootstrap jquery popper.js

如果你不打算使用 Bootstrap 的 JavaScript 而只使用它的样式，不要担心安装 jQuery 或 Popper.js

最后，将这些行添加到project/src/main.js: 的顶部，将其导入主脚本

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

重复一遍，如果您只想要样式而不是 JavaScript 功能，只需删除第一行并仅包含 CSS。

【讨论】：

谢谢。这产生了相同的结果。我将使用 Vuetify。