Format date using moment Angularjs

Question

I am trying to format date using moment in Angularjs but its not working for me. Here is my fiddle http://jsfiddle.net/sed6x5e8/ and below is my code.

HTML:

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
        <div>
            Actual Date: {{date}}
            <br><br>
            Formatted Date: {{formattedDate}}
        </div>

    </div>    
</div>

JS:

var $scope;
var app = angular.module('miniapp', [])
function Ctrl($scope) {
    $scope.date = '2/13/2015';
    $scope.formattedDate = moment($scope.date).format('YYYY-MM-DD');
}

Why are you declaring var $scope outside your controller? And you have en error in the console, moment isn't included. — tymeJV
– tymeJV, Commented Feb 13, 2015 at 19:29
Add moment library to your project - jsfiddle.net/sed6x5e8/1 — Oleksandr T.
– Oleksandr T., Commented Feb 13, 2015 at 19:30

ribsies · Accepted Answer · 2015-02-13 22:17:44Z

14

AngularJS has a built in filter for dates. You do not need to use moment, waste of resources.

<span>{{message.time | date}}</span>

https://docs.angularjs.org/api/ng/filter/date

answered Feb 13, 2015 at 22:17

ribsies

1,2182 gold badges10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Over a year ago

Does Angular support localization?

jsonmurphy · Accepted Answer · 2015-02-13 19:31:33Z

10

I've used angular-moment successfully in a project of mine. It has a filter that alows you to format the date. Example from the README:

<span>{{message.time | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a'}}</span>

answered Feb 13, 2015 at 19:31

jsonmurphy

1,6001 gold badge11 silver badges19 bronze badges

7 Comments

jsonmurphy Over a year ago

@user3842029 np. P.S. Not sure why the answer got down voted. Would the person care to explain?

rashadb Over a year ago

Any chance you could elaborate on your answer? I'm not clear how to implement it. I want to {{getDate}} from the back end to display within ngrepeat but I can't put that between {{}} . . . {{{{getDate}}|date}} throws an error.

rashadb Over a year ago

<span> {{ obj.get('Start') | date: 'shortDate'}}</span>.

ribsies Over a year ago

I downvoted this. This functionality is built into angular using the date filter, there is absolutely no need to bring in another library to do it.

jsonmurphy Over a year ago

@ribsies well it seems like you're assuming that the OP's requirements stop at just formatting dates... moment.js has some other features that they might be using. I'm aware of angular's date filter but i just answered based on what was asked.

|

Malleswar Reddy · Accepted Answer · 2019-11-13 16:51:26Z

sample example

var app = angular.module("app", []);

app.constant("moment", moment);

app.controller("ctrl", function($scope, moment) {
    $scope.date = new moment().format("D/MMM/YYYY");
    var dat1 = new moment();
    $scope.date3 = dat1.add('5', 'd').format('MMMM Do YYYY, h:mm:ss a');
});

Html

var app = angular.module("app", []);

app.constant("moment", moment);

app.controller("ctrl", function($scope, moment) {
    $scope.date = new moment().format("D/MMM/YYYY");
    var dat1 = new moment();
    $scope.date3 = dat1.add('5', 'd').format('MMMM Do YYYY, h:mm:ss a');
});

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    {{ date }} 
  </br>
  </br>
  {{date3}}
</div>

Collectives™ on Stack Overflow

Format date using moment Angularjs

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related