Datetimepicker 不显示日历

Question

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

大家好，我不明白为什么它不起作用，请帮帮我。不显示日历 CSS 问题 ???

Answer 1

因此，通过一些更新的 CDN javascript 和更改一些属性，我设法让它工作。

注意：我没有更改第二个日期时间选择器，因此您可以比较更改的内容。

  <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>

这是 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);
       });
   });

这里是 Fiddle

Datetimepicker 不显示日历

Datetimepicker does not show calendar

bootstrap-datetimepicker