yaru22 / angular-timeago Goto Github PK
View Code? Open in Web Editor NEWAngular directive/filter/service for formatting date so that it displays how long ago the given time was compared to now.
License: MIT License
Angular directive/filter/service for formatting date so that it displays how long ago the given time was compared to now.
License: MIT License
https://plnkr.co/edit/AbAMrP0Mm8Y92tBajTAD?p=preview
I prefer the filter directive style but it does not appear to update since angular 1.2. You can see all of the angular versions I tried in the plnkr. 1.2.28 works, but nothing more recent. (I didn't try angular 2+)
I see that #36 appears to be others reporting the same issue, but they just switched to the directive form, which still appears to work, instead of identifying the likely angular compatibility issue.
Thank you so much!
If I put this in a template
{{row.timestamp | timeAgo}}
and row.timestamp is null or the property doesn't exist, the output is "NaN years ago". In my opinion that output is never intended by the developer or helpful for the user.
Instead, I propose the output should be null or an empty string. This would be analogous to what happens for null values if you do not use timeAgo. If row.timestamp is null and the template contains
{{row.timestamp}}
the output is empty.
Implementing this would also be useful for developers who want to leave some cells in a table empty, when there is no meaningful date to display for a particular row.
For example, a web-based game may have an Achievements page with a table with the columns "Name" and "Unlocked date". The unlocked achievements in the table would have dates in the second column, but the locked achievements would not.
It would be nice if you could write this on the readme file.
Timeout causes protractor tests to fail with the message: Error: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md
The current fix is to use interval instead: angular/protractor#169
I verified with the included e2e tests that changing $timeout to $interval allow the tests to pass.
Hi,
I have a simple ng-repeat that has a list of datestimes I'm formatting with this plugin.
<tr ng-repeat="item in items | orderBy:'updatedAt':true track by $index">
<td><time-ago from-time="{{item.updatedAt}}"></time-ago>{{item.updatedAt}}</td>
This acts wild! When I add a new item to the top of the list, it gets sorted right by angularjs, but the time-ago doesn't seem to update. If the earliest one was 8 minutes ago, when I add another one with the current time, it says 8 minutes, and pushes all the others down the line, so the one at 8 minutes now replaces the one at 12 minutes, and the one at 12 minutes replaces the one at 16 minutes, and so on. I know the times are right, as indicated by the datetime to the side of it, which is the same value, just raw. Any idea why this might be happening?
asdfasfd 8 minutes"2016-02-11T06:52:20.870Z"
bbbbbbbb 8 minutes"2016-02-11T06:45:47.634Z"
Hi Brian
Could you please add:
"main": "src/timeAgo.js",
to bower.json so it would look like:
{
"author": {
"name": "Brian Park",
"email": "[email protected]"
},
"main": "src/timeAgo.js",
...
It will allow to be successfully used with grunt build. Now it triggers error because it don't know where your script is.
At the moment the filter uses an interval of 1 second to check if the value has to be changed. Since each call to $timeout
will make the digest cycle run it's quite a waste of performance. I know we're talking about a little bit of performance over here, but every save is a win.
Instead of running it each second it would make more sense to check the possibility of a future update and set the timeout delay based on that.
Installed with bower and tried to include in my ionic project, however it shows this error:
ionic.bundle.js:13380
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module yaru22.angular-timeago due to:
Error: [$injector:nomod] Module 'yaru22.angular-timeago' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=yaru22.angular-timeago
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:13380:12
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:15270:17
at ensure (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15194:38)
at module (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15268:14)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17674:22
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13648:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17658:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17675:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13648:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17658:5)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=yaru22.angular-time…%3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A17658%3A5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:13380:12
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17697:15
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13648:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17658:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17675:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13648:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17658:5)
at createInjector (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17584:11)
at doBootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14942:20)
at bootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14963:12)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=app&p1=Error%3A%20%…3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A14963%3A12)
https://plnkr.co/edit/6u3VxsF4VT1279PYaUMA?p=preview
Changing the from-time
date does not update the text when using the 'basic' directive. It does work when using the filter directive.
Now I'm between a rock and a hard place because I can't use the filter directive (#54) and I can't use the basic directive.
Hi,
I am formatting the time in ISO format in UTC:
2016-05-31T19:22:29
I was hoping timeago would move this to client's machine timezone, before computing the offset.
Is there a way to switch this on? Possibly in combination with other angular plugin?
When running npm install
over a fresh checkout, you get the following error:
> [email protected] install /Users/carlos/Code/angular-timeago/node_modules/karma-phantomjs-launcher/node_modules/phantomjs
> node install.js
Download already available at /var/folders/rg/jymh52ld7ygd5kt6xqr88wn00000gn/T/phantomjs/phantomjs-1.9.7-macosx.zip
Extracting zip contents
Copying extracted folder /var/folders/rg/jymh52ld7ygd5kt6xqr88wn00000gn/T/phantomjs/phantomjs-1.9.7-macosx.zip-extract-1397589841766/phantomjs-1.9.7-macosx -> /Users/carlos/Code/angular-timeago/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /Users/carlos/Code/angular-timeago/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom/bin/phantomjs
npm ERR! peerinvalid The package karma does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants karma@~0.10.0
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.9.3
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.9
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.9
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.9
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.9
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.9
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.9
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.9
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.11.14
npm ERR! peerinvalid Peer [email protected] wants karma@>=0.9
npm ERR! System Darwin 13.1.0
npm ERR! command "/usr/local/Cellar/node/0.10.26/bin/node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/carlos/Code/angular-timeago
npm ERR! node -v v0.10.26
npm ERR! npm -v 1.4.3
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/carlos/Code/angular-timeago/npm-debug.log
npm ERR! not ok code 0
Some of the libraries used by you implementation required different versions of karma.
How to edit the settings of the pipe in angular 2.0?
I needed a way to style values based on them being past or future. Not sure if this is the correct way to do this but I found it very useful. Hopefully this information can help someone else who needs it.
link: function(scope, elem) {
var fromTime;
// Track changes to fromTime
scope.$watch('fromTime', function(value) {
fromTime = timeAgo.parse(scope.fromTime);
});
// Track changes to time difference
scope.$watch(function() {
return nowTime() - fromTime;
}, function(value) {
var elemHandle = angular.element(elem);
elemHandle.text(timeAgo.inWords(value, fromTime, scope.format));
if(fromTime < nowTime()){
if(elemHandle.hasClass('time-ago-future')){
elemHandle.removeClass('time-ago-future');
}
if(!elemHandle.hasClass('time-ago-past')){
elemHandle.addClass('time-ago-past');
}
}else{
if(elemHandle.hasClass('time-ago-past')){
elemHandle.removeClass('time-ago-past');
}
if(!elemHandle.hasClass('time-ago-future')){
elemHandle.addClass('time-ago-future');
}
}
});
}
Here is the way we add a new language dynamicly :
angular.module('mfgApp').run(function(timeAgo) {
timeAgo.settings.strings.zh_CN = { ... };
});
This is handy as we have a new file for each new language.
That way, angular-timeago sources can be available like this :
Adding a new language would be a matter of adding a new file and not modifying existing source code. It would be way easier to merge pull request.
In the above code example, languages are added at runtime (run phase), it would be better to do that at config phase.
The easier way to do so would be to set "timeAgo.settings" as an angular constant. New language would be added like this :
// into timeAgo.js
angular.module('yaru22.angular-timeago').constant('timeAgoSettings', {
refreshMillis: 60000,
allowFuture: false,
overrideLang : null,
fullDateAfterSeconds : null,
strings: { }
});
// into timeAgo-language-en_US.js
angular.module('yaru22.angular-timeago').config(function(timeAgoSettings){
timeAgoSettings.strings['en_US'] = {
...
}
});
// into timeAgo-language-it_IT.js
angular.module('yaru22.angular-timeago').config(function(timeAgoSettings){
timeAgoSettings.strings['it_IT'] = {
...
}
});
As a bonus, it would expose other angular-timeago settings as well =)
If you're interested, I gladly do a fork with that approach and PR it back to you.
I think it would be really cool if I could configure the filter so that it display a format date instead of timeAgo after 7 days.
Do you think it's cool?
The dist
folder has multiple JS files. Do I need both angular-timeago-core.min.js
and angular-timeago.min.js
? Do I need to include both for this library to work? Looking for to use it in its most basic way. Thanks.
`
Regarding #74 I think the project was not built, so es_ES
is unavailable in dist
files.
When installing with bower for version ~0.2
only version 0.2.4
is downloaded because there is no tag for version 0.2.5
- please tag the code accordingly, otherwise one is forced to use the master branch directly "angular-timeago" : "yaru22/angular-timeago#master"
Recently I fixed a punctuation error in the hour
field of italian strings but in the dist folder both files timeago.js and the minified file still have the error.
Here is the commit 0de0131
Should I open a new pull request where there is the updated string in both files?
Current version available via bower is 0.1.3
which doesn't contain german version already
Hi, thanks for this great plugin!
I have the problem that my time is not being updated
When I open your demo page and I leave it open the time is automatically updated every minute.
In my situation when I open my page the time is only being updated on page load but when I leave the page open for a few minutes time is not being updated anymore.
This is how I format my time in my page {{activitie.start_date | timeAgo}}
this time item is in a ng-repeat div (I don't know if that has something to do with it).
Thanks!
can we configure it to display own custom formats
So the messages can be displayed as follows:
“Just now”- when the time is less then 1 min
After 1 min but within the hour - 2,3,4 > 59 mins ago
After one hour but within the same day
1:32 PM
Yesterday at 1:32 PM
After yesterday but within same year - “15 July, 1:32 PM”
(before current year) - “15 July, 2016”
The current version of the readme doesn't contain any sample code. It would be great to know how to use the filter and extend the languages etc.. without looking at the code.
If you need any help I'm happy to contribute and provide pull-requests! :)
Good job 👍
can we have a patch release to npm containing this? Won't work with browserify properly otherwise.
Other languages are working fine, but es_LA. Everything is in English when I select it.
Error: [$injector:unpr] Unknown provider: nowTimeProvider <- nowTime
http://errors.angularjs.org/1.2.21/$injector/unpr?p0=nowTimeProvider%20%3C-%20nowTime
I only get this error sometimes, is this because something failed to load correctly or could there be another reason?
I need to display exact time ago in counter fashion, like:
13s ago
1min 3s ago
1h 33min ago
13h ago
1d ago
1d 3h ago
2w 3d ago
3w ago
1m 3w ago
3m ago
1y ago
1y 6m ago
2y ago
3y ago
I just noticed your breakpoint strings have only one value assignment, not for example minutes and seconds separately?
As far as I can tell from the instructions I'm limited to setting this globally by updating the value in the service. It would be really nice if I could set this on a per-stamp-basis.
Currently I have a case where at one location I want to allow stamps in the future, and at another I want to disallow, this can be on one page. If this is somehow possible, please do tell, but if not, it would be great if you could add an additional scope parameter that can be set to overrule this per instance.
https://github.com/yaru22/angular-timeago/blob/master/src/timeAgo.js#L69
should be Minuten
. Not minutes
.
https://github.com/yaru22/angular-timeago/blob/master/src/timeAgo.js#L67
shoudl be 'einer'. Not 'eine'.
I am overriding the timeAgoSettings as follows:
timeAgoSettings.breakpoints = {
secondsToMinute: 60, // in seconds
secondsToMinutes: 120, // in seconds
minutesToHour: 59, // in minutes
minutesToHours: 120, // in minutes
hoursToDay: 24, // in hours
hoursToDays: 48, // in hours
daysToMonth: 30, // in days
daysToMonths: 60, // in days
daysToYear: 365, // in days
yearToYears: 2 // in year
}
timeAgoSettings.strings['en_US'] = {
prefixAgo: null,
prefixFromNow: null,
suffixAgo: '',
suffixFromNow: 'from now',
seconds: 'Just now',
minute: 'a minute ago',
minutes: '%d minutes ago',
hour: 'an hour ago',
hours: '%d hours ago',
day: 'a day',
days: '%d days',
month: 'a month',
months: '%d months',
year: 'a year',
years: '%d years',
numbers: []
};
And I am displaying date: 'MMM dd @ HH:mm' format after 24 hours. Everything works fine until "22 hours ago" But after that I am seeing the "23 hours ago" only for 30 minutes and 24 hours for other 30 minutes, And then date format is changing.
In my opinion it makes sense to disable the timeago function when printing a page.
I know that printing can be detected with window.matchMedia.
In my view this would be a sensible default behaviour, but at least it should be available as an option.
It would be great if the module could support momentjs objects as well as plain js Date objects
Big thanks for the project. I found it working with angular 1.3 with no obvious issues. Would you update bower.json dependency, please?
I'm using Basic filter timeAgo {{upcomingTask | timeAgo}}
and using future. I'm getting "50 minutes remaining" and showing "50 minutes remaining" until i refresh the page. Without refreshing the page, i need it to be autoupdate like "49 minutes remaining", "48 minutes remaining". And also I'm using $interval
to update that timeago value after every 1 minute. but its not updating. How do i fix?
@yaru22
version 0.1.5 has been bumped on the meta files but no git tags preventing stable installation over bower.
Currently the only option to change settings is to use settings
property of service.
I suggest to make this default settings private and add access to it via provider:
angular
.module('app', ['yaru22.angular-timeago'])
.config(function (timeAgoProvider) {
timeAgoProvider.setSettings({
});
timeAgoProvider.addTranslation('ru_RU', {
prefixAgo: null,
prefixFromNow: null,
suffixAgo: 'назад',
// ...
})
})
})
;
~1.2.10
is too restricted. Now angular is 1.2.16
.
When using the below settings the time jumps from 45 seconds to a minute. Is there a reason for this?
Thanks!
{
prefixAgo: null,
prefixFromNow: null,
suffixAgo: null,
suffixFromNow: null,
seconds: '%ds',
minute: a'1m',
minutes: '%dm',
hour: '1h',
hours: '%dh',
day: '1d',
days: '%dd',
month: '1m',
months: '%dm',
yeaar: '1y',
years: '%dy'
}
It would be great to have the changes of PR #73 published to NPM and Bower!
I'm using the directive in haml like this:
.course{ ng: { repeat: 'course in courses() track by $index' } }
# ... other code ...
.col-lg-4
%h3
{{ course.start_date }}
%time-ago(from-time='{{ course.start_date }}T00:00:00Z')
Which produces the following for me:
<div class="col-lg-4">
<h3 class="ng-binding">
2015-03-23
<time-ago from-time="2015-03-23T00:00:00Z">2 months ago</time-ago>
</h3>
</div>
Hi, I'm using timeago with my ionic project. When I emulate on my browser the timeago is working fine, however I tested on a real device (iOS 9.2) and it is not working.
I have the following filter to convert dates:
app.filter('dateToISO', function() {
return function(input) {
input = new Date(input+'').toISOString();
return input ? input : '';
};
})
I am fetching the dates from MySQL in this format as example:
2016-11-06 21:13:42
And inside my template I am using time ago as this example:
user answered {{ feed.QuestionAddedDate | dateToISO | timeAgo }}
Inside the logs on XCode is showing the following error:
2016-11-08 23:30:49.269 myApp[2897:1210215] ERROR: Error: Invalid Date
toISOString@[native code]
file:///var/mobile/Containers/Bundle/Application/1A748163-A9C3-486F-BB78-66E3EE8C18B3/myApp.app/www/js/app.js:34:43
fn
expressionInputWatch@file:///var/mobile/Containers/Bundle/Application/1A748163-A9C3-486F-BB78-66E3EE8C18B3/myApp.app/www/lib/ionic/js/ionic.bundle.js:27439:47
$digest@file:///var/mobile/Containers/Bundle/Application/1A748163-A9C3-486F-BB78-66E3EE8C18B3/myApp.app/www/lib/ionic/js/ionic.bundle.js:28987:43
$apply@file:///var/mobile/Containers/Bundle/Application/1A748163-A9C3-486F-BB78-66E3EE8C18B3/myApp.app/www/lib/ionic/js/ionic.bundle.js:29263:31
tick@file:///var/mobile/Containers/Bundle/Application/1A748163-A9C3-486F-BB78-66E3EE8C18B3/myApp.app/www/lib/ionic/js/ionic.bundle.js:24396:42
Thanks for any help!
Is it possible to have timeago detect the browsers timezone and adjust the display text accordingly?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.