moment-element.html
3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!--
@license
Copyright (c) 2015 Abdón Rodríguez Davila (@abdonrd). All rights reserved.
This code may only be used under the MIT license.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="moment-import.html">
<!--
Polymer element wrapper for the [moment](https://github.com/moment/moment) library.
Examples:
<moment-element></moment-element>
<moment-element datetime="1991-12-31" output-format="MMM DD[,] YYYY"></moment-element>
@demo demo/index.html
-->
<dom-module id="moment-element">
<template>
</template>
<script>
Polymer({
is: 'moment-element',
properties: {
/**
* The input datetime. If don't set the datetime, the datetime will be now.
* For consistent results, parsing anything other than ISO 8601 strings
* with the `inputFormat` property. More information in [moment String](http://momentjs.com/docs/#/parsing/string/).
*/
datetime: String,
/**
* The datetime input format. An string using the
* [moment String + Format](http://momentjs.com/docs/#/parsing/string-format/).
*/
inputFormat: String,
/**
* The datetime output format. Options are 'now' or datetime using the
* [moment Format](http://momentjs.com/docs/#/displaying/format/).
*/
outputFormat: String,
/**
* Relative time using [momen time from now](http://momentjs.com/docs/#/displaying/fromnow/)
* or [momen Time from datetime](http://momentjs.com/docs/#/displaying/from/).
*/
from: String,
/**
* Relative time using [momen Time to now](http://momentjs.com/docs/#/displaying/tonow/)
* or [momen Time to datetime](http://momentjs.com/docs/#/displaying/to/).
*/
to: String,
/**
* The output datetime.
*/
output: String
},
ready: function() {
this.output = this._initializeMoment();
if (this.from) {
this.output = this._getFrom();
} else if (this.to) {
this.output = this._getTo();
}
Polymer.dom(this.root).innerHTML = this.output;
},
_initializeMoment: function() {
if (this.datetime && this.inputFormat) {
var output = moment(this.datetime, this.inputFormat);
} else if (this.datetime) {
var output = moment(this.datetime);
} else {
var output = moment();
}
if (this.outputFormat) {
return output.format(this.outputFormat);
} else {
return output;
}
},
_getFrom: function() {
if (this.from === 'now') {
return this.output.fromNow();
} else {
return this.output.from(moment(this.from));
}
},
_getTo: function() {
if (this.to === 'now') {
return this.output.toNow();
} else {
return this.output.to(moment(this.to));
}
}
});
</script>
</dom-module>