2

Estou aplicando um filtro na minha página, ele estava funcionando perfeitamente, só que quando apliquei a máscara para ficar no formato dd/MM/yyyy HH:mm:ss ele parou de filtrar corretamente, ele entende que não existe nada correspondente, a partir do primeiro número digitado ele não consegue encontrar nada, volta vazia a lista, como se não existisse. Antes de aplicar o mascara, se eu digitava manualmente o dd/MM/yyyy HH:mm:ss(digitando com os numeros e as separações / e :) ele encontrava perfeitamente o correspondente. Os outros campos continuam filtrando corretamente.

    <div class="form-group filtro">
      <label class="" for="endDate">Data de Criação</label>
      <input type="text" class="form-control" ng-model="criterioDeBusca.dataCriacao" ui-mask="99/99/9999 99:99:99" ui-mask-placeholder ui-mask-placeholder-char="_" />                         
   </div>

-

 <table>
     <tr dir-paginate="atividade in atividades | filter:criterioDeBusca | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao|itemsPerPage:5">
      <td>{{atividade.codigo}}</td>
      <td class="text-left">{{atividade.descricao}}</td>
      <td>{{atividade.dataCriacao | date:'dd/MM/yyyy HH:mm:ss'}}</td>
    </tr>
 </table>
6
  • 1
    tente adicionar model-view-value="true", junto ao ui-mask, pode ser que manter o modelo de objeto resolva Commented 24/07/2017 às 14:56
  • Funcionou!! só que quando eu apago e digito novamente ele volta pro mesmo erro, ele entende que não existe nada, sabe o que pode ser?
    – Isa
    Commented 24/07/2017 às 15:10
  • nossa, pior que não faço idéia, geralmente procuro fazer filtros manualmente pelos filters e mascaras por diretivas, se quizer posto minha solução mas é totalmente diferente Commented 24/07/2017 às 15:47
  • @FelipeDuarte aceito sua solução sim, pode postar?
    – Isa
    Commented 24/07/2017 às 15:51
  • @VirgilioNovic ele vem como dd/MM/yyyy HH:mm:ss
    – Isa
    Commented 25/07/2017 às 15:20

2 Respostas 2

1

Eu trocaria o ui-Mask pelo Mask Plugin pelo motivo da perca do formato no model, exemplo minimo:

Para aplicar filtro em data e hora seria da seguinte forma:

$(document).ready(function() {
  $('#text').mask('00/00/0000 00:00:00');
});

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.text = "";
  $scope.datas = [{
      'id': 1,
      'data': '01/01/1999 13:45:55'
    },
    {
      'id': 2,
      'data': '01/01/1999 13:45:55'
    },
    {
      'id': 3,
      'data': '02/01/1999 14:46:00'
    },
    {
      'id': 4,
      'data': '03/01/1999 14:46:00'
    }
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <input type="text" id="text" name="text" ng-model="text" />
  <table>
    <tr>
      <td>Id</td>
      <td>Data</td>
    </tr>
    <tr ng-repeat="d in datas | filter:text">
      <td>{{d.id}}</td>
      <td>{{d.data | date:'dd/MM/yyyy HH:mm:ss'}}</td>
    </tr>
  </table>
</div>

0
0

Aqui já é um bom caminho, pena que não estou com muito tempo agora :(

angular.module('teste', []);

angular.module('teste').controller('testeCtrl' , function($scope){
	$scope.contatos = [];
  
  $scope.add = function(el){
   $scope.contatos.push(el);
  }
});

angular.module("teste").directive("uiDate", function ($filter) {
	return {
		require: "ngModel",
		link: function (scope, element, attrs, ctrl) {
			var _formatDate = function (date) {
				if (!date) return date;
				date = date.replace(/[^0-9]+/g, "");
				if(date.length > 2) {
					date = date.substring(0,2) + "/" + date.substring(2);
				}
				if(date.length > 5) {
					date = date.substring(0,5) + "/" + date.substring(5,9);
				}
				return date;
			};

			element.bind("keyup", function () {
				ctrl.$setViewValue(_formatDate(ctrl.$viewValue));
				ctrl.$render();
			});

			ctrl.$parsers.push(function (value) {
				if (value.length === 10) {
					var dateArray = value.split("/");
					return new Date(dateArray[2], dateArray[1]-1, dateArray[0]).getTime();
				}
			});

			ctrl.$formatters.push(function (value) {
				return $filter("date")(value, "dd/MM/yyyy");
			});
		}
	};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<body ng-app="teste" ng-controller="testeCtrl">

<input class="form-control" type="text" ng-model="contato.data" name="data" placeholder="Data" ui-date/>

<tr ng-repeat="contato in contatos | filter:criterioDeBusca | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao track by contato.id">
			<td>{{::contato.data | date:'dd/MM/yyyy'}}</td>
		</tr>
    

</body>

2
  • Muito obrigada pelo seu exemplo, mas aplicar o filtro com a dd/MM/yyyy eu havia conseguido, meu problema é quando é dd/MM/yyyy HH:mm:ss
    – Isa
    Commented 24/07/2017 às 16:18
  • entendi, desculpa entendi mal kk Commented 24/07/2017 às 18:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .