{% 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 %}
|
|
|
|
|