2

Tenho um formulário com um input do tipo datetime-local e preciso bloquear a inserção de datas retroativas, como faço isso?

<form name="F1" id="edit-profile" class="form-horizontal" action="" method="post" enctype="multipart/form-data">
  <div class="control-group">
    <label class="form-space control-label" for="lastname">Titulo: </label>
    <input type="text" class="form-space form-control form-margin disable" name="titulo" id="titulo" required="" value="">
    <label class="form-space control-label" for="lastname">Subtitulo: </label>
    <input type="text" class="form-space form-control form-margin" id="subtit" value="" name="subtit" required="">
    <label class="form-space control-label" for="lastname">Caso deseja agendar, insira uma data e hora: </label>
    <input type="datetime-local" class="form-space form-control form-margin" id="agend" value="" name="agend">
    <input type="submit" name="cadastro" value="Enviar" class="btn-post btn">
  </div>
</form>
1
  • Você quer bloquear datas a partir de um mês, de um dia em específico, ou de datas anteriores a de hoje? Explique melhor o que você deseja fazer. Commented 18/10/2018 às 14:18

4 Respostas 4

1

Segundo a documentação, um input type="datetime-local" possui o atributo min, que indica o valor mínimo a ser aceito. Ou seja, datas anteriores ao valor indicado no atributo min não serão aceitas.

Então a princípio bastaria setá-lo com o valor desejado. A documentação diz que a data e hora devem estar no formato "YYYY-MM-DDThh:mm" (que é o formato definido pela norma ISO 8601). Mas como você quer que o valor mínimo seja a data atual, o jeito seria alterá-la usando JavaScript. E é aí que começam os problemas...


A princípio, bastaria fazer new Date().toISOString().slice(0, 16) para obter a data e hora atual no formato que o atributo min espera. Mas há alguns poréns.

O método toISOString retorna os valores de data e hora em UTC. Mas campos input do tipo datetime-local (e também seus atributos, como o min) usam o timezone do browser (que não necessariamente será o mesmo que UTC), e isso pode causar alguns problemas meio chatos.

Por exemplo, meu browser está configurado com o Horário de Brasília. Ao rodar o código abaixo, se eu preencher a data e hora atual, não será aceito:

// ATENÇÃO: toISOString() não é a melhor opção, veja explicação abaixo
var hoje = new Date().toISOString().slice(0, 16);

// DOMContentLoaded: assim que carregar a página
document.addEventListener('DOMContentLoaded', function() {
    var campo = document.querySelector('#agend');

    // seta a data mínima para o campo
    campo.min = hoje;

    // mostra mensagem de erro customizada (caso não queira a mensagem padrão do browser)
    campo.addEventListener('invalid', function(e) {
        e.target.setCustomValidity(`A data não pode ser anterior a ${hoje}`);
    });
    campo.addEventListener('input', function(e) {
        e.target.setCustomValidity('');
        e.target.checkValidity();
    });
});
<form>
    <input type="datetime-local" id="agend" value="">
    <input type="submit" value="Enviar">
</form>

Isso porque new Date().toISOString() gera uma string levando-se em conta a data e hora em UTC. Por exemplo, testei o código hoje (29/08/2022), às 11h no Horário de Brasília. Porém, toISOString() retorna 2022-08-29T14:00:00.000Z (repare que a hora é 14h, pois 11h no Horário de Brasília corresponde a 14h em UTC). Ou seja, o resultado de new Date().toISOString().slice(0, 16) é 2022-08-29T14:00.

Mas como o campo datetime-local (e também o atributo min) trabalha no timezone do browser, ele acha que o menor valor aceito para o campo deve ser 29/08/2022, às 14h no Horário de Brasília. Então se eu selecionar a data de hoje, e um horário entre 11h e 13h59 (que em tese seriam válidos), ele não aceita.

Isso porque ao fazer o slice na saída de toISOString, eu deliberada e erroneamente eliminei a informação de que aquela data e hora estão em UTC (pois é isso que o "Z" no final indica). Como eu misturei valores em UTC (a saída de toISOString) com valores no timezone do browser (o valor do atributo min, além do próprio input), ocorrem essas discrepâncias.

O mais garantido seria setar o valor do atributo min nos valores que correspondam ao timezone do browser, em vez de UTC. Infelizmente não tem uma forma direta de, ao mesmo tempo, obter a data/hora no mesmo fuso do browser e no formato ISO 8601. O jeito é fazê-lo manualmente:

function pad(valor) {
    return valor.toString().padStart(2, '0');
}

function formata(data) {
    return data.getFullYear() + '-' + pad(data.getMonth() + 1) + '-' + pad(data.getDate())
           + 'T' + pad(data.getHours()) + ':' + pad(data.getMinutes());
}

var hoje = formata(new Date());

// DOMContentLoaded: assim que carregar a página
document.addEventListener('DOMContentLoaded', function() {
    var campo = document.querySelector('#agend');
    // seta a data mínima para o campo
    campo.min = hoje;

    // mostra mensagem de erro customizada (caso não queira a mensagem padrão do browser)
    campo.addEventListener('invalid', function(e) {
        e.target.setCustomValidity(`A data não pode ser anterior a ${hoje}`);
    });
    campo.addEventListener('input', function(e) {
        e.target.setCustomValidity('');
        e.target.checkValidity();
    });
});
<form>
    <input type="datetime-local" id="agend" value="">
    <input type="submit" value="Enviar">
</form>

-1

Tente fazer desta forma. Obs.: Não valida as horas, apenas o dia.

$("#edit-profile").submit(function(e) {

  var agendamento = $("#agend").val().split('T');
  agendamento = new Date(agendamento[0]).setHours(24);
  var hoje = new Date();
  if (agendamento <= hoje) {
    alert('Por favor, insira uma data válida!');
    e.preventDefault();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="F1" id="edit-profile" class="form-horizontal" action="" method="post" enctype="multipart/form-data">
  <div class="control-group">
    <label class="form-space control-label" for="lastname">Titulo: </label>
    <input type="text" class="form-space form-control form-margin disable" name="titulo" id="titulo" required="" value="">
    <label class="form-space control-label" for="lastname">Subtitulo: </label>
    <input type="text" class="form-space form-control form-margin" id="subtit" value="" name="subtit" required="">
    <label class="form-space control-label" for="lastname">Caso deseja agendar, insira uma data e hora: </label>
    <input type="datetime-local" class="form-space form-control form-margin" id="agend" value="" name="agend">
    <input type="submit" name="cadastro" value="Enviar" class="btn-post btn">
  </div>
</form>

-2

Você pode usar código em php, fica mais curto:

Codigo PHP:

date_default_timezone_set('America/Sao_Paulo');
$datahoje = date('Y-m-d', time());

Código HTML:

<form>
    <input  min="<?php echo $datahoje; ?>" type="date" id="agend" value="">
    <input type="submit" value="Enviar">
</form>


               
-2

var campo = document.querySelector('#agend');
// ATENÇÃO: toISOString() não é a melhor opção, veja explicação abaixo
var hoje = new Date().toISOString().slice(0, 16);

// DOMContentLoaded: assim que carregar a página
document.addEventListener('DOMContentLoaded', function() {
    // seta a data mínima para o campo
    campo.min = hoje;
});

// mostra mensagem de erro customizada (caso não queira a mensagem padrão do browser)
campo.addEventListener('invalid', function(e) {
    e.target.setCustomValidity(`A data não pode ser anterior a ${hoje}`);
});
campo.addEventListener('input', function(e) {
    e.target.setCustomValidity('');
    e.target.checkValidity();
});
<form>
    <input type="datetime-local" id="agend" value="">
    <input type="submit" value="Enviar">
</form>

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 .