[AngularJS] How to format date with ROC's Mínguó calendar System in ng-grid

Problem
I am using AngularJS to implement data grid as bellows:

The first column is date with ROC's Mínguó calendar System.

But the requirement is to format to 104/01/16 as bellows:

The code-snippet for ng-grid is :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$scope.itemGrid = { data : 'itemData', columnDefs : [ { field : 'dat', displayName : '轉入日期', width: 350, cellClass: 'text-left'}, { field : 'age', displayName : '機關代號', width: 350, cellClass: 'text-left'}, { field : 'ord', displayName : '收文號 ', width: 350, cellClass: 'text-left'}], enableColumnResize :true, i18n:'zh-tw', multiSelect : false };

Solution

Step1. Create a mingGuoFiter to do date format

1 2 3 4 5

app.filter('mingGuoFilter', function(){ return function (dat){ return dat.substring(0, 3) + '/' + dat.substring(3, 5) + '/' + dat.substring(5, 7); }; });

Step2. add cellFilter to dat field

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$scope.itemGrid = { data : 'itemData', columnDefs : [ { field : 'dat', displayName : '轉入日期', width: 350, cellClass: 'text-left', cellFilter : 'mingGuoFilter'}, { field : 'age', displayName : '機關代號', width: 350, cellClass: 'text-left'}, { field : 'ord', displayName : '收文號 ', width: 350, cellClass: 'text-left'}], enableColumnResize :true, i18n:'zh-tw', multiSelect : false };