Formatting Date in Angular

Question

Currently, my Angular code displays the date like this:

03/10/2016

 <span class="num">{{appointment.calendarSlot}}</span>

I want to display the date like this:

Friday, March 25

how can I do that?

UPDATE: The appointment.calendarSlot is a string and not Javascript Date

@JohnDoe Updated my answer to format a string. Checkout my JSFiddle in the answer. — user1846747
– user1846747, Commented Mar 10, 2016 at 16:54

gtlambert · Accepted Answer · 2016-03-10 16:38:43Z

2

You can use the following date filter:

 <span class="num">{{ appointment.calendarSlot | date:'EEEE, MMMM d' }}</span>

answered Mar 10, 2016 at 16:38

gtlambert

12k2 gold badges32 silver badges48 bronze badges

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

2 Comments

JohnDoe Over a year ago

The appointment.calendarSlot is a string and not JS datetime object.

gtlambert Over a year ago

I think you might want to ask a separate question then, instead of confusing questions and answers here with a different question

Oscar LT · Accepted Answer · 2016-03-10 16:38:16Z

1

Try this:

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

This line is for you:

'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)

answered Mar 10, 2016 at 16:38

Oscar LT

7951 gold badge4 silver badges24 bronze badges

Comments

Shulyk Volodymyr · Accepted Answer · 2016-03-10 16:38:38Z

1

scope.date = new Date()  // controller


{{date | date:'EEEE, MMMM dd'}} // view

answered Mar 10, 2016 at 16:38

Shulyk Volodymyr

8257 silver badges11 bronze badges

2 Comments

gtlambert Over a year ago

You don't need dd, just d

Shulyk Volodymyr Over a year ago

That depends) Maybe you need March 03 instead of March 3. I looked at origin format 03/10/2016. It could be 3/10/2016 either. So i decided to put dd in answer.

score 1 · Accepted Answer · 2016-03-10 16:59:45Z

1

You could try this

<div ng-app='app' ng-controller="ctrl">
    <span class="num" ng-bind="appointment.calendarSlot | date:'EEEE, MMMM d'"></span>
</div>

JS

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

app.controller('ctrl', function($scope) {
    $scope.appointment = {};
    $scope.appointment.calendarSlot = new Date('03/10/2016');
});

Working JSFiddle here http://jsfiddle.net/WfuAh/150/

edited Mar 10, 2016 at 16:59

answered Mar 10, 2016 at 16:38

user1846747

2 Comments

Lex Over a year ago

This doesn't work if the string is in the format MM/dd/yy as stated in the OP's post.

Lex Over a year ago

I agree that should work, but I'm wondering if the OP left out a bunch of surrounding code. I suspect, although I have absolutely nothing to base this suspicion on, that the <span> referenced in the question is inside an ng-repeat construct.

Lex · Accepted Answer · 2016-03-10 17:41:05Z

1

To make this the most flexible, I would add a custom filter to your app that converts the string to a date and then you can use the built in Angular date formatting filter.

.filter("asDate", function() {
    return function(input) {
        return Date.parse(input);
    }
})

Then your markup becomes:

<span class="num">{{ appointment.calendarSlot | asDate | date:'EEEE, MMMM d' }}</span>

answered Mar 10, 2016 at 17:41

Lex

7,2732 gold badges31 silver badges49 bronze badges

Collectives™ on Stack Overflow

Formatting Date in Angular

5 Answers 5

2 Comments

Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related