7

Tenho um input simples que recebe uma data, como validar essa data se ela é verdadeira?

Por exemplo:

31/02/2006 isso não existe
20/20/9999 isso não existe

<input name="data" 
 ui-mask="99/99/9999"
 kendo-date-picker name="t"
 ng-model="model.data"
 k-format="'dd/MM/yyyy'">

Ou seja validar dias, meses e anos.

Existe no Angular algo pronto pra isso? Ou se for melhor usar Javascript, me mostrem a forma mais simples.

1
  • Veja se o exemplo que postei nao atende Commented 8/10/2015 às 15:13

6 Respostas 6

6

Segue:

Expressão regular:

function isValidDate(date)
{
    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
    if (matches == null) return false;
    var d = matches[2];
    var m = matches[1] - 1;
    var y = matches[3];
    var composedDate = new Date(y, m, d);
    return composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
}

Diretiva (Angular)

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

function Fiddle($scope){}

app.directive('input-data', function() {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function(scope, elm, attr, ctrl) {
            if (!ctrl) {
                return;
            }

            elm.bind('keyup', function () {

                var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(this.value);
                if(matches){
                var d = matches[1];
                var m = matches[2] - 1;
                var y = matches[3];

                var composedDate = new Date(y, m, d); 
                var valid = composedDate.getDate() == d &&
                    composedDate.getMonth() == m &&
                    composedDate.getFullYear() == y;
                }

                if(!matches || !valid)
                    elm.attr('style', 'border:solid 3px #FE2E2E');
                else
                    elm.removeAttr('style');
            });
        }
    };
});

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

function Fiddle($scope) {}

app.directive('input', function() {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) {
        return;
      }


      elm.bind('keyup', function() {

        var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(this.value);
        if (matches) {
          var d = matches[1];
          var m = matches[2] - 1;
          var y = matches[3];


          var composedDate = new Date(y, m, d);
          var valid = composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
        }

        if (!matches || !valid)
          elm.attr('style', 'border:solid 3px #FE2E2E');
        else
          elm.removeAttr('style');
      });
    }
  };
});



function validarData() {
  var valid = isValidDate(document.getElementById("ipData").value);
  document.getElementById("ipData").style.border = (!valid ? 'solid 3px #FE2E2E' : '');
};


function isValidDate(date) {
  var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
  if (matches == null) return false;
  var d = matches[2];
  var m = matches[1] - 1;
  var y = matches[3];
  var composedDate = new Date(y, m, d);
  return composedDate.getDate() == d &&
    composedDate.getMonth() == m &&
    composedDate.getFullYear() == y;
}
html,
body {
  height: 100%;
}
body,
form {
  padding: 1em;
}
input,
input.ng-invalid.has-visited.has-focus,
form {
  border: 1px solid #8d8d8d;
}
input,
button {
  border-radius: 3px;
  padding: .25em;
}
body {
  background: #528cc2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #6dbbff 0%, #528cc2 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dbbff), color-stop(100%, #528cc2));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #6dbbff 0%, #528cc2 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #6dbbff 0%, #528cc2 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #6dbbff 0%, #528cc2 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #6dbbff 0%, #528cc2 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#6dbbff', endColorstr='#528cc2', GradientType=0);
  /* IE6-9 */
  font-family: sans-serif;
}
ul,
li {
  list-style: none;
}
form {
  background: #f7f7f7;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f7f7f7 0%, #e5e5e5 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #e5e5e5));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f7f7f7 0%, #e5e5e5 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f7f7f7 0%, #e5e5e5 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f7f7f7 0%, #e5e5e5 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #f7f7f7 0%, #e5e5e5 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e5e5e5', GradientType=0);
  /* IE6-9 */
  border: 1px solid #8d8d8d;
  border-radius: 6px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  min-width: 400px;
  margin: auto;
  width: 50%;
}
form li {
  margin-bottom: .5em;
}
label {
  color: #8d8d8d;
  display: block;
  line-height: 1.5;
}
:focus {
  outline: 0;
}
input {
  background: rgba(255, 255, 255, .5);
}
input:focus {
  background: #FFF;
}
input.ng-invalid.has-visited {
  border: 1px solid #E44848;
}
input.ng-valid.has-visited {
  border: 1px solid #a3bf57;
}
.error-message {
  color: #E44848;
}
button {
  background: #528CC2;
  color: white;
  cursor: pointer;
  border: 0;
}
button:disabled {
  background: rgba(82, 140, 194, 0.5);
  color: rgba(255, 255, 255, .5);
  font-weight: 400;
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form name="myForm" novalidate ng-app="myApp">
  <ul ng-controller="Fiddle">
    <li>
      <label for="barthirty">Diretiva Angular</label>
      <input input-data type="datetime" ng-model="barthirty" required />

    </li>
  </ul>
  <ul>
    <li>
      <label for="barthirty">Expressao regular</label>
      <input type="datetime" id="ipData" required onkeyup="validarData()"/>
    </li>
  </ul>
  <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

2
  • 1
    @renan Pode ser que tenha errado sim. Mais não sei ao certo. Peço desculpas... Commented 8/10/2015 às 16:38
  • 1
    Acontece, nem esquenta a cabeça. Acho que o pior foi a aprovação da edição, rs. Commented 8/10/2015 às 16:43
6

Maneira simples, utilizando javascript puro:

Tente realizar um parse dinâmico via construtor de Date(). Se funcionar, a data é válida. Exemplo para datas em formato imperial:

var isValidDate = function(str) {
    return !!new Date(str).getTime();
}

Ou a versão para formato brasileiro:

var isValidDate = function(str) {
    return str == 'dd/mm/yyyy' || 
           ( /^\d{2}\/\d{2}\/\d{4}$/.test(str) && new Date(str).getTime() );
}

Para seus exemplos,

isValidDate('31/02/2006'); // false
isValidDate('20/20/9999'); // false

Porém,

isValidDate('01/31/2006'); //true
isValidDate('01/20/9999'); //true

Versão executável a seguir (no Chrome, pressione F12 antes de clicar em Executar trecho de código de maneira que possa ver o log do console):

var isValidDate = function(str) {
    return !!new Date(str).getTime();
}

console.log(isValidDate('31/02/2006'));
console.log(isValidDate('20/20/9999'));

console.log(isValidDate('01/31/2006'));
console.log(isValidDate('01/20/9999'));

5

Você pode utilizar o jQuery Validation para validar seus campos. Ele está somente em inglês, mas possui algumas bibliotecas para tradução. Uma alternativa é utilizar essas extensões.

Onde você adiciona a validação em seu formulário, desta forma:

$( "#myform" ).validate({
  rules: {
    data: {
      required: true,
      dateBR: true
    }
  }
});

E para traduzir as validações, você adiciona esse método:

jQuery.validator.addMethod("dateBR", function (value, element) {
    //contando chars    
    if (value.length != 10) return (this.optional(element) || false);
    // verificando data
    var data = value;
    var dia = data.substr(0, 2);
    var barra1 = data.substr(2, 1);
    var mes = data.substr(3, 2);
    var barra2 = data.substr(5, 1);
    var ano = data.substr(6, 4);
    if (data.length != 10 || barra1 != "/" || barra2 != "/" || isNaN(dia) || isNaN(mes) || isNaN(ano) || dia > 31 || mes > 12) return (this.optional(element) || false);
    if ((mes == 4 || mes == 6 || mes == 9 || mes == 11) && dia == 31) return (this.optional(element) || false);
    if (mes == 2 && (dia > 29 || (dia == 29 && ano % 4 != 0))) return (this.optional(element) || false);
    if (ano < 1900) return (this.optional(element) || false);
    return (this.optional(element) || true);
}, "Informe uma data válida"); 

Desta forma estará validando datas maiores que 1900. Lembrando que é necessário separar por /. Mas a máscara creio que você já está fazendo.

Para o seu exemplo, ficaria assim:

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - Validade Example</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type="text/javascript" src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script><style type="text/css"></style>
    
<body>
  <form id="myform" novalidate="novalidate">
<label for="data">Data: </label>
<input class="left" id="data" name="data">
<br>
<input type="submit" value="Validate!">
</form>
    
    <script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
      jQuery.validator.addMethod("dateBR", function (value, element) {
    //contando chars    
    if (value.length != 10) return (this.optional(element) || false);
    // verificando data
    var data = value;
    var dia = data.substr(0, 2);
    var barra1 = data.substr(2, 1);
    var mes = data.substr(3, 2);
    var barra2 = data.substr(5, 1);
    var ano = data.substr(6, 4);
    if (data.length != 10 || barra1 != "/" || barra2 != "/" || isNaN(dia) || isNaN(mes) || isNaN(ano) || dia > 31 || mes > 12) return (this.optional(element) || false);
    if ((mes == 4 || mes == 6 || mes == 9 || mes == 11) && dia == 31) return (this.optional(element) || false);
    if (mes == 2 && (dia > 29 || (dia == 29 && ano % 4 != 0))) return (this.optional(element) || false);
    if (ano < 1900) return (this.optional(element) || false);
    return (this.optional(element) || true);
}, "Informe uma data válida"); 
                   
$( "#myform" ).validate({
  rules: {
    data: {
      required: true,
      dateBR: true
    }
  }
});
</script>

</body></html>

Exemplo JsFiddle

1
  • Teria como usar esse esquema como uma função? Tipo validaData(data) e ele retornar verdadeiro ou falso, Esse método ficou excelente Commented 30/04/2018 às 21:53
3

Vou te passar um código que uso aqui em javascript puro, esse monstrinho valida tudo vai resolver seu problema:

        function validateDate(id) {
      var RegExPattern = /^((((0?[1-9]|[12]\d|3[01])[\.\-\/](0?[13578]|1[02])      [\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\.\-\/](0?[13456789]|1[012])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|(29[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/;

     if (!((id.value.match(RegExPattern)) && (id.value!=''))) {
          alert('Data inválida.');
   id.focus();
        }
       else
        alert('Data válidaa.');
    }
3
  • Funcionou!! foi o que se encaixou melhor aqui, obrigado.
    – War Lock
    Commented 13/10/2015 às 0:06
  • Aqui comigo ele não funciona com dia 31 de nenhum mês Commented 31/01/2017 às 14:17
  • Exatamente. Não valida os dias 31 nem ano bissexto. Commented 1/03/2019 às 11:46
3

O angular não oferece nenhum tipo de função para validar datas, pelo menos não que eu saiba, mas existem diversas diretivas que se encarregam de fazer isso.

Como alternativa existe a biblioteca de javascript Moment.js (http://momentjs.com/) que oferece uma gama de métodos para trabalho com datas.

Além disso, você pode utilizar alguma lib de datepicker conforme lembrado pelo @Techies, segue o exemplo de diretiva angular fornecido por ele: http://720kb.github.io/angular-datepicker/ ou o Jquery-UI datepicker: https://jqueryui.com/datepicker/

6
  • Não existe algo em jquery?
    – War Lock
    Commented 8/10/2015 às 14:24
  • 2
    Eu fiquei na dúvida foi o que você quis dizer com "em jquery" que nada mais é do que uma lib javascript. Existe a jqueryvalidation.org que tem algumas funções de data, mas não sei lhe dizer se é bom. Commented 8/10/2015 às 14:28
  • eu estava vendo ela agora, mas ainda não consegui implementar.
    – War Lock
    Commented 8/10/2015 às 14:29
  • No stackoverflow em inglês tem alguns exemplos. stackoverflow.com/questions/511439/… Commented 8/10/2015 às 14:31
  • 1
    Recomendo usar alguma biblioteca ou então um datePicker, dessa forma você não terá "problema" com validação de datas. Commented 8/10/2015 às 14:32
1

Segue a função para validar datas em javascript.

if(validateDate("10/01/1985"))
    console.log("OK");
else
    console.log("ERRO");

function validateDate(data) {
        // Ex: 10/01/1985
        var regex = "\\d{2}/\\d{2}/\\d{4}";
        var dtArray = data.split("/");

        if (dtArray == null)
            return false;

        // Checks for dd/mm/yyyy format.
        var dtDay= dtArray[0];
        var dtMonth = dtArray[1];
        var dtYear = dtArray[2];

        if (dtMonth < 1 || dtMonth > 12)
            return false;
        else if (dtDay < 1 || dtDay> 31)
            return false;
        else if ((dtMonth==4 || dtMonth==6 || dtMonth==9 || dtMonth==11) && dtDay ==31)
            return false;
        else if (dtMonth == 2)
        {
            var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
            if (dtDay> 29 || (dtDay ==29 && !isleap))
                return false;
        }
        return true;
    }

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 .