0

Estoy haciendo un calendario en bootstrap 3 con datetimepicker para agendar un lugar en una sala de Reunión en un determinado horario, el formulario se muestra en un modal, resulta que algunos por equivocación ponen la fecha de fin menor que la fecha de inicio. Le mostro la pantalla.

introducir la descripción de la imagen aquí

Me gustaría validar si el horario de inicio sea mayor que el final que me salte un alert pero adentro del modal.

Se podrá hacer eso?

Les mostro mi código en php

        // Verificamos si se ha enviado el campo con name from  
    if (isset($_POST['from'])) {

    // Si se ha enviado verificamos que no vengan vacios
    if ($_POST['from']!="" AND $_POST['to']!="") 
    {

        // Recibimos el fecha de inicio y la fecha final desde el form
        $Datein                    = date('d/m/Y H:i:s', strtotime($_POST['from']));
        $Datefi                    = date('d/m/Y H:i:s', strtotime($_POST['to']));
        
        //NO FUNCIONO
        if($Datein>$Datefi){
        echo '<script type="text/javascript">alert("Horario fuera de rango.")</script>';
        }
        
        $inicio = _formatear($Datein);
        // y la formateamos con la funcion _formatear

        $final  = _formatear($Datefi);

        // Recibimos el fecha de inicio y la fecha final desde el form
        $orderDate                  = date('Y/m/d H:i:s', strtotime($_POST['from']));
        $inicio_normal = $orderDate;

        // y la formateamos con la funcion _formatear
        $orderDate2                 = date('Y/m/d H:i:s', strtotime($_POST['to']));
        $final_normal  = $orderDate2;

        // Recibimos los demas datos desde el form
        $titulo = evaluar($_POST['title']);

        // y con la funcion evaluar
        $body   = evaluar($_POST['event']);

        // reemplazamos los caracteres no permitidos
        $clase  = evaluar($_POST['class']);
    
        
        //VERIFICO SI EL REGISTRO YA EXISTE
        $q = mysqli_query($conexion, "SELECT * FROM agenda WHERE class = '$clase' AND ((inicio_normal BETWEEN '$inicio_normal' AND '$final_normal') OR (final_normal BETWEEN '$inicio_normal' AND '$final_normal'))");
        
    //VERIFICO SI EL REGISTRO YA EXISTE

    //verificamos si el user exite con un condicional
    if(mysqli_num_rows($q) == 0){

    
    // insertamos el evento
    $query="INSERT INTO agenda VALUES(null,'$titulo','$body','','$clase','$inicio','$final','$inicio_normal','$final_normal')";

    // Ejecutamos nuestra sentencia sql
    $conexion->query($query)or die('<script type="text/javascript">alert("error")</script>');
    header("Location:$base_url");   
    }
    else{
    //mysqli_close($conexion);
    // alerta de error al selecionar una sala ocupada
    echo '<script type="text/javascript">alert("Esta sala esta ocupada en este horario, por favor elija otro horario o otra sala.")</script>';
    }
              


    // Obtenemos el ultimo id insetado
    $im=$conexion->query("SELECT MAX(id) AS id FROM agenda");
    $row = $im->fetch_row();  
    $id = trim($row[0]);

    // para generar el link del evento
    $link = "$base_url"."descripcion_evento.php?id=$id";

    // y actualizamos su link
    $query="UPDATE agenda SET url = '$link' WHERE id = $id";

    // Ejecutamos nuestra sentencia sql
    $conexion->query($query); 

    // redireccionamos a nuestro calendario
    //header("Location:$base_url"); 
    }
    }

Ese seria la ventana modal

    <div class="modal fade" id="add_evento" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
        <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Agregar nuevo evento</h4>
        </div>
        <div class="modal-body">
        <form action="" method="post">
        <label for="from">Inicio</label>
        <div class='input-group date' id='from'>
        <input type='text' id="from" name="from" class="form-control"/>
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
        </div>

        <label for="to">Final</label>
        <div class='input-group date' id='to'>
        <input type='text' name="to" id="to" class="form-control"/>
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
        </div>
        <input type="hidden" name="contador">
        <label for="body">Descripcion</label>
        <textarea id="body" name="event" class="form-control" rows="3"></textarea>
            
      <!--SCRIPT FECHA Y HORA -->
      <script type="text/javascript">
      $(function () {
          $('#from').datetimepicker({
            /* language: 'es',*/
            sideBySide: true,
            minDate:new Date()
             });

           $('#to').datetimepicker({
              /*   language: 'es',*/
              sideBySide: true,
              minDate:new Date()
               
             });
        });
        </script>
        <!--FIN SCRIPT FECHA Y HORA -->
                        
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
        <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> Agregar</button>
        </form>
        </div>
        </div>
        </div>
</div>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!--FIN DE FORMULARIO-->

Habra alguna manera de hacerlo con php o javacript o jquery?

2
  • Cuál es la pregunta? Validar las fechas o generar la alerta?
    – Yussef
    Commented el 21 dic. 2022 a las 13:17
  • validar si el horario de inicio sea mayor que el final que me salte un alert Commented el 21 dic. 2022 a las 13:40

1 respuesta 1

0

Puedes hacer la validación del lado del servidor o del lado del cliente (browser). Lo más fácil seria hacerlo en el cliente con JavaScript / jQuery, pero ojo que un usuario con algo de conocimiento fácilmente la podría saltar.

$("form").submit(function(event) {
  // Deberias hacer la conversion a fecha más robusta (por
  // ejemplo, que revise primero si el campo tiene un valor)
  const from = new Date($('#from').value());
  const to = new Date($('#to').value());
  if (from >= to) {
    alert("La fecha de inicio debe ser menor a la fecha de fin");
    event.preventDefault();
  }
});
1
  • Hola, gracias por su respuesta, copie tal cual esta y no funciona, cambie el "form" por in id="form" que traigo del formulario y tampoco. No será porque esta en un modal? Commented el 22 dic. 2022 a las 14:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.