Datepicker funktioniert nicht, während bootstrap datepicker durch js datepicker ersetzt wird

Question

Wenn ich jquery UI verwendet habe, wurde der Datepicker bearbeitet. Aber beim Ersetzen mit bootstarp datepicker funktioniert es nicht. Der Datepicker wird geöffnet, aber der Auswahlprozess funktioniert nicht. und ich benutze auch Bootstrap-Thema. Ich bin neu im Design, bitte führe mich, wenn ich irgendwelche Dateien hinzufügen möchte.

jquery Datei

$(function(){ 
    $('.showDateContainer').click(function(){ 
     $('.showDateItem').datepicker({ 
      onSelect: function(dateText) { 
     } 
    }); 
}); 

Dies ist die Datei, die ich

<?= $this->Html->script("bootstrap-3.3.7-dist/bootstrap.min.js") ?> 
<?= $this->Html->css('bootstrap-3.3.7-dist/bootstrap.min.css') ?> 

<?= $this->Html->script("bootstrap-datepicker-1.6.4-dist/bootstrap-datepicker.min.js") ?> 
<?= $this->Html->css('bootstrap-datepicker-1.6.4-dist/bootstrap-datepicker.min.css') ?> 
<?= $this->Html->script("jQuery/jQuery-2.1.4.min.js") ?> 

Answer 1

Ändern Sie die Reihenfolge der js Dateien hinzugefügt. jQuery-2.1.4.min.js sollte die verbleibenden js Dateien

<?= $this->Html->script("jQuery/jQuery-2.1.4.min.js") ?> 
<?= $this->Html->script("bootstrap-3.3.7-dist/bootstrap.min.js") ?> 
<?= $this->Html->script("bootstrap-datepicker-1.6.4-dist/bootstrap-datepicker.min.js") ?> 

<?= $this->Html->css('bootstrap-3.3.7-dist/bootstrap.min.css') ?> 
<?= $this->Html->css('bootstrap-datepicker-1.6.4-dist/bootstrap-datepicker.min.css') ?> 

Answer 2

Nun, oben, während eine Probe mit Bootstrap datepicker i der Sequenz zählt die Bibliotheken auch bemerkt zu schaffen.

jedoch Unten ist der Arbeitscode für jquery bootstrap datepicker -

\t $('#startDate').datetimepicker(); 
 
\t $("#startDate").on("dp.change",function (e) { 
 
     console.log("Date Changed - " + e.date.toDate()); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 

 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script> 
 

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

 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
\t <div class="col-sm-6" style="height:75px;"> 
 
\t <div class='col-md-5'> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <div class='input-group date' id='startDate'> 
 
\t \t \t \t \t <input type='text' class="form-control" name="startDate" /> 
 
\t \t \t \t \t <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
 
\t \t \t \t \t </span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div>

JS Fiddle-http://jsfiddle.net/vikash2402/RR4hw/1660/

Ich hoffe, dies wird Ihnen helfen :)