Datetimepicker 不显示日历

Posted 2023-05-08

【中文标题】Datetimepicker 不显示日历

【英文标题】：Datetimepicker does not show calendar

【发布时间】：2021-06-01 20:14:57

【问题描述】：

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

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

【问题讨论】：

你解决过这个问题吗？

【参考方案1】：

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

注意：我没有更改第二个 datetimepicker，因此您可以比较更改的内容。

  <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