AngularJS date filter with condition

Question

I use ng-bind and the date filter to output a time of a date.

<span ng-bind="ctrl.model.myDate | date:'HH:mm'"><span>

Now I would like to be able to switch the output between 12 and 24h format, with this filter: date:'HH:mm' and date:'hh:mm'

Therefore I have a property:

model.is24h= true

How can I insert a condition into the ng-bind expression to evaluate my property to output in 12h or 24h format?

Something like:

<span ng-bind="ctrl.model.myDate | {{ctrl.model.is24h: date:'HH:mm' || date:'hh:mm'}}"><span>

Ed Knowles · Accepted Answer · 2016-04-21 15:52:53Z

7

Just add a new filter with the variable as an argument

http://jsfiddle.net/HB7LU/13224/

HTML

<span ng-bind="myDate | newDate:is24h"></span>
<button type="button" ng-click="is24h = !is24h">Swap</button>

JS

myApp.filter('newDate', function ($filter) {
    return function (input, arg) {
        var hFormat = arg ? 'HH' : 'hh';
        return $filter('date')(new Date(input), hFormat  + '.mm');
    };
});

edited Apr 21, 2016 at 15:52

answered Apr 27, 2015 at 12:30

Ed Knowles

1,9251 gold badge16 silver badges24 bronze badges

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

1 Comment

roschulze Over a year ago

why do you add toUpperCase() inside the filter?

Ramesh Rajendran · Accepted Answer · 2015-04-27 12:21:05Z

0

Try to change your filter code for this condition.

angular.module('yourmodule').filter('date', function ($filter, $scope) {
            return function (input) {
                if (input == null) { return ""; }
                if ($scope.is24h) {
                    return $filter('date')(new Date(input), 'HH:mm').toUpperCase();
                }

                return $filter('date')(new Date(input), 'hh:mm').toUpperCase();
            };
        });

html should be

<span ng-bind="ctrl.model.myDate | date"><span>

answered Apr 27, 2015 at 12:21

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Comments

Polan · Accepted Answer · 2015-04-27 16:57:29Z

-1

You can use trenary operator in directive parameter:

<span ng-bind="ctr.model.myDate | date:(ctrl.model.is24h?'HH':'hh')+':mm'"><span>

edited Apr 27, 2015 at 16:57

answered Apr 27, 2015 at 12:14

Polan

1595 bronze badges

1 Comment

roschulze Over a year ago

2 watchers for this use case seems not to be the right way for me

Collectives™ on Stack Overflow

AngularJS date filter with condition

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related