You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

55 lines
1.8 KiB

{% extends 'base.html' %}
{% block header %}
<h2>{% block title %}Hacer una nueva reserva{% endblock title %}</h2>
{% endblock header %}
{% block content %}
<form action="/reservar" method="post">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required class="form-control"><br>
</div>
<div class="form-group">
<label for="fecha">Fecha:</label>
<input type="date" id="fecha" name="fecha" required class="form-control" min="{{ hoy }}", max="{{ pasado}}"><br>
</div>
<div class="form-group">
<label for="hora">Hora:</label>
<input type="time" id="hora" name="hora" required class="form-control" list="horas-permitidas"><br>
</div>
<datalist id="horas-permitidas">
<option value="08:00"></option>
<option value="09:00"></option>
<option value="10:00"></option>
<option value="11:00"></option>
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
<option value="15:00"></option>
<option value="16:00"></option>
<option value="17:00"></option>
</datalist>
<div class="form-group">
<button type="submit" class="submit-btn">Reservar</button>
</div>
</form>
<script>
document.getElementById('hora').addEventListener('input', function() {
var val = this.value;
var options = document.getElementById('horas-permitidas').querySelectorAll('option');
var match = Array.from(options).find(function(option) {
return option.value === val;
});
if (!match) {
this.value = '';
}
});
</script>
{% endblock content %}