Semantic UI Calendar 是一个基于 Semantic UI 框架的日期选择器组件，提供了一系列强大的功能和定制选项。本文将介绍如何使用 npm 包来安装和使用 Semantic UI Calendar。
安装
首先，在项目根目录下打开终端窗口，执行以下命令安装 Semantic UI Calendar：
npm install semantic-ui-calendar
引入
在 HTML 页面中引入 Semantic UI Calendar 的样式文件和 JavaScript 文件：
<link rel="stylesheet" href="/node_modules/semantic-ui-calendar/dist/calendar.min.css"> <script src="/node_modules/semantic-ui-calendar/dist/calendar.min.js"></script>
使用
基本用法
添加 input 元素，并为其设置 id 属性，然后用 JavaScript 初始化 Semantic UI Calendar：
-- -------------------- ---- -------
---- --------- --------- --------------
---- --------- ----- ---- ------
-- --------------- ----------
------ ----------- -------------------
------
------
--------
--------------------------
---------以上代码将在页面中显示一个带有日历图标的 input 元素，点击该元素即可弹出日期选择器。
设置默认值
可以通过设置 initialDate 或 initialTime 来将日期选择器的初始值设置为指定的日期或时间，例如：
-- -------------------- ---- -------
---- --------- --------- --------------
---- --------- ----- ---- ------
-- --------------- ----------
------ ----------- -------------------
------
------
--------
-------------------------
------------ --- ------------------
---
---------自定义日期格式
可以通过设置 formatter 来自定义日期格式，例如：
-- -------------------- ---- -------
---- --------- --------- --------------
---- --------- ----- ---- ------
-- --------------- ----------
------ ----------- -------------------
------
------
--------
-------------------------
---------- -
----- -------- ------ --------- -
-- ------- ------ ---
--- --- - ---------------
--- ----- - --------------- - --
--- ---- - -------------------
------ ---- - --- - ----- - --- - ----
-
-
---
---------以上代码将日期格式设置为 yyyy-mm-dd 格式。
总结
本文介绍了如何使用 npm 包 Semantic UI Calendar，并提供了基本用法、设置默认值和自定义日期格式等示例。希望读者能够通过本文的学习和实践，灵活应用 Semantic UI Calendar，优化前端开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36056