Input date type how to disable the next 7 days from the current date

Navigation
6

In an input of type date, how can I do to disable the next 7 days in relation to the current day in the calendar?

I know that with JS I can do a function to disable the days before the current one with the min parameter, but how could it be possible to select only days after 7 days of the current one, for example, today is day 10/20 in the calendar is disabled every day back, but I need to disable the next 7 days in the case until 27/10 and can be selected only days away from that.

Code: 

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>
    
asked by anonymous 20.10.2017 / 16:11

3 answers

5

You can use the getDate () function to get the day of the current date and add 7, then you can use the setDate () to set a new day for the date, which is the result of the sum.

Note: If the number of days passes from the day limit of that month, the function will calculate the corresponding day of the following month.

Below is the section I changed in your code: 

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

Here's an example with your code working: 

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>

Responding to your comment, Firefox since version 51 allows the use of type="date" but it is not enabled by default, so you can enable it by changing the values below to True :

Theabovesolutionwouldsolvetheprobleminyourbrowser,butIimagineyouwantedittoworkforeveryoneusingfirefoxsoI'llputanotheralternativetoyourcalendarusing jQuery + Datepicker Plugin : 

$(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><scripttype="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><linkrel="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="">
    
25.10.2017 / 13:45
2

Dear, my friend. There is a way to solve this using only html5 and javascript, so you do not even need to know about other alternatives yet.

Come on! Consider the input below, to which I just added the "max" attribute. 

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

Below is a definition of a routine that will return the date in the format yyyy-mm-dd. Include the parameter "days" so that you specify how many days will be added to today's date, if you do not want to add any day, just put 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);
};

In the following section the local variables are defined and the call to the routine is made. 

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

Next we set the values for the properties in question, using only javascript. 

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

The testable code is available at:

link

P.S. not all browsers are 100% HTML5 compatible. Although this solution works on most of them, if you encounter any anomaly it might be convenient to study an alternative based on JQuery UI.

:)

    
22.10.2017 / 04:59
1

Le this topic: link Just paste the code below into the bottom of the page: 

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

Or 

    var date2 = new Date();

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

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

Or with this plugin link

    
20.10.2017 / 16:20
Identify if a string is uppercase in sql server! What is the maximum size of an object in 32 and 64 bits?