-1

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

2
  • Duplicate question: Format Date time in Angular JS Commented Mar 10, 2016 at 16:42
  • @JohnDoe Updated my answer to format a string. Checkout my JSFiddle in the answer. Commented Mar 10, 2016 at 16:54

5 Answers 5

2

You can use the following date filter:

 <span class="num">{{ appointment.calendarSlot | date:'EEEE, MMMM d' }}</span>
Sign up to request clarification or add additional context in comments.

2 Comments

The appointment.calendarSlot is a string and not JS datetime object.
I think you might want to ask a separate question then, instead of confusing questions and answers here with a different question
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)

Comments

1
scope.date = new Date()  // controller


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

2 Comments

You don't need dd, just d
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.
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/

2 Comments

This doesn't work if the string is in the format MM/dd/yy as stated in the OP's post.
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.
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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.