使用Angular网格以AM / PM格式显示时间

时间:2014-07-09 19:45:27

标签: angularjs

如何格式化接收具有名为startTime和endTime的日期时间属性的实体的Angular网格以AM / PM格式显示时间?现在我正在使用:

{ field: 'StartTime', displayName: 'Start Time', cellFilter: 'date:\'hh:mm tt\''},
{ field: 'EndTime', displayName: 'End Time', cellFilter: 'date:\'hh:mm tt\''},

显然' tt'显示而不是AM或PM。有没有人以前在Angular ngGrid中完成AM / PM?

4 个答案:

答案 0 :(得分:34)

很简单,请看:

{ field: 'createdOn', displayName: 'Created On', width: '180px', 
 cellTemplate: "<div class='ngCellText'>{{row.entity.createdOn | date:'MM/dd/yy h:mm:ss a'}}</div>" },

那是

有关date format see this

的详细信息

答案 1 :(得分:3)

只需要拼凑一些东西。首先,过滤器:

app.filter('ampmtime',
    function () {
        return function (value) {
            if (!value) { return ''; }
            var hours = new Date(value).getHours();
            var minutes = new Date(value).getMinutes();
            var ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12; // the hour '0' should be '12'
            minutes = minutes < 10 ? '0' + minutes : minutes;
            var strTime = hours + ':' + minutes + ' ' + ampm;
            return strTime;
        }
    });

然后,在gridOptions上调用函数:

{ field: 'StartTime', displayName: 'Start Time', cellFilter: 'ampmtime'},
{field:'EndTime', displayName: 'End Time', cellFilter: 'ampmtime'}

你们都已经准备好了。

答案 2 :(得分:2)

刚遇到同样的问题,发现使用角度日期过滤器的更简单的解决方案。 你只需要将tt更改为a,就像这样

{ field: 'StartTime', displayName: 'Start Time', cellFilter: 'date:\'hh:mm a\''}

请参阅角度对日期过滤器的参考 - https://docs.angularjs.org/api/ng/filter/date

答案 3 :(得分:0)

对于V2上的角度,请使用shortTimedate管道:

{{ myDate | date : 'shortTime' }}
  

“ shortTime”:等同于“ h:mm a”(上午9:03)。