Formatting C# dateTime to an AngularJS date in ng-options

Question

I am attempting to format a dateTime returning from a C# web service, formatted as '2016-01-01T00:00:00' to a standard MM/dd/yyyy format in Angular. The date in question is in a select list.

Here is the AngularJS:

angular.module('myApp', [])
    .controller('ctrl', function ($scope) {
    $scope.options = [{
        name: "Date One",
        date: "2015-01-01T00:00:00"
    }, {
       name: "Date Two",
        date: "2016-01-01T00:00:00"
    }];
});

Here is the html:

<body ng-app="myApp">
    <div ng-controller="ctrl">
        <select class="form-control" ng-model="selectedOption" ng-options="option.name + ' ' + option.date | date:'MM/dd/yyyy' for option in options"></select>
    </div>
</body>

You can view this online at https://jsfiddle.net/5s706vLq/7/

J. Steen · Accepted Answer · 2016-07-27 16:41:00Z

2

Use

option.name + ' ' + (option.date | date:'MM/dd/yyyy') for option in options

as your ng-options. The parenthesis groups the parameter with the format.

https://jsfiddle.net/fvo31sd2/

answered Jul 27, 2016 at 16:41

J. Steen

15.6k15 gold badges59 silver badges64 bronze badges

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

Comments

Dev Shah · Accepted Answer · 2016-07-27 16:44:40Z

1

You just need to add brackets for the date filter in ng-options. See below:

<body ng-app="myApp">
    <div ng-controller="ctrl">
        <select class="form-control" ng-model="selectedOption" ng-options="option.name + ' ' + (option.date | date:'MM/dd/yyyy') for option in options"></select>
    </div>
</body>

answered Jul 27, 2016 at 16:44

Dev Shah

3021 silver badge7 bronze badges

2 Comments

Ron Over a year ago

I can't tell which answer was first, so based on the idea that last in/first out, which is how I think s/o works, I upvoted you but gave @J. Steen credit for the answer.

J. Steen Over a year ago

@Ron Not that it really matters, but if you want to find out such things in the future you can either sort the answers by "oldest" (the three tabs to the right just under your own question) or you can hover your mouse over the "answered yesterday/last week/whatever"-text above the answerer-portrait.

Collectives™ on Stack Overflow

Formatting C# dateTime to an AngularJS date in ng-options

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related