前言
在前端开发中,使用日期选择组件是非常常见的需求。如果我们使用原生的日期选择控件,往往样式不能完全满足我们的要求,而且在不同浏览器中效果也不尽相同。因此,我们常常需要使用一些第三方日期选择库。而今天我们要介绍的就是一款非常轻量级、易于使用的日期选择组件 - scrolling-calendar。
安装
我们可以通过 npm 将 scrolling-calendar 安装到我们的项目中:
--- ------- ------------------ ------
使用
引入
在需要使用 scrolling-calendar 的地方,我们需要先引入它:
------ ----------------- ---- ---------------------
基本使用
---- --------------------
----- -------- - --- ------------------- --- ------------ ----- --- ------------- ------------- -------------- - ------------------ - ---
使用 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