5

Tengo un input html en el que quiero guardar una hora. Para eso uso el datepicker de jquery pero no consigo que me funcione. Me gustaría que al pinchar sobre el campo, me salga solo la posibilidad de poner la Hora.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker3'>
                    <input type='text' class="form-control" />
                    
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        </script>
    </div>
</div>

2 respuestas 2

6

Parecías tener un problema de librerías, versiones viejas con las que tratabas de llamar a funcionalidades nuevas. Aparte del problema de no asignarle el datetimepicker al <input>, como te comenta el colega @Marcos.

Creo que más o menos esto es lo que querías hacer.

$(function() {
  $('#datetimepicker3').datetimepicker({
      format: 'LT'
  });
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker3" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker3"/>
          <div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

4
  • De todas formas algo me está fallando porque deberían verse unas flechas que deberían sumar o restar minutos a la hora en la interface pero no aparecen.
    – phpMyGuel
    Commented el 9 ago. 2019 a las 13:00
  • La librería que faltaba era font-awesome ahora se muestran las flechas para incrementar o disminuir horas y minutos.
    – phpMyGuel
    Commented el 9 ago. 2019 a las 14:54
  • Espera @phpMyGuel, algo me dice que el OP solo quiere horas (sin minutos), por eso eligió como base ese datepicker. Commented el 9 ago. 2019 a las 15:02
  • Yo creo que no. Usa format: 'LT' que es lo que se presenta en el ejemplo de la librería para mostrar lo que yo muestro, de ahí que haya pensado que se trata del resultado deseado.
    – phpMyGuel
    Commented el 9 ago. 2019 a las 15:04
4

Los cambios que deberías realizar son:

  • El id datetimepicker3 debes asignarselo al input
  • El format podrías cambiarlo por H:i
  • Para desactivar el selector de fechas debes indicar datepicker: false

Ejemplo:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date'>
          <input type='text' class="form-control" id='datetimepicker3' />

        </div>
      </div>
    </div>
    <script type="text/javascript">
      $(function() {
        $('#datetimepicker3').datetimepicker({
          datepicker: false,
          format: 'H:i'
        });
      });
    </script>
  </div>
</div>

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.