Question

我有一张用ngRepeat过滤的表格。其中一列是日期，我喜欢以dd/MM/yyyy格式显示日期，所以所有日期列看起来都是这样，但是当我在过滤器输入中输入日期时，它不知道它应该在不同的格式，因此无法找到所查找的日期。

我试过嵌套过滤器但没有成功，有谁知道怎么做？

这是我的代码：

<input ng-model="filFecha"  />

<tr ng-repeat="pedido in pedidos | 
    filter:{codigo:filCodigo,
    tercero:filTercero, 
    fechaCreacion: ($filter('date')(filFecha, 'dd/MM/yyyy')), 
    estado:filEstado} | 
    orderBy: orderProp">

    <td class="corta">{{pedido.fechaCreacion | date:'dd/MM/yyyy'}}</td>
    <td class="corta">{{pedido.estado}}</td>
</tr>

这是一个小提琴示例：http://jsfiddle.net/HB7LU/3942/

Answer 1

尝试使用它们的库使得格式化日期变得非常简单和容易。因此，当您收到传入日期时，只需使用以下代码行：

var formattedDate = moment(inputDate, ['YYYYMMdd', 'MM-dd-YYYY', 'dd-MM-YYYY').format('MM/dd/YYYY');

这将获取输入日期并尝试将其与字符串数组中的一种格式匹配，如果它识别出一个，则会将其格式化为传递给format函数的字符串。

如果$ scope.pedido.fechaCreacion是您尝试格式化的日期，请尝试以下操作：

{{moment(pedido.fechaCreacion, [expectedFormats]).format('MM/dd/YYYY')}}

Answer 2

我已经构建了一个自定义过滤器，我认为它可以解决您的问题。

myApp.filter('dateFilter', function(){
    return function(arr, field){
        var filtered = [];        
        angular.forEach(arr, function(item){            
            if(moment(item.fechaCreacion).format('DD/MM/YYYY').indexOf(field) > -1)
                filtered.push(item);
        });
        return filtered;
    }
});

循环遍历$scope.pedidos中的每个项目，并使用moment.js将fechaCreacion转换为所需格式的字符串（DD / MM / YYYY）。然后它检查filFecha的值是否存在于该字符串中的任何位置，如果存在，则将其添加到已过滤的数组中。 HTML看起来像这样：

<tr ng-repeat="pedido in pedidos | 
    filter:{codigo:filCodigo, tercero:filTercero,
    estado:filEstado} | 
    dateFilter: filFecha |
    orderBy: orderProp">

查看demo。

Answer 3

我喜欢自定义过滤器，但希望将其扩展为更灵活。我也不想使用片刻，因为那不是我用来在UI上格式化我的日期。

查看要点here

结帐jsFiddle here

angular.module('dateFilter', []).filter('dateFilter', function ($filter) {
    return function (array, config) {

        if (config === undefined || config.field === undefined || config.format === undefined || config.property === undefined)
            return array;

        var filtered = [];
        angular.forEach(array, function (item) {
            if ($filter('date')(new Date(getPropByString(item, config.property)), config.format).indexOf(config.field) > -1)
                filtered.push(item);
        });

        return filtered;
    }

如何在Angular中更改日期过滤器中搜索数据的格式

3 个答案: