介绍
ember-cli-kalendae 是一个用于日期选择的插件，基于 Kalendae 实现。它可以方便地在 Ember 应用程序中使用，并提供了许多配置选项。
本文将向您展示如何在您的 Ember 应用程序中使用 ember-cli-kalendae 。
安装
使用下面的命令来安装 ember-cli-kalendae ：
npm install ember-cli-kalendae --save-dev
引用
在你要使用的模块中，您需要通过模块引入方法将 ember-cli-kalendae 引入到您的项目中，以便在您的 Ember 应用中使用它。例如，如果您想使用它在名为 MyComponent 的组件中，请通过以下方式添加该对象：
import kalendae from 'ember-cli-kalendae';
使用方法
现在您已经将 ember-cli-kalendae 库添加到您的项目中，可以使用它来创建日历控件。首先，您需要在您的 HTML 文件中添加以下代码：
{{kalendae inputDate=(readonly model.date)}}这个代码区域创建了基本的 Kalendae 日历控件，并将其绑定到模型的 date 属性上。输入框的日期设置为只读，因此用户无法通过输入手动更改日期。
配置选项
您可以通过向组件传递选项对象来自定义 Kalendae 控件的行为和外观。下面是一些最常用的选项：
inputClass：指定 Kalendae 控件生成的 输入框应具有的 class。
{{kalendae inputClass="my-input-class"}}monthFormat：设置日期选择器标题中显示的月份格式。例如，要将月份显示为三个字母，请使用MMM；要将月份显示为完整的名称，请使用MMMM。
{{kalendae monthFormat='MMMM'}}selectedClass：将该 class 分配给所选日期的单元格。
{{kalendae selectedClass='my-selected-date'}}具体的选项配置详见 Kalendae 官网文档。
示例代码
-- -------------------- ---- ------- ---------- --------------- --------------- --------------------------- -------------------------------- ------------------ ------------------- ----------- ---------------- -------------- --
以上代码创建了一个 Kalendae 日历控件，其最小日期和最大日期由 minDate 和 maxDate 提供。它会将 .my-input-class class 分配给输入框并将 .my-selected-date class 分配给所选日期的单元格。日期的月份将以完整的名称格式显示，并且只是作为 readonly 属性展示。在我日期选择时，调用相应的 action 函数。
结论
ember-cli-kalendae 是一个非常好用的 DatePicker 插件，其配置性非常强，对 Ember 应用程序开发者来说是一个不错的选择。通过本文指南，你能够了解如何使用该库并更好地为你的项目量身定制。
如果您对 Ember 应用程序开发的其他方面有任何问题，请随时查看 Ember.js 官方文档。他们提供了广泛的文献，可以帮助您推进 Ember 应用程序开发的各个方面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc2d1