前言
在前端开发中，使用日期选择组件是非常常见的需求。如果我们使用原生的日期选择控件，往往样式不能完全满足我们的要求，而且在不同浏览器中效果也不尽相同。因此，我们常常需要使用一些第三方日期选择库。而今天我们要介绍的就是一款非常轻量级、易于使用的日期选择组件 - scrolling-calendar。
安装
我们可以通过 npm 将 scrolling-calendar 安装到我们的项目中：
npm install scrolling-calendar --save
使用
引入
在需要使用 scrolling-calendar 的地方，我们需要先引入它：
import ScrollingCalendar from 'scrolling-calendar';
基本使用
<div id="calendar"></div>
const calendar = new ScrollingCalendar({
el: '#calendar',
days: 30,
selectedDate: '2021-07-01',
onSelect(date) {
console.log(date);
}
});使用 ScrollingCalendar 构造函数传入一个配置对象，其中：
el: 需要绑定日历的 DOM 元素选择器。days: 展示天数，默认为 30 天，即从当前日期向后展示 30 天。selectedDate: 默认选中的日期，格式为YYYY-MM-dd。onSelect: 选中日期时触发的回调函数。
自定义样式
我们可以使用 css 自定义 ScrollingCalendar 的样式：
-- -------------------- ---- -------
-------
------------------- -
------- --- ----- -----
------ ------
-
---------------- -
-------- -----
---------------- -------
------------ -------
------- -----
---------- -----
----------------- --------
-
-------------- -
-------- -----
---------- -----
-
------------- -
------ --------- - ---
------- -----
------------ -----
----------- -------
-
------ -
----------------- -----
-
--------- -
----------------- --------
------ -----
-
--------示例
下面为一个完整的示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ----------
-------
------------------- -
------- --- ----- -----
------ ------
-
---------------- -
-------- -----
---------------- -------
------------ -------
------- -----
---------- -----
----------------- --------
-
-------------- -
-------- -----
---------- -----
-
------------- -
------ --------- - ---
------- -----
------------ -----
----------- -------
-
------ -
----------------- -----
-
--------- -
----------------- --------
------ -----
-
--------
-------
------
---- --------------------
------- ------------------------
-------
--------- -------------------- ---- -------
------ ----------------- ---- ---------------------
----- -------- - --- -------------------
--- ------------
----- ---
------------- -------------
-------------- -
------------------
-
---总结
scrolling-calendar 是一个非常好用的日期选择组件，使用它可以方便地实现自定义样式、自定义显示范围等功能，而且体积非常小，只有不到 2kB。希望本文介绍的教程能够帮助大家更好地使用 scrolling-calendar。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e8381e8991b448dbdfd