Filter with angle in date with mask 'dd / MM / yyyy HH: mm: ss'

Question

Filter with angle in date with mask 'dd / MM / yyyy HH: mm: ss'

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I am applying a filter on my page, it was working perfectly, except that when I applied the mask to be in the format dd / MM / yyyy HH: mm: ss it stopped filtering correctly, it understands that there is nothing corresponding, from the first number entered he can not find anything, returns empty the list, as if it did not exist. Before applying the mask, if I manually typed the dd / mm / yyyy HH: mm: ss (typing with the numbers and separations / e :) he would find the correspondent perfectly. The other fields continue to filter 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

asked by anonymous 24.07.2017 / 16:36

2 answers

0

Here is a good way, too bad that I'm not too long 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><bodyng-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>

24.07.2017 / 18:14

Error copying files between servers [closed] Problem with the classifier in PLN

score 1 · Accepted Answer

I would trade ui-mask by Mask Plugin for the reason of the loss of format in model , minimum 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><scriptsrc="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><divng-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>