bootstrap-datetimepicker

Datetimepicker does not show calendar


[https://jsfiddle.net/max1974/uzyrdsh7/12/]

Hi everyone, I can't understand why it doesn't work, give me a hand please. Does not show calendar CSS problem ???


Solution

  • So with some updated CDN javascripts and changing some attributes I managed to get it to work.

    NOTE: I left the second datetimepicker unchanged so you can compare what changed.

      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
      
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/cupertino/jquery-ui.css">  
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">    
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" />
    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>    
      <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/it.js"></script>
    
    <div class="row">
    <!-- WORKING -->                 
      <div class="form-group col-6">
        <div class="input-group date" id='datetimepicker1'>
          <input type="text" class="form-control datetimepicker-input" id="start_time" data-target="#datetimepicker1" name="start_time" placeholder="Data e Ora Inizio" required/>
          <div class="input-group-addon input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
            <div class="input-group-text">
              <i class="fa fa-calendar"></i>
            </div>
          </div>
        </div>
      </div>
    <!-- NOT WORKING -->                                       
      <div class="form-group col-6">
        <div class="input-group date datetimepicker" id='datetimepicker2'>
          <input type="text" class="form-control" id="finish_time" name="finish_time" placeholder="Data e Ora Fine" required/>
          <div class="input-group-addon input-group-append">
            <div class="input-group-text">
              <i class="fa fa-calendar"></i>
            </div>
          </div>
        </div>
      </div> 
    </div>                    
    

    and here is the js

    $(function () {
           $('#datetimepicker1').datetimepicker({
            locale:'it',
            format:'DD-MM-YYYY-HH:mm',
           });
           $('#datetimepicker2').datetimepicker({
            locale:'it',
            format:'DD-MM-YYYY-HH:mm',        
           });
           $("#datetimepicker1").on("dp.change", function (e) {
               $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
           });
           $("#datetimepicker2").on("dp.change", function (e) {
               $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
           });
       });
    

    Here it is in a Fiddle