npm 包 ember-pikaday-time 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

ember-pikaday-time 是一个 Ember.js 的插件，它封装了 Pikaday 和 Moment.js，并提供了一个方便的 DateTimePicker 选择器组件，可以轻松地在 Ember 应用程序中使用。

安装

要使用 ember-pikaday-time，您需要安装它：

npm install --save-dev ember-pikaday-time

用法

使用 ember-pikaday-time，您可以轻松地将 DateTimePicker 选择器组件添加到您的 Ember 应用程序中。要使用它，按照以下步骤操作：

在需要使用 DateTimePicker 的组件中导入 addon/components/date-time-picker.js 组件。

import DateTimePickerComponent from 'ember-pikaday-time/addon/components/date-time-picker';

然后，您需要定义一个名为 currentDateTime 的属性和一个名为 format 的日期格式表示属性。在模板中，您可以使用参数模板来渲染 DateTimePicker 组件并将其放入 HTML 中。

{{date-time-picker value=currentDateTime format=format}}

最后，在您的应用程序的控制器中，您需要定义 currentDateTime 和 format 日期格式化。

import Controller from '@ember/controller';

export default Controller.extend({
  currentDateTime: new Date(),
  format: 'YYYY-MM-DD HH:mm:ss'
});

这样，DateTimePicker 组件现在就可以在您的应用程序中使用了！

Example

以下示例演示了示例代码的简单示例：

-- -------------------- ---- -------
-- ---------------------------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ----------------------- ---- -------------------------------------------------------
------ ------ ---- ---------

------ ------- ----- ---------------- ------- --------- -
  --------------- - --- ------
  ------ - ----------- ------

  -------
  -------------------- -
    ---------------------------------------------- -- ---------- -----
  -
-

<!-- app/templates/components/pick-time.hbs -->
<h1>Pick time: {{moment this.currentDateTime format}}</h1>
<DateTimePicker @value={{this.currentDateTime}} @format={{this.format}} @onChange={{this.updateDateTime}}/>

指导意义

ember-pikaday-time 是一个非常有用的插件，它为 Ember 应用程序提供了一个轻松的 DateTimePicker 组件。此插件的使用非常简单，但它弥补了 Ember.js 缺少的类似插件的空白，使我们的工作丝毫不受影响。

这篇文章主要介绍了 ember-pikaday-time 的使用方法，希望对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecaba