https://github.com/jdforsythe/angular-moment-format-filters
A set of Angular display filters for working with Moment JS dates and times
https://github.com/jdforsythe/angular-moment-format-filters
angular angular-directive angular-directives angular-display-filters angularjs conversion filter momentjs timestamp
Last synced: about 1 month ago
JSON representation
A set of Angular display filters for working with Moment JS dates and times
- Host: GitHub
- URL: https://github.com/jdforsythe/angular-moment-format-filters
- Owner: jdforsythe
- Created: 2016-04-19T19:19:09.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-05-24T19:25:44.000Z (about 9 years ago)
- Last Synced: 2026-02-07T13:50:25.657Z (4 months ago)
- Topics: angular, angular-directive, angular-directives, angular-display-filters, angularjs, conversion, filter, momentjs, timestamp
- Language: JavaScript
- Size: 45.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
angular-moment-format-filters
==============================
[](https://travis-ci.org/jdforsythe/angular-moment-format-filters)
A set of Angular display filters for use with the [Moment.js](http://momentjs.com) and [Moment Timezone](http://moment.js/timezone) libraries
## Dependencies
1. Angular (`bower install -S angular`)
2. Moment JS (`bower install -S moment`)
3. Moment Timezone (optional - for use with the timezone conversion filters - `bower install -S moment-timezone`)
## Installation
```bash
$ bower install angular-moment-format-filters
```
## Setup
Include `angular-moment-format-filters'` in your module's dependencies:
```js
angular.module('myApp', ['angular-moment-format-filters']);
```
And add the dependencies as script tags:
```html
```
## Examples
To see the examples below in action, check out the [Fiddle](https://jsfiddle.net/jdforsythe/mjq5whk5/1/)
## Filters
There are two pairs of filters.
1. `momentFormat` and `momentFormatServerTimestamp`
2. `momentFromNow` and `momentFromNowServerTimestamp`
### momentFormat Filter
The `momentFormat` filter will format a moment-able object (string, JS Date object, existing moment object, etc.) based on the [Moment format string](http://momentjs.com/docs/#/displaying/format).
Parameters to the filter are:
- formatString (required) - [Moment format string](http://momentjs.com/docs/#/displaying/format)
- hideErrors (optional - default false) - whether to suppress errors (returns empty string on invalid date input)
```js
$scope.date_one = '2016-01-18';
$scope.date_two = new Date(2016, 0, 18);
$scope.date_three = moment('2016-01-18');
$scope.date_four = moment(null);
```
```html
{{ date_one | momentFormat:'MM/DD/YYYY' }}
{{ date_two | momentFormat:'DD/MM/YYYY' }}
{{ date_three | momentFormat:'MMMM Do, YYYY' }}
{{ date_four | momentFormat:'MM/DD/YYYY',false }}
{{ date_four | momentFormat:'MM/DD/YYYY',true }}
```
```
01/18/2016
18/01/2016
January 18th, 2016
Invalid Date
[empty string]
```
### momentFromNow Filter
The `momentFromNow` filter will format a moment-able object (string, JS Date object, existing moment object, etc.) as a [human-readable time difference from now](http://momentjs.com/docs/#/displaying/fromnow).
Parameter to the filter:
- hideErrors (optional - default false) - whether to suppress errors (returns empty string on invalid date input)
```js
$scope.date_one = new Date();
$scope.date_two = '2016-04-19 15:04:00';
$scope.date_three = moment('2015-04-19');
$scope.date_four = moment(null);
```
```html
{{ date_one | momentFromNow }}
{{ date_two | momentFromNow }}
{{ date_three | momentFromNow }}
{{ date_four | momentFromNow }}
{{ date_four | momentFromNow:true }}
```
```
a few seconds ago
an hour ago
a year ago
Invalid Date
[empty string]
```
### ServerTimestamp filter varieties
In many cases, when using timestamps in a database, the timestamps will be stored in UTC time (or some other base time) and the users are in different timezones.
The Moment Timezone library makes it easy to convert times across timezones.
To set the proper timezones, configure the filters:
```js
angular.module('myApp', ['angular-moment-format-filters'])
.config(function(momentFormatConfigProvider) {
momentFormatConfigProvider.setConfig({
localTimezone: 'America/New_York',
serverTimezone: 'America/Los_Angeles'
});
});
```
#### Config Options
* `localTimezone`: (string) the standard timezone string for the _end user_ (i.e. browser timezone)
* default: `'Etc/UTC'`
* `serverTimezone`: (string) the standard timezone string for the _server_
* default: `'Etc/UTC'`
Conversions will be made *from* `serverTimezone`, *to* `localTimezone`
#### Example
Assuming the configuration example provided above...
```js
$scope.server_timestamp_one = '2016-01-18 12:00:00';
$scope.server_timestamp_two = '2016-04-19 12:16:00';
```
```html
{{ server_timestamp_one | momentFormatServerTimestamp:'MM/DD/YYYY HH:mm' }}
{{ server_timestamp_two | momentFromNowServerTimestamp }}
```
```
01/18/2016 15:00 (converted 12:00pm Pacific to 3:00pm Eastern)
a minute ago (assuming it's 3:17pm Eastern, 12:16pm Pacific is a minute ago)
```
## Tests
A round of tests is included. To run the tests, execute:
```
gulp test
```
## Contributions
Contributions are always welcome. Please submit issues and pull requests.
## License
[MIT](LICENSE)