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>
Is there anything I can do similar that works on Firefox?
– HBretone
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 thejquery+plugin datepciker();
as soon as possible I add this option in my reply.– Caique Romero
I edited my answer and tested the second solution in Firefox, ran smoothly, I hope it helps :)
– Caique Romero
Perfect, thank you very much.
– HBretone
I’m happy to help :}
– Caique Romero