Date mask with time

Asked

Viewed 1,554 times

1

How do I Mask a text input 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>
jquery angularjs
  • 1

    Is that so? https://answall.com/q/48598/5878

  • 2

    I used ui-Mask to work with masks in Angularjs: https://github.com/angular-ui/ui-mask

2 answers

2

I use ui-Mask.

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

But the ui-mask will handle no date validation, only String format.

To validate the date I use the datepicker of ui-bootstrap

But if you want to format only one timestamp in formatted for a legible dara you can use the standard filter the angular.

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

1


Use the ui-Mask, and always configure ng-model not to end up with a strange error on the screen, minimal 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>
<script src="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>
<div ng-app="app" ng-controller="ctrl">
  <input type="text" ng-model="text" ui-mask="99/99/9999 99:99:99" ui-mask-placeholder-char="_" />
</div>

  • I applied his example and worked the mask, but is no longer allowing filter as it was before, and gave no error, just stopped working. Do you know what it might be? I put the excerpt in the question

  • @Isa in the mask is like this: day, month, year, hours, minutes and seconds, and in its date: is it day, month, year, hours and minutes? Just take the seconds, or take one or put one out, you know?

  • was lack of attention from me, after I asked I saw that I forgot to apply the change in td, but still yes, it does not filter properly

  • @Isa, I cannot reproduce your example, because there is no code in your question, and also why should another question be opened, because your primary doubt is about mask and not about filter understood? , can you close this question by betting on one of the answers and open another by talking about filter?

  • 1

    I’ll do that. Thank you

Browser other questions tagged jquery angularjs

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