paad/import/html_forms_justificacion.php

<?php
include_once "import/html_forms.php";
?>

<link rel="stylesheet" href="css/clockpicker.css">
<form id="justificar">
    <div class="form-box">
        <div class="col-md-6 col-sm-12 text-center mb-3">
            Selecciona la fecha que deseas justificar.
        </div>
        <div class="form-group row">
            <label for="filter_fecha" class="col-4 col-form-label">Fecha *</label>
            <div class="col-6 ">
                <input id="filter_fecha" name="fecha" type="text" class="form-control date-picker" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly>
                <div class="invalid-feedback">No es una fecha válida.</div>
            </div>
        </div>
        <!-- Hora inicio CLOCKPICKER -->
        <div class="form-group row">
            <label for="filter_hora_inicio" class="col-4 col-form-label">Hora estimada *</label>
            <div class="input-group clockpicker col-6 ">
                <input id="filter_hora_inicio" name="hora_inicio" type="text" class="form-control" placeholder="hh:mm" maxlength="5" required="required" readonly>
                <div class="input-group-append">
                    <span class="input-group-text" onclick="$('#filter_hora_inicio').focus();">
                        <i class="ing-reloj"></i>
                    </span>
                </div>
                <div class="invalid-feedback">No es una hora válida.</div>
            </div>

        </div>

        <!-- Hora fin -->
        <div class="form-group row">
            <label for="filter_hora_fin" class="col-4 col-form-label">Hora límite</label>
            <div class="input-group clockpicker col-6">
                <input id="filter_hora_fin" name="hora_fin" type="text" class="form-control" placeholder="hh:mm" maxlength="5" readonly>
                <div class="input-group-append">
                    <span class="input-group-text" onclick="$('#filter_hora_fin').focus();">
                        <i class="ing-reloj"></i>
                    </span>
                </div>
                <div class="invalid-feedback">No es una hora válida.</div>
            </div>
        </div>
        <!-- ClaveULSA -->
        <div class="form-group row">
            <label for="filter_clave" class="col-4 col-form-label">Clave</label>
            <div class="col-6">
                <input id="filter_clave" name="clave" type="text" class="form-control" pattern="(do)?[0-9]{3,6}" placeholder="Clave del profesor (do)" maxlength="8" title="Clave del profesor (do)">
                <div class="invalid-feedback">No es una clave válida.</div>
            </div>
        </div>

        <!-- Nombre -->
        <div class="form-group row">
            <label for="filter_nombre" class="col-4 col-form-label">Nombre</label>
            <div class="col-6">
                <input id="filter_nombre" name="nombre" type="text" class="form-control" placeholder="Nombre del profesor" maxlength="50" title="Nombre del profesor">
                <div class="invalid-feedback">No es un nombre válido.</div>
            </div>
        </div>
        <!-- button center -->
        <div class="form-group row justify-content-center p-3">
            <button class="btn btn-primary mr-3" id="main-button" type="button">
                <?= $ICO['buscar'] ?>
                Buscar profesores
            </button>
            <!-- reload page -->
            <button type="button" class="btn btn-outline-danger" onclick="location.reload();">
                <span class="ing-borrar icono"></span>
                Limpiar
            </button>
        </div>

    </div>

</form>

<script src="js/clockpicker.js"></script>
<script>
    $(".date-picker").datepicker($.datepicker.regional["es"]);
    $(".date-picker").datepicker({
        dateFormat: "dd/mm/yyyy",
        changeMonth: true,
    });

    $('.clockpicker').clockpicker({
        placement: 'bottom',
        align: 'right',
        donetext: 'Aceptar',
        autoclose: true,
        'default': 'now',

        afterShow: function() {
            $('.clockpicker-minutes').find('.clockpicker-tick').filter(function() {
                return $(this).text() % 5 !== 0;
            }).remove();

            $('.clockpicker-hours').find('.clockpicker-tick').filter(function(index, element) {
                let num = parseInt($(element).text());
                let condition = num < 7 || num > 22;
                return condition;
            }).remove();
        }

    });
    // only accept from 7:00 to 22:00


</script>