在前端开发中，我们经常需要使用日历来显示时间和日期。但是，用原生的 HTML、CSS 和 JavaScript 实现一个日历是一项复杂而繁琐的任务。此时，essence-ng2-calendar 这个 npm 包就派上了用场。它是一个基于 Angular 2 的日历组件，可轻松地嵌入到你的项目中。本文将详细介绍如何使用 essence-ng2-calendar 包。
安装
首先，我们需要在项目中安装 essence-ng2-calendar 包。要安装它，我们需要打开终端并输入以下命令：
npm install essence-ng2-calendar --save
上述命令会在你的项目中安装这个包，并把它更新到 package.json 文件中。还要记得在你的项目中导入 EssenceNg2CalendarModule 模块，以便在模板中使用它。
import { EssenceNg2CalendarModule } from 'essence-ng2-calendar'; @NgModule({ imports: [ EssenceNg2CalendarModule ] })
使用
essence-ng2-calendar 包提供了一个名为 EssenceNg2Calendar 的组件，你可以通过在模板中声明并设置它的属性来使用它。下面是一份演示如何使用该组件的示例代码：
-- -------------------- ---- ------- --------------------- -------------------------- -------------------------- ------------------------- ----------------------- ----------------------------- ----------------------------- ---------------------------------------- -----------------------展开代码
以上代码将创建一个日历，用户可以在其中选择日期。当选择日期时，该组件将触发一个 selectedDate 事件。注意，ngModel 用于双向绑定选定的日期。
属性
essence-ng2-calendar 组件有以下属性，可以在模板中设置：
ngModel：选定的日期。startWeekOnSunday：是否把周的第一天设为周日。缺省值为false。disabledWeekdays：禁用的周日日期天数。该属性是一个数组，其中包含 0 到 6，对应着周日到周六。例如，设置为[0, 6]将禁用每个周日和周六。缺省值为空数组。highlightToday：是否高亮显示今天的日期。缺省值为false。showCalendarControls：是否显示切换月份的箭头按钮。缺省值为true。showCalendarWeekdays：是否显示周中日历日期。缺省值为true。
事件
essence-ng2-calendar 组件有一个事件，可用于监控用户选择的日期：
selectedDate：当用户选择日期时，该事件被触发。它提供了一个类型为Date的参数，即用户选择的日期。
示例
下面是一个完整的示例，展示如何使用 essence-ng2-calendar 组件：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ------------- --------------------- -------------------------- -------------------------- ----------------------- --- ----------------------- ----------------------------- ----------------------------- ---------------------------------------- ----------------------- ---- ---------------- ------------ - ----- ------------ --------- - -- ------ ----- ------------ - ------------- ----- -------------------- ----- - ----------------- - ----- - -展开代码
以上代码将创建一个带日历和日期文本的页面。在页面上，用户可以选择日期，选定的日期将在下方的文本中显示出来。
总结
本文介绍了如何在 Angular 2 中使用 essence-ng2-calendar npm 包。我们讨论了安装该包时需要使用的命令，如何导入 EssenceNg2CalendarModule 模块，以及如何在模板中使用 EssenceNg2Calendar 组件。另外，我们介绍了该组件的属性和事件，并提供了一个完整的演示示例供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e06c4
