angular-moment
Moment.JS directives for Angular.JS (timeago and more)
I have a page with angular-moment on it. Upon page rendering angular-moment is working.
Using
<span am-time-ago="message.time"></span>
But when I append new html.. it's not working
var date = '<span am-time-ago=\"message.time\"></span>';
angular.element('#here').append(date);
Did I missed something? Please help...
Thanks, Kurai
Source: (StackOverflow)
LIVE DEMO
I use the am-time-ago
directive to show a relative timestamp:
<span am-time-ago="publishedAt"></span>
By default, it is formatted as "a day ago", "5 days ago", etc.
How could I change the formatting to be "1d", "5d", "3h", etc?
Source: (StackOverflow)
How do i extract the time using moment.js?
"2015-01-16T12:00:00"
It should return "12:00:00 pm".
The string return will be passed to the timepicker control below.
http://jdewit.github.com/bootstrap-timepicker
Any idea?
Source: (StackOverflow)
I'm trying to use angular-moment in a coffeescript AngularJS app that I'm building with gulp. It's working fine in the app, no problems there, but when I try to run my karma + mocha test suite it fails, with this:
Error: [$injector:modulerr] Failed to instantiate module angularMoment due to:
Error: [$injector:nomod] Module 'angularMoment' 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.
I have angular-moment loaded as a dependency in my app, obviously:
angular.module("prometheus", [
'ui.router'
'ngAnimate'
'angularMoment'
])
and I'm loading it in the script tags
script(src='vendors/moment/moment.js')
script(src='vendors/angular-moment/angular-moment.js')
Which is all I needed to use it in my app - as noted, it works fine there, but when I run my formerly-working karma/mocha tests, boom.
I've tried adding it to my karma.conf.coffee (leaving out a lot of detail):
module.exports = (config) ->
config.set
files: [
'bower_components/angular/angular.js'
'bower_components/angular-mocks/angular-mocks.js'
'bower_components/angular-ui-router/**/*.js'
'bower_components/angular-animate/angular-animate.js'
'bower_components/underscore/underscore.js'
'bower_components/moment/moment.js'
'bower_components/angular-moment/angular-moment.js'
### Lots more left out
]
Which fails by printing out angular-moment.js and:
http://requirejs.org/docs/errors.html#mismatch
at /Users/stephancom/.../node_modules/requirejs/require.js:141
I've also tried adding various things to my test-main.coffee inspired by this angular-moment issue also to no avail.
Ah yes, in case it matters, I'm loading angular-moment through bower, but I've also tried it via npm, and I'm using this version:
"angular-moment": "~0.10.1"
Am I missing something obvious, or does moment and/or angular-moment not like requirejs or ???? I'm fairly new to Angular and I've been struggling with this one for a day or two.
Source: (StackOverflow)
I'm using amCalendar filter from angular-moment to show the moment in the view.
- p.example: "Today 2:30 AM".
The amCalendar filter not accept Date as a type. I created this function that returns the short date ISO string passing a Date parameter:
function toShortISO(d){
var date;
date instanceof Date?
date = d:
date = toDate(d);
function pad(n) {return n<10 ? '0'+n : n}
return date.getUTCFullYear()
+ pad( date.getUTCMonth() + 1 )
+ pad( date.getUTCDate() )
+ 'T' + pad( date.getUTCHours() )
+ pad( date.getUTCMinutes() )
+ pad( date.getUTCSeconds() )
+ 'Z';
}
Passing a Date, this function returns 20150905T060000Z
(per example). And now I can apply the amCalendar filter with this string.
In the view is showing "Today 2:30 AM" as expected, but there is this warning in the console:
Reference: https://github.com/moment/moment/issues/1407
In the reference explain that is necessary to create a moment object to solve this, but I don't know how, I think the example is for nodeJS not for angularJS.
I try this:
function toShortISO(d){
return moment(d.toISOString());
}
But don't work.
Any suggestion?
Thank you!
Source: (StackOverflow)
I am using Angular.js with angular-moment and I am trying to display a date in a different timezone:
p(style="font-size: 70%",am-time-ago="thing.date")
I am including moment.js, as well as the moment.js timezone data (this file). In my .html file:
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/moment-timezone/moment-timezone-with-data.js"></script>
I have also added the configuration in the Angular.js file, as it says on the angular-moment Github page:
angular.module('myApp')
.constant('angularMomentConfig', { timezone: 'America/New_York' })
I have tried quite a couple of permutations up to now, but nothing seems to work. I have no idea what I might be doing wrong, so any suggestion is more than welcome.
Source: (StackOverflow)
getting the following error using the angular-moment meteor package
angular.js:12332 TypeError: momentValue.toISOString is not a function
at updateMoment (angular-moment.js:199)
at Object.fn (angular-moment.js:215)
at Scope.$get.Scope.$digest (angular.js:15685)
at Scope.$get.Scope.$apply (angular.js:15953)
at angular-meteor-meteorCollection.js:160
at angular.js:17711
at completeOutstandingRequest (angular.js:5396)
at angular.js:5668
I am using the amTimeAgo directive in a single place:
<li class="hidden-xs"><p class="text-muted text-sm" am-time-ago="obj.createdAt"></p></li>
Here is my packages file:
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
meteor-platform
accounts-ui
accounts-password
fourseven:scss
urigo:angular@=0.9.2
angular:angular
angularui:angular-ui-router
angular:angular-material
angular:angular-mocks
angular:angular-animate
angular:angular-touch
angular:angular-sanitize
angular:angular-cookies
angular:angular-server
tonekk:angular-moment
And my versions file:
accounts-base@1.2.0
accounts-password@1.1.1
accounts-ui@1.1.5
accounts-ui-unstyled@1.1.7
angular:angular@1.4.2
angular:angular-animate@1.4.2
angular:angular-aria@1.4.2
angular:angular-cookies@1.4.2
angular:angular-material@0.10.0
angular:angular-mocks@1.4.2
angular:angular-sanitize@1.4.2
angular:angular-server@1.4.0
angular:angular-touch@1.4.2
angularui:angular-ui-router@0.2.15
autoupdate@1.2.1
base64@1.0.3
binary-heap@1.0.3
blaze@2.1.2
blaze-tools@1.0.3
boilerplate-generator@1.0.3
callback-hook@1.0.3
check@1.0.5
dburles:mongo-collection-instances@0.3.4
ddp@1.1.0
deps@1.0.7
ejson@1.0.6
email@1.0.6
fastclick@1.0.3
fourseven:scss@3.2.0
geojson-utils@1.0.3
html-tools@1.0.4
htmljs@1.0.4
http@1.1.0
id-map@1.0.3
jquery@1.11.3_2
json@1.0.3
lai:collection-extensions@0.1.4
launch-screen@1.0.2
less@1.0.14
livedata@1.0.13
localstorage@1.0.3
logging@1.0.7
meteor@1.1.6
meteor-platform@1.2.2
minifiers@1.1.5
minimongo@1.0.8
mobile-status-bar@1.0.3
mongo@1.1.0
mrt:moment@1.7.0
npm-bcrypt@0.7.8_2
observe-sequence@1.0.6
ordered-dict@1.0.3
random@1.0.3
reactive-dict@1.1.0
reactive-var@1.0.5
reload@1.1.3
retry@1.0.3
routepolicy@1.0.5
service-configuration@1.0.4
session@1.1.0
sha@1.0.3
spacebars@1.0.6
spacebars-compiler@1.0.6
srp@1.0.3
templating@1.1.1
tonekk:angular-moment@1.0.2
tracker@1.0.7
ui@1.0.6
underscore@1.0.3
urigo:angular@0.9.2
url@1.0.4
webapp@1.2.0
webapp-hashing@1.0.3
Any idea why this might be happening?
Source: (StackOverflow)
I would like to use customized output for calendar in angularMoment.
In momentjs I set it up with:
moment.lang('en', {
calendar : {
lastDay : '[Yesterday at] LT',
sameDay : '[Today at] LT',
nextDay : '[Tomorrow at] LT',
lastWeek : 'ddd, LT',
nextWeek : 'dddd [at] LT',
sameElse : function () {
if (this < moment().startOf('year'))
return 'M/D/YY';
else
return 'ddd, MMM D';
}
}
});
In angular, I tried the following (and a few variations) with no luck:
angular.module('main').constant('angularMomentConfig', {
lang: 'en'
, {
calendar : {
lastDay : '[Yesterday at] LT',
sameDay : '[Today at] LT',
nextDay : '[Tomorrow at] LT',
lastWeek : 'ddd, LT',
nextWeek : 'dddd [at] LT',
sameElse : function () {
if (moment() < moment().startOf('year'))
return 'M/D/YY';
else
return 'ddd, MMM D';
}
}
}
});
Source: (StackOverflow)
I want to launch my angular application which works in general, but when I get to use moment I got the error that "moment" is undefined.
I am using "angular-moment" from here
var app = angular.module("MyApp",
[
"ngRoute",
"ui.bootstrap",
"angularMoment",
'angular-jwt',
'angular-storage'
]);
My package.json looks like this
{
"name": "myapp",
"main": "index.html",
"toolbar":"true",
"dependencies": {
"moment": "*"
}
}
I am trying to use it with
app.config(function (moment) {
moment().format();
});
which says that moment ist undefined.
How do I have to modify my package.json to get node-webkit find moment? Or Angular-Moment?
Thanks in advance.
Source: (StackOverflow)
i have a time_Sent value like this: 1437203995
for some reason it always returns 45 years ago
Source: (StackOverflow)
Trying to use angular-moment library. (Not sure if I can add a link to it here). Tried to use it as shown in github repo. Added libraries to the index file, moment, angularMoment and then...
angular.module('chat', ['angularMoment'])
.controller('ChatController', ['$scope', '$location', '$timeout', '$interval', '$filter', 'Authentication', 'Socket', 'Chat',
function($scope, $location, $timeout, $interval, $filter, Authentication, Socket, Chat) {
}]);
But if I try to inject it in myApp, the whole controller just disappears, like it was not there. I suppose it might not be able to resolve angularMoment and leaves the whole controller behind. Tried injecting it into controller, but returns that it cant find angularMomentProvider.
The view where im using this controller:
<section ng-controller="ChatController" ng-init="getMessages()">
<div class="page-header">
<h1>Chat</h1>
</div>
<div class="col-md-4">asd</div>
<div class="col-md-6" style="background-color: hsla(30, 1%, 52%, 0.02); border-radius: 1%;">
<small>{{ userWriting }}</small>
<div scroll-to="isAtTop" style="padding: 10px 10px 0px; ">
<ul class="list-unstyled">
<li class="" ng-repeat="message in messages">
<small class="pull-right text-muted" style="color: lightgrey;"><span class="glyphicon glyphicon-time"></span> {{ message.created | timeDuration }}</small>
<span style="font-size: 14px; font-weight: 700;">{{ message.user.username }}</span>
<p style="font-size: 14px">{{ message.message }}</p>
</li>
</ul>
</div>
<form name="chatForm" class="form-horizontal" ng-submit="sendMessage()" novalidate>
<fieldset>
<div class="input-group" style="margin-bottom: 15px">
<input name="message" type="text" data-ng-model="message" id="message_input" class="form-control" placeholder="Message" [required="test"] ng-keypress="keypressEvent()" ng-model-options="{ debounce: 2000 }">
<span class="input-group-btn">
<button class="btn btn-default">Send</button>
</span>
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
<div class="col-md-2">
asd
</div>
</section>
What am I doing wrong? What should I do to make it work?
Thanks
Source: (StackOverflow)
Here is the situation:
I have occurred_at
dates stored in my database in UTC. I'm using laravel to write an API method that returns records that contain these occurred_at
fields. They are currently being returned via JSON in a string format (what the PHP Carbon library outputs), ex:
"occurred_at":"2015-04-14 00:25:20"
This date "occurred" at 00:25
(12:25 AM
) in UTC timezone, but actually at 2015-04-13 17:25
(5:25 PM
) in Pacific (PST) timezone.
I am using angular to consume the JSON, and figured I would use the angular-moment library to convert the UTC to local. But it's not working. Both the angular-moment and native angular filters output the same thing:
<span>{{evt.occurred_at | amDateFormat:'L LT'}}</span>
<span>{{evt.occurred_at | date:'MM/dd/yyyy @ h:mma'}}</span>
Output:
2015-04-14 00:25:20
Still in UTC. In my angular app code I even have the UTC preprocessor setup to read them in as UTC, but they don't display as local times:
.constant('angularMomentConfig', {
preprocess: 'utc'
})
There HAS to be a standard way of going about this - storing datetime values in UTC in the database but displaying them as a local time to the user. Do I need make some changes server side? Client side? What is best practice to utilize the "it just works" methods, without writing a ton of code for each date I want to display?
Currently, in non-angular projects, I am using what I consider to be a 'hack' by applying a css class to every span that I want to convert the time to local:
$('.utc-dttm').each(function () {
var t = moment.utc($(this).text()).local();
$(this).text(t.format("L") + ' ' + t.format("LT"));
});
But I'd argue this is the wrong way of going about it.
Source: (StackOverflow)
This is my code
$scope.getWeekDayShort = function(date) {
moment().locale('pt-br');
return moment(date, "D_M_YYYY").format('ddd');
}
it returns name of weekday in english but need portuguese weekday name
If I pass 1_1_2015 it returns Thu
How can I get weekday name in portuguese?
EDIT
moment.locale('pt-br');
console.log(JSON.stringify(moment.months())) // ["janeiro","fevereiro","março","abril","maio","junho","julho","agosto","setembro","outubro","novembro","dezembro"]
moment.locale('en');
console.log(JSON.stringify(moment.months())); // ["January","February","March","April","May","June","July","August","September","October","November","December"]
I have included moment-with-locales.min.js file which includes all supported language data and it work good with upper code. So why it not works with week name ?
Source: (StackOverflow)
I am using
<div ng-repeat="usage in previousUsage"
<p>{{usage.Month | amDateFormat : 'MMMM' }}</p>
</div>
usage.Month data are numbers 1-12
The data returns January
Source: (StackOverflow)