Date mask with time

1

How do I make a Mask for an input text with the format xx / xx / xxxx xx: xx: xx using angular? It would be the day, month, year, hour, minute and seconds.

<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-char="_"/>                         
</div>
                   <table>
                     <tbody>
                      <tr dir-paginate="atividade in atividades | filter:criterioDeBusca | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao|itemsPerPage:5">
                        <td>{{atividade.dataCriacao | date:'dd/MM/yyyy HH:mm:ss'}}</td>
                    </tr>
                  </tbody>
                </table>
    
asked by anonymous 18.07.2017 / 15:29

2 answers

1

Use ui-mask , and always set ng-model to not end a strange screen error , minimum example :

var app = angular.module('app',['ui.mask']);
app.controller('ctrl', function($scope) {
  $scope.text = "";
});
<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 src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-mask/1.8.7/mask.min.js"></script><divng-app="app" ng-controller="ctrl">
  <input type="text" ng-model="text" ui-mask="99/99/9999 99:99:99" ui-mask-placeholder-char="_" />
</div>
    
20.07.2017 / 22:44
2

I use ui-mask .

<input type="text" ui-mask="99/99/9999 99:99:99" ui-mask-placeholder ui-mask-placeholder-char="_" />

However, ui-mask will not take care of any date validation, just the String format.

To validate the date I use datepicker of ui-bootstrap

But if you want to format only a timestamp in formatted to a legible character you can use the default filter of the angle.

{{ dataEmTimestamp | date: 'dd/MM/yyyy HH:mm:ss' }}
    
20.07.2017 / 22:00