前言
本教程将向大家介绍如何使用 npm 包 ng2-daterangepicker-ext 来实现日期范围选择器，该组件基于 ngx-daterangepicker-material 和 moment-range 进行二次封装，具有更好的使用体验和更可定制化的样式。
安装
在项目目录下执行以下命令安装 ng2-daterangepicker-ext：
npm install ng2-daterangepicker-ext --save
引入
在需要使用日期范围选择器的组件中，需要先引入 Moment.js 和 ng2-daterangepicker-ext，示例代码如下：
<!-- 需要引入 Moment.js --> <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <!-- 引入 ng2-daterangepicker-ext --> <link rel="stylesheet" href="node_modules/ng2-daterangepicker-ext/style.css"/> <script src="node_modules/ng2-daterangepicker-ext/bundles/ng2-daterangepicker-ext.umd.js"></script>
使用
在需要使用日期范围选择器的组件中，需要先定义一个双向绑定的变量 dateRangeModel，示例代码如下：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------- - ---- ------------------------------------------------------- ------------ --------- ------------------------ ------------ ------------------------------------ -- ------ ----- ------------------------ - ------ --------------- ---------- ------------- - - -
然后，在模板文件中调用组件 ngx-daterangepicker-material 并设置属性 ranges 和 localeConfig，示例代码如下：
<ngx-daterangepicker-material [(ngModel)]="dateRangeModel" [ranges]="ranges" [localeConfig]="localeConfig"> </ngx-daterangepicker-material>
其中，ranges 属性是可选的，用于设置预设的日期范围；localeConfig 属性也是可选的，用于设置本地化配置。
那么，如何设置 ranges 和 localeConfig 呢？我们来看一下具体的示例。
设置 ranges
在组件中定义 ranges 变量，示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -------------------------------------------------------
------------
--------- ------------------------
------------ ------------------------------------
--
------ ----- ------------------------ -
------ --------------- ----------
------ ------- --- - -
----- ---------- ----------
----- --------------------- -------- -------------------- ---------
--- - --- --------------------- -------- ----------
--- -- --- ---------------------- -------- ----------
------ --------------------------- -------------------------
------ --------------------- -------------------------- -------------------- ------------------------
--
------------- - -
-上面的 ranges 设置了 6 种预设日期范围，其中的每一行都是一个键值对，键是显示在选择器中的名称，值是一个数组，分别表示范围的开始和结束时间。这里采用了 moment() 方法来获取当前时间和操作时间，需要先引入 Moment.js。
设置 localeConfig
在组件中定义 localeConfig 变量，示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -------------------------------------------------------
------------
--------- ------------------------
------------ ------------------------------------
--
------ ----- ------------------------ -
------ --------------- ----------
------ ------- --- - -
----- ---------- ----------
----- --------------------- -------- -------------------- ---------
--- - --- --------------------- -------- ----------
--- -- --- ---------------------- -------- ----------
------ --------------------------- -------------------------
------ --------------------- -------------------------- -------------------- ------------------------
--
------ ------------- --- - -
----------- -----
------------ -----
---------- -------
-------- -------
----------------- ------
------- -------------
--------------- - - --
----------- ----- ---- ---- ---- ---- ---- -----
----------- -
----- ----- ----- ----- ----- -----
----- ----- ----- ----- ------ -----
--
--------- -
--
------------- - -
-上面的 localeConfig 设置了选择器的文本显示，包括应用按钮、取消按钮、开始时间标签、结束时间标签、自定义标签、日期格式、日期分隔符、星期几名称和月份名称等，可以根据需要进行修改。
完整示例代码
下面是一个完整的示例代码，包括引入、组件定义、设置 ranges 和 localeConfig，以及绑定双向数据模型和自定义选中事件等，供大家参考：
-- -------------------- ---- -------
---- -- --------- ---
------- --------------------------------------------------------------------------------
---- -- ----------------------- ---
----- ---------------- -------------------------------------------------------
------- -------------------------------------------------------------------------------------------
---- ----------- ---
------------- -------------------
----------------------------- ----------------------------
-----------------
-----------------------------
--------------------------------------
-------------------------------
---------------
---- --------- ---
---- -------------------
------------ ----------------------------------------- - - - - - --------------------------------------- ---------
------
---- ---------- ---
------ - --------- - ---- ----------------
------ - --------- - ---- -------------------------------------------------------
------------
--------- ------------------------
------------ ------------------------------------
--
------ ----- ------------------------ -
------ ---------- - ------
------ ---------- - ------
------ --------------- ----------
------ ------- --- - -
----- ---------- ----------
----- --------------------- -------- -------------------- ---------
--- - --- --------------------- -------- ----------
--- -- --- ---------------------- -------- ----------
------ --------------------------- -------------------------
------ --------------------- -------------------------- -------------------- ------------------------
--
------ ------------- --- - -
----------- -----
------------ -----
---------- -------
-------- -------
----------------- ------
------- -------------
--------------- - - --
----------- ----- ---- ---- ---- ---- ---- -----
----------- -
----- ----- ----- ----- ----- -----
----- ----- ----- ----- ------ -----
--
--------- -
--
------------- - -
-- ------------
------------------------- ---------- -
------------------- - ----------
--------------- - ------
--------------- - -----
-
-总结
npm 包 ng2-daterangepicker-ext 是一个非常方便的日期范围选择器组件，本教程向大家讲解了如何安装、引入和使用该组件，以及如何设置可选的 ranges 和 localeConfig 属性进行样式和文本上的定制，希望可以对大家在前端开发中实现日期范围选择功能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e0565