Home / Questions / 285333
Accepted
Lorenzo Martín
Asked: 2020-08-13 02:52:23 +0800 CST 2020-08-13 02:52:23 +0800 CST

Bootstrap datetimepicker css bug

  • 772

Before starting I apologize, I have tried to reproduce the problem by adding the libraries and I don't know what the reason is but I can't get them to work. My problem is that I want to add a date field type dd/mm/yyyy and a time field that only shows the time type hh:mm. I don't get any errors in console but the css doesn't seem to work right. Regarding the date, only a text box with nothing is displayed and in the hour, I do not see the dates to go up and down, although I do click on it if it goes up and down.

	
	$('.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>

bootstrap-4

1 Answers

  1. Best Answer

    I was already helping you with that the other day. You have to load the correct libraries. You are trying to use two different libraries. On the one hand datepicker, that it belongs to JQueryUI and whose library you were not loading, and on the other hand, datetimepickerthat it belongs to the Tempus Dominus library (before it belonged to Bootstrap itself but now it has apparently become independent).

    Why use two libraries if it already does what you need? For these same reasons I have dispensed with the use of datepickerto do everything with 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>

    • 7