Bootstrap DateTimePicker non è una funzione

Sto cercando di utilizzare il DateTimePicker da http://eonasdan.github.io/bootstrap-datetimepicker/ e sto ottenendo l'errore "TypeError Uncaught:. $ (...) DateTimePicker non è una funzione"Bootstrap DateTimePicker non è una funzione

Ecco la mia include:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

Ecco il codice

<div class="container"> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker6'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker7'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(function() { 
      $('#datetimepicker6').datetimepicker(); 
      $('#datetimepicker7').datetimepicker({ 
       useCurrent: false //Important! See issue #1075 
      }); 
      $("#datetimepicker6").on("dp.change", function (e) { 
       $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
      }); 
      $("#datetimepicker7").on("dp.change", function (e) { 
       $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
      }); 
     }); 
    }); 
</script>

Qualsiasi aiuto sarebbe molto apprezzato.

fonte

2015-10-21 unbootabru

eventuali altri errori in la console JS? – Reeno

no, questo è l'unico – unbootabru

Funziona per me: https://jsfiddle.net/cfwat90p/ (questo è esattamente il tuo codice, incluso il 'bootstrap.min.css' mancante, ma un file CSS mancante non causa un JS-error) – Reeno

Di seguito si riporta il codice giusto. Includere file JS in modo seguente:

<html> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

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

<body> 



<div class="container"> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker6'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker7'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(function() { 
      $('#datetimepicker6').datetimepicker(); 
      $('#datetimepicker7').datetimepicker({ 
       useCurrent: false //Important! See issue #1075 
      }); 
      $("#datetimepicker6").on("dp.change", function (e) { 
       $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
      }); 
      $("#datetimepicker7").on("dp.change", function (e) { 
       $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
      }); 
     }); 
    }); 
</script> 



</body> 


</html>

fonte

2015-10-21 15:35:26 Suraj

Ho dovuto spostare gli include/javascript un po 'perché era un'app per i flask, ma questo ordine ha funzionato. Grazie – unbootabru

Happy coding @ user3784402 – Suraj

Il problema è che non è stato incluso bootstrap.min.css, anche la sequenza dei file potrebbe essere:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

DEMO

fonte

2015-10-21 15:31:45

@ user3784402, assicurati di aver incluso il file cst di bootstrap. –

Grazie Sta funzionando per me dopo la sequenza di riorganizzazione –

Questo ha funzionato perfettamente !!! Grazie. –

tenta di utilizzare datepicker/TimePicker invece di datetimepicker come:

sostituire:

$('#datetimepicker1').datetimepicker();

con:

$('#datetimepicker1').datepicker(); // or timepicker for time picker

fonte

2018-01-01 19:35:26

Bootstrap DateTimePicker non è una funzione

risposta

Problemi correlati