@page CanStacheMoment can-stache-moment

can-stache-moment

Moment.js helpers for CanJS Stache templates.

Installation

npm install can-stache-moment --save

(Recommended) Using CanJS's support for StealJS, you can import the helpers directly inside your templates:

<can-import from="can-stache-moment"/>

<table class="table table-hover">
<thead>
  <tr>
    <th>Date</th>
    <th>Customer</th>
    <th>Invoice</th>
  </tr>
</thead>
<tbody>
  {{#items}}
  <tr>
    <td>
      <!-- FORMATTING A DATE -->
      &nbsp;{{mFormatDate delivery_date 'MMM D, h:mm a'}}
    <td>
      {{customer.company}}
    </td>
    <td class="fit-width">
      {{invoice_number}}
    </td>
  </tr>
  {{/items}}
</tbody>
</table>

Usage

To help avoid collisions with other helpers, these helpers are all prefixed with 'm'.

There are two ways to use the included helpers.

Register all Helpers Globally

Register all helpers by simply importing the library with can-import.

import 'can-stache-moment';

Use individually in can-component

The other way is to import the module's function and use it in an individual module in your app:

// First, import the helper.
import mFormatDate from 'can-stache-moment/format-date';
import mCalendar from 'can-stache-moment/format-date';
import mTimeFromNow from 'can-stache-moment/format-date';
import template from './my-component.stache!';
import './my-component.less!';

export var MCViewModel = can.Map.extend({
  // This is the date we'll be using in the template.
  date_of_purchase: new Date()
});

Component.extend({
  tag:'my-component',
  template: template,
  viewModel:MCViewModel,
  events:{},
  // Add it to your Component's helpers. You can assign it
  // a different name if desired.  The my-component.stache file would
  // use this syntax to access the helper:
  // \{{mFormatDate dateOfPurchase 'M/D/YYYY'}}
  helpers:{
    formatDate,
    mCalendar,
    mTimeFromNow
  }
});

API

Formatting Dates with mFormatDate

\{{mFormatDate key 'String'}}

// Example
\{{mFormatDate delivery_date 'MMM D, h:mm a'}}

See the Format MomentJS docs.

Time From Now

\{{mTimeFromNow [boolean]}}

// Examples:
\{{mTimeFromNow}} --> a minute ago

// boolean is to remove the suffix.
\{{mTimeFromNow true}} --> a minute

See the Time from Now MomentJS docs.

Calendar Time

\{{mCalendar}} -->

See the Calendar Time docs for example output.

Changelog

• 3.0.0 Added compatibility with CanJS 3.0
• 1.0.0 importing the main file now registers all of the helpers globally.

Contributing

Pull requests are welcome. I will add more helpers as I need them.

Author

• Marshall Thompson