Date angle filter with mask 'dd/MM/yyyy HH:mm:ss'

Asked

Viewed 5,057 times

2

I’m applying a filter on my page, it was working perfectly, only when I applied the mask to stay in the format dd/MM/yyyy HH:mm:ss he stopped filtering correctly, he understands that there is nothing corresponding, from the first number typed he can not find anything, return empty the list, as if it did not exist. Before applying the mask, if I manually typed dd/MM/yyyy HH:mm:ss (typing with the numbers and separations / and :) it would find the perfect match. The other fields continue filtering correctly.

    <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>
angularjs
  • 1

    try adding model-view-value="true", along with ui-Mask, it may be that keep the object model solves

  • It worked!! only when I delete and type again it goes back to the same error, he understands that there is nothing, he knows what can be?

  • Worse than I have no idea, I usually try to make filters manually by the Filters and masks by directives, if you want to put my solution but it is totally different

  • @Felipeduarte accept your solution yes, you can post?

  • @Virgilionovic it comes as dd/MM/yyyy HH:mm ss:

  • @Virgilionovic of ours, you imagine a possible solution?

Show 1 more comment

2 answers

1


I’d trade the ui-mask for the Mask Plugin due to the loss of the model, minimal example:

To apply filter on date and time would be as follows:

$(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

Here is already a good way, too bad I’m not in a lot of time now :(

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>

  • Thank you so much for your example, but apply the filter with the dd/MM/yyyy I had succeeded, my problem is when it is dd/MM/yyyy HH:mm:ss

  • I got it, sorry I misunderstood kk

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.