在前端开发中，日期选择器是一个常用的组件。而 datetime-range-picker 就是一款方便易用的日期时间范围选择器，它能够帮助我们快速地选择一个时间段。在这篇文章中，我们将介绍如何使用 npm 包 datetime-range-picker。
安装
在命令行中使用以下命令安装 datetime-range-picker：
npm install datetime-range-picker --save
引入
可以使用 ES6 的 import 语句或 CommonJS 的 require 函数来引入 datetime-range-picker。
// ES6
import DateTimeRangePicker from 'datetime-range-picker';
// CommonJS
const DateTimeRangePicker = require('datetime-range-picker');使用
在引入 DateTimeRangePicker 后，我们可以使用以下代码创建一个日期时间范围选择器：
const picker = new DateTimeRangePicker({
element: '#picker',
startDate: new Date(),
endDate: new Date()
});DateTimeRangePicker 的 options 包括：
element: DOM 元素，表示日期时间范围选择器应该被插入到哪个位置。
startDate: Date 类型，表示时间段的开始日期。
endDate: Date 类型，表示时间段的结束日期。
然后我们在 HTML 中添加一个容器元素，例如：
<div id="picker"></div>
便可以在这个容器内创建一个日期时间范围选择器。
方法
DateTimeRangePicker 的实例方法包括：
getDate()
获取当前选择的日期时间范围，返回一个列表 [start, end]，分别表示开始和结束时间。
例如：
const date = picker.getDate(); console.log(date); // [ "2021-09-01T00:00:00.000Z", "2021-09-09T00:00:00.000Z" ]
setDate(date)
设置日期时间范围。date 参数应该是一个列表 [start, end]，分别表示开始和结束时间。
例如：
const startDate = new Date("2021-09-01T00:00:00.000Z");
const endDate = new Date("2021-09-09T00:00:00.000Z");
picker.setDate([startDate, endDate]);示例
我们来看一个完整的示例。假设我们需要在一个表单中选择一个时间段。首先，我们在 HTML 中创建一个容器：
<div id="picker"></div>
然后，在 JavaScript 中引入 DateTimeRangePicker 并创建一个实例：
import DateTimeRangePicker from 'datetime-range-picker';
const picker = new DateTimeRangePicker({
element: '#picker',
startDate: new Date(),
endDate: new Date()
});最后，我们添加一个 submit 事件监听器并在其中获取所选时间段的值，例如：
const form = document.getElementById('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
const [start, end] = picker.getDate();
console.log(start, end);
// 提交表单的代码
});结论
npm 包 datetime-range-picker 是一个非常实用的日期时间范围选择器。本文介绍了该组件的安装、引入、使用以及方法。希望读者们可以通过本文快速掌握 datetime-range-picker 的使用技巧，为自己的前端开发工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556d081e8991b448d3a5d