EzDevInfo.com

angular-moment not working via dom injection

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

How to format 'angular-moment's 'am-time-ago' directive?

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?

Extract time from moment js object

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?

angular-moment not available in karma mocha tests - requirejs?

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.

Angular-moment with ISO string

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!

Can't change timezone with angular-moment

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.

angular-moment TypeError: momentValue.toISOString is not a function

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?

Customize calendar function in angularMoment

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';
        }
    }
}
});

"moment is undefined" when launching angular app in node-webkit

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.

Angular Moment am-time-ago not returning correct time

i have a time_Sent value like this: 1437203995

for some reason it always returns 45 years ago

Inject angularMoment library to Meanjs angular app

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

Handling UTC dates client side

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.

Translations for AngularJS module angularMoment

I use angularMoment module in my app to display post creation time like few seconds ago, 2 hours ago and so on. The problem is that my app supports multiple languages. How do I make translations for it?

I used this tutorial to implement angularMoment https://scotch.io/tutorials/display-time-relatively-in-angular

Get week day in portuguese language from date in moment js

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 ?

Why using Angular Moment returns all january in ng-repeat?

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