8

Em um input do tipo date, como posso fazer para desabilitar os próximos 7 dias em relação ao dia atual no calendário?

Sei que com JS consigo fazer uma função para desabilitar os dias anteriores ao atual com o parâmetro min, mas como poderia fazer para ser possível selecionar somente dias após 7 dias do atual, por exemplo, hoje é dia 20/10 no calendário está desabilitado todos os dias pra traz, porém preciso desabilitar também os próximos 7 dias no caso até 27/10 podendo ser selecionado somente dias afrente disso.

Código:

var today = new Date().toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('min', today);
#no-spin::-webkit-inner-spin-button {-webkit-appearance: none;}

input[type="date"] {
position: relative;
padding: 4px;
}
    
input[type="date"]::-webkit-calendar-picker-indicator {
color: transparent;
background: none;
z-index: 1;
}

input[type="date"]:before {
color: transparent;
background: none;
display: block;
font-family: 'FontAwesome';
content: '\f073';
width: 15px;
height: 20px;
position: absolute;
top: 7px;
right: 6px;
color: #999;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Date Format</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
 Data: <input type="date" id="no-spin" onkeypress="return false" name="date"  min="">
</body>
</html>

4 Respostas 4

7
+50

Você pode utilizar a função getDate() para obter o dia da data atual e somar 7, em seguida você pode utilizar a função setDate() para definir um novo dia para a data, sendo ele o resultado da soma.

Obs.: Caso o número de dias passe do limite de dias daquele mês a função calculará o dia correspondente do mês seguinte.

Abaixo destaco o trecho que alterei no seu código:

var today = new Date();                    //Gravo a data atual na variavel
today.setDate(today.getDate() + 7);        //Adiciono 7 dias 
today = today.toISOString().split('T')[0]; //Formato a data

Segue exemplo com seu código funcionando:

var today = new Date();
today.setDate(today.getDate() + 7); //Voalá
today = today.toISOString().split('T')[0];

document.getElementsByName("date")[0].setAttribute('min', today);
#no-spin::-webkit-inner-spin-button {-webkit-appearance: none;}

input[type="date"] {
position: relative;
padding: 4px;
}
    
input[type="date"]::-webkit-calendar-picker-indicator {
color: transparent;
background: none;
z-index: 1;
}

input[type="date"]:before {
color: transparent;
background: none;
display: block;
font-family: 'FontAwesome';
content: '\f073';
width: 15px;
height: 20px;
position: absolute;
top: 7px;
right: 6px;
color: #999;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Date Format</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
 Data: <input type="date" id="no-spin" onkeypress="return false" name="date"  min="">
</body>
</html>

Respondendo ao seu comentário, o Firefox desde a versão 51 permite o uso do type="date" porém ele não vem habilitado por padrão, então você pode habilitar alterando os valores abaixo para True: Firefox

A solução acima resolveria o problema no seu navegador, mas imagino que você queria que funcione para todos que usam o firefox então vou colocar uma outra alternativa para seu calendário utilizando jQuery + Plugin Datepicker:

$(function(){ //Ao cerregar rodará os comandos abaixo:

  /*Jquery utiliza o seletor semelhante ao css
  Então abaixo pego o elemento de id no-spin
  Defino ele como um datepicker
  O plugin datepicker possui diversar opções
  Uma delas é o  minDate que permite definir
  a data minima selecionavel.
  */
  
  $("#no-spin").datepicker( {
    dateFormat: "dd/mm/yy",
    minDate: 7 //Representa a data atual + 7
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

 Data: <input type="text" id="no-spin" onkeypress="return false" name="date"  min="">

5
  • Existe algo que eu possa fazer semelhante que funcione no FireFox?
    – HBretone
    25/10/2017 às 13:35
  • 1
    Existem diversas formas, uma é habilitando o uso de input type="date" no firefox about:config > dom.forms.datetime -> set to true . Outra opção é utilizando o jquery+plugin datepciker(); assim que possível eu adiciono essa opção na minha resposta. 25/10/2017 às 13:43
  • Editei minha resposta e testei a segunda solução no Firefox, rodou tranquilo, espero que ajude :) 25/10/2017 às 14:29
  • Perfeito, muito obrigado.
    – HBretone
    25/10/2017 às 14:33
  • Fico feliz em ajudar :} 25/10/2017 às 14:33
3

Caro, amigo. Há uma maneira de resolver isso usando apenas html5 e javascript, de modo que você ainda não precisará ter conhecimentos de outras alternativas.

Vamos lá! Considere o input abaixo, ao qual apenas acrescentei o atributo "max".

<input type="date" id="no-spin" onkeypress="return false" name="date" min="" max="">

Abaixo veja a definição de uma rotina que retornará a data no formato yyyy-mm-dd. Incluí o parâmetro "days" para que você especifique quantos dias serão acrescentados à data de hoje, se não quiser acrescentar dia algum basta colocar 0(zero).

Date.prototype.yyyymmdd = function(days) {
  var yyyy = this.getFullYear();
  var mm = this.getMonth() < 9 ? "0" + (this.getMonth() + 1) : (this.getMonth() + 1); // getMonth() is zero-based
  var dd = (this.getDate() < 10 ? "0" + this.getDate() : this.getDate()) + days;
  return "".concat(yyyy).concat("-").concat(mm).concat("-").concat(dd);
};

No trecho seguinte são definidas as variáveis locais e é feita a chamada à rotina.

var d = new Date();
var interval_min = d.yyyymmdd(0);
var interval_max = d.yyyymmdd(7);

Na sequência definimos os valores para as propriedades em questão, usando apenas javascript.

document.getElementById("no-spin").setAttribute("min", interval_min);
document.getElementById("no-spin").setAttribute("max", interval_max);

O código testável está disponível em:

https://jsfiddle.net/caiubyfreitas/336fznx1/

P.S. nem todos os navegadores são 100% compatíveis com HTML5. Embora esta solução funcione na maioria deles, caso você encontre alguma situação anômalo poderá ser conveniente estudar uma alternativa baseada em JQuery UI.

:)

1
  • Então amigo, agradeço a sua respostas e peço desculpas, creio não ter sido muito claro em minha pergunta, vi que na sua resposta vocês fez um método para limitar a escolha a 7 dias do dia atual, porém o que eu queria era fazer justamente ao contrário, serio impossibilitar o usuário de escolher os 7 primeiros dias, o obrigando a selecionar somente um dia após uma semana do dia atual. No caso dia 23/10 o usuário poderia selecionar somente dias após 30/10 que já teria se passado os 7 dias. Bom de qualquer forma agradeço a resposta, vou procurar uma forma de fazer isso.
    – HBretone
    23/10/2017 às 10:17
1

Le esse tópico: http://fabrica.ms.senac.br/2013/06/jquery-um-simples-tutorial-para-iniciantes/ É só colar no final da página o código abaixo:

<script type="text/javascript">
     $( "#no-spin" ).datepicker( "option", "maxDate", "+0m +0w +7d" );
</script>

Ou

    var date2 = new Date();

    date2.setDate(date2.getDate()+7);

    $( "#no-spin" ).datepicker({
       maxDate: date2
    });

Ou com esse plugin https://github.com/chmln/flatpickr

8
  • Poderia por favor especificar um pouco melhor como aplicar isso ao código? Não entendo muito de JQuery.
    – HBretone
    20/10/2017 às 14:37
  • Ok, testa para nós, senão funcionar tenho outro exemplo.
    – Allan Kehl
    20/10/2017 às 14:43
  • Ainda Não funcionou.
    – HBretone
    20/10/2017 às 14:45
  • Vc adiciounou a extensão do jQuery? Igual ao font-awesome, só com o code.jquery.com/jquery-latest.min.js
    – Allan Kehl
    20/10/2017 às 14:48
  • 1
    Não conheço outra forma, tenta usar esse app github.com/chmln/flatpickr
    – Allan Kehl
    20/10/2017 às 15:05
1

Consegui desabilitar datas anteriores da atual e desabilitar sábados e domingos da seguinte forma: (script)

    d =  new Date();

    y = d.getFullYear();

    m = d.getMonth() + 1; //0 é janeiro

    d = d.getDate();

    const picker = document.getElementById('data');

    picker.addEventListener('input', function(e){

    var day = new Date(this.value).getUTCDay();

    if([6,0].includes(day)){

        e.preventDefault();

        this.value = '';

        alert('Agendamento apenas durante a semana');

    }

    });

    document.getElementById("data").min = y + "-" + m + "-" + d;

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 .