4

antes de empezar pido disculpas, he intentado reproducir el problema añadiendo las librerías y no se cual es la razón pero no logro que funcionen. Mi problema es que quiero añadir un campo fecha tipo dd/mm/yyyy y un campo hora en el que solo muestre la hora tipo hh:mm. No recibo ningún error en consola pero los css parecen no funcionar bien. En lo referente a la fecha solo se despliega una caja de texto sin nada y en la hora, no veo las fechas para subir y bajar aunque si le pulso si sube de hora y baja.

	
	$('.datetimepicker').datepicker({}); //Fecha
	
	 $('.datetimepickerH').datetimepicker({format: 'LT'}); //Hora
        
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>


<div class="row">
		<div class=" col-md-12  col-xs-12 ">
			<form>
			
				
				<div class="form-group row mb-0">
					<label for="staticEmail" class="col-sm-2 col-form-label">Fecha</label>
					<div class="col-sm-10">
						<input type="text" class="form-control form-control-sm datetimepicker date " id="fecha" placeholder="Fecha">
					
					
					</div>
				</div>
				
				<div class="form-group row mb-0">
					<label for="staticEmail" class="col-sm-2 col-form-label">Hora Inicio</label>
					<div class="col-sm-10">
						<input type="text" class="form-control form-control-sm datetimepickerH date" id="hInicio" placeholder="Hora Inicio">
						<span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
					</div>
				</div>

			</form>
		</div>	
	</div>		   
	

1 respuesta 1

7

Ya te estuve ayudando con eso el otro día. Tienes que cargar las librerías correctas. Estás tratando de usar dos librerías diferentes. Por un lado datepicker, que pertenece a JQueryUI y cuya librería no estabas cargando, y por otro lado datetimepicker que pertenece a la librería Tempus Dominus (antes pertenecía al propio Bootstrap pero ahora se ha independizado aparentemente).

¿Para qué usar dos librerías si la misma ya te hace lo que necesitas? Por esos mismo he prescindido del uso de datepicker para realizarlo todo con datetimepicker.

$('#fecha').datetimepicker(); //Fecha	
$('#hora').datetimepicker({format: 'LT'}); //Hora
<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="hora" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#hora"/>
          <div class="input-group-append" data-target="#hora" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <div class="input-group date" id="fecha" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#fecha"/>
          <div class="input-group-append" data-target="#fecha" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2
  • puedes agregar donde conseguistes esa configuracion del formato format : 'LT' vaquero? Commented el 20 feb. 2020 a las 20:04
  • @JackNavaRow Pues teniendo en cuenta que pasaron 6 meses desde que redacté la respuesta no lo recuerdo del todo bien, pero es muy posible que fuese de esta página, que contiene diferentes ejemplos de uso y de distintas propiedades: eonasdan.github.io/bootstrap-datetimepicker Para ti, marshal ^^
    – phpMyGuel
    Commented el 20 feb. 2020 a las 20:32

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.