First of all, I have a SELECT with two values, the value A and the value B. And one DATE, and two SELECT more, one for the hour and another for the minutes
In the project, I have two restaurants, A and B. The restaurant B does not open on Mondays, but the restaurant A does open on Mondays, and each one has different opening dates, the A is open from 8:00 a 4:00 pm, while the B opens from 1:30 p.m. to 4:30 p.m.
When the B value is selected, the DATE will not be able to select Mondays, but if the A value was selected instead of B, it could be selected.
Possibly it will be complicated, and maybe one day there will be later, or close earlier, so that depending on the chosen day of the week, some options for the SELECT of the hour and minute will appear.
How can I do a function? That according to the selected restaurant (A, B) in turn filters the selected day on DATE (Monday Tuesday Wednesday ... [If bar B was selected, no Monday could be chosen]) and according to the chosen restaurant, and the chosen day, show a different selectable hour and minute.
I hope you have explained me well, thank you for your attention. ^ ^
select{
width: 300px;
padding: 12px 20px;
margin: 4px 35px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
input[type=date]{
padding: 12px 20px;
margin: 4px 35px;
border: 2px solid #ccc;
width: 300px ;
font-size: 16px;
}
.horas{
width: 150px;
margin-left: 35px;
margin-right: 0px;
margin-top:4px;
margin-bottom: 4px;
}
.horass{
width: 300px;
margin: 4px 35px;
}
.horasss{
width: 150px;
margin-left: 0px;
margin-right: 35px;
margin-top: 4px;
margin-bottom: 4px;
}
label{
font-weight:bold;
font-size:17px;
font-family:helvetica;
}
.tdxD{
padding-left: 30px;
}<table>
<tr>
<td class="tdxD"><label for="bar">Restaurante</label></td>
<td><select id="bar" name="restaurante"><option value="A">A</option><option value="B">B</option></select></td>
</tr>
<tr>
<td class="tdxD"><label for="fname">Fecha de reserva</label></td>
<td><input type="date" name="fecha"></td>
</tr>
<tr>
<td class="tdxD"><label for="fname">Hora de reserva</label></td>
<td><select name="hora" class="horas"><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option></select><select name="min" class="horasss"><option value="00">00</option><option value="15">15</option><option value="30">30</option><option value="45">45</option></select></td>
</tr>
</table>