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

Asked

Viewed 3,636 times

8

In a date input, how can I disable the next 7 days from the current day in the calendar?

I know 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 20/10 in the calendar is disabled every day back, but I need to disable also the next 7 days in case up to 27/10 can be selected only days afrente of this.

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>

javascript html

4 answers

7


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

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

Below I highlight the excerpt 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

Follow 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" however it is not enabled by default, so you can enable changing the values below to True: Firefox

The above solution would solve the problem in your browser, but I imagine you wanted it to work for everyone using firefox so I’ll put another alternative to your calendar using 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="">

  • Is there anything I can do similar that works on Firefox?

  • 1

    There are several ways, one is enabling the use of input type="date" in firefox about:config > dom.forms.datetime -> set to true . Another option is to use the jquery+plugin datepciker(); as soon as possible I add this option in my reply.

  • I edited my answer and tested the second solution in Firefox, ran smoothly, I hope it helps :)

  • Perfect, thank you very much.

  • I’m happy to help :}

3

Expensive, my friend. There’s a way to solve this using only Html5 and javascript, so you don’t need to know about other alternatives yet.

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

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

Below is the definition of a routine that will return the date in yyyy-mm-dd format. I include the "days" parameter so that you specify how many days will be added to today’s date, if you don’t 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 routine call is made.

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

In the sequence we define the values for the properties in question, using javascript only.

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

The testable code is available at:

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

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

:)

  • So my friend, I thank you for your answers and I apologize, I believe I was not very clear in my question, I saw that in your answer you made a method to limit the choice to 7 days of the current day, but what I wanted to do was just the opposite, will make it impossible for the user to choose the first 7 days, forcing him to select only one day after one week of the current day. In the case of day 23/10 the user could select only days after 30/10 that would have passed the 7 days. Anyway thank you for the answer, I’ll find a way to do that.

1

I was able to disable previous dates of the current one and disable Saturdays and Sundays as follows: (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;

1

  • Could you please specify a little better how to apply this to code? I don’t know much about Jquery.

  • Okay, test for us, otherwise it works I have another example.

  • It hasn’t worked yet.

  • Did you add the jQuery extension? Same as the font-awesome, only with http://code.jquery.com/jquery-latest.min.js

  • Yes, I know how to put Jquery code I just don’t know much about the library, I thought something was missing in the code because it didn’t work.

  • Okay, I put a new shape

  • It’s with JS Vanilla also did not work.

  • 1

    I don’t know how else, try using this app https://github.com/chmln/flatpickr

Show 3 more comments

Browser other questions tagged javascript html

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