md-dialog not recognizing angular filter

Question

I am using Angular Material's md-dialog feature but having some issues getting the date filter working. Maybe someone can spot it and let me know if they have any idea on how to make this work. I can see that {{item.presentation.end_time}} and {{confSessionObj.session_nr}} are working but when I put the angular date filter, it doesn't recognize it.

Here's my code.

JS

$scope.showAdvanced = function(ev, confSession) {
    var sessionID = confSession.id;
    $.ajax({
        type: "GET",
        url: "/session-detail.php",
        data: {id: sessionID},
        success: function(data, response){
            data = data.replace(/\\n/g, "\\n")
                .replace(/\\'/g, "\\'")
                .replace(/\\"/g, '\\"')
                .replace(/\\&/g, "\\&")
                .replace(/\\r/g, "\\r")
                .replace(/\\t/g, "\\t")
                .replace(/\\b/g, "\\b")
                .replace(/\\f/g, "\\f");
            $scope.returnedObj = JSON.parse(data);

            $mdDialog.show({
                locals: { confSessionObj: confSession, returnedObj: $scope.returnedObj },
                controller: DialogController,
                targetEvent: ev,
                template:
                    '<div class="md-dialog-container">' +
                    '<md-dialog aria-label="Session Detail">' +
                    '<form ng-cloak>' +
                    '<md-toolbar md-scroll-shrink>'+
                    '<div class="md-toolbar-tools">'+
                    '<h4 style="color: #fff;">Session Details</h4>'+
                    '</div>'+
                    '</md-toolbar>'+
                    '<md-dialog-content>'+
                    '<md-list-item>'+
                    '<div class="md-dialog-content"  id="dialog">'+
                    '<p class="md-body-2"><span class="md-custom-title">Session Title:</span>  {{confSessionObj.session_nr}} - {{confSessionObj.session_name}}</p>'+
                    '<table class="table table-bordered table-striped table-hover table-responsive" id="dialogtable">'+
                    '<tr id="theader">'+
                    '<thead>'+
                    '<th>Talk Title</th>'+
                    '<th>Start Time</th>'+
                    '<th>End Time</th>'+
                    '<th>Speaker Name</th>'+
                    '</thead>'+
                    '</tr>'+
                    '<tr ng-repeat="item in returnedObj">'+
                    '<td>{{item.presentation.title}}</td>'+
                    '<td>{{item.presentation.start_time | date: "MM/dd/yyyy  h:mma"}}</td>'+
                    '<td>{{item.presentation.end_time | date: "MM/dd/yyyy h:mma"}}</td>'+
                    '<td>{{item.speakers.firstname}}&nbsp;&nbsp;{{item.speakers.lastname}}</td>'+
                    '</tr>'+
                    '</table>'+
                    '</div>'+
                    '</md-list-item>'+
                    '</md-dialog-content>'+
                    '<md-dialog-actions layout="row">'+    
                    '<md-button class="md-raised" ng-click="cancel()">Close</md-button>'    +
                    '</md-dialog-actions>'+
                    '</form>'+
                    '</md-dialog>'+
                    '</div>',
                parent: angular.element(document.body),
                preserveScope: true,
                clickOutsideToClose:true,
                fullscreen: $scope.customFullscreen
            });
        },
        error: function(e){
            console.log(e.message);
        }
    });
};
function DialogController($scope, $mdDialog, confSessionObj, returnedObj) {
    $scope.confSessionObj = confSessionObj;
    $scope.returnedObj = returnedObj;

    $scope.cancel = function() {
        $mdDialog.cancel();
    };

}

Answer 1

Based on the information you provided, the issue you are experiencing with date filter is the format of the date object/string is in the incorrect format as other filters are successfully functioning. From the angular date filter documentation:

Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.

You'll need to have the date in one of those formats to ensure it can be effectively processed. I'd recommend using milliseconds as the date filter can process it in either come in as a string or number, providing a bit more flexibility.

You could take that date being received and use Date.Parse() to get the milliseconds, which then can then be passed into interpolation with the date filter.

JS:

$scope.parseDate = function(date) {
    return Date.parse(date);
}

HTML:

<td>{{ parseDate(item.presentation.end_time) | date: "MM/dd/yyyy h:mma" }}</td>

Here is a plunker of the functionality working.

Hopefully that helps!

Update:

If you need to display hours/minutes in one interpolation while showing month/day/year in another spot, you would just need to change the date format string argument after still parsing the date string you are receiving from the server to a propery Date millisecond amount. The plunker linked in this answer has been updated with all possible variations for date formatting including the date format you specified in your comment as well as time in both military and 12 hour format.

<td>{{ parseDate('2017-05-24 13:10') | date: 'MM/dd/yyyy h:mma' }}</td> // 05/24/2017 1:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'MM/dd/yyyy H:mma' }}</td> // 05/24/2017 13:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'H:mma' }}</td> // 13:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'HH:mma' }}</td> // 13:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'h:mma' }}</td> // 1:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'hh:mma' }}</td> // 01:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'MM/dd/yyyy' }}</td> // 05/24/2017