Mehrere Bootstrap Datepickers auf einer Seite

Question

Ich habe ein kleines Problem mit Boostrap Datepickers.

$('#date1,#date2,#date3,#date4,#date5,#date6').datetimepicker({ 
     language: 'es', 
     weekStart: 1, 
     todayBtn: 1, 
     autoclose: 1, 
     todayHighlight: 1, 
     startView: 2, 
     minView: 2, 
     forceParse: 0 
}); 

Das Problem ist, dass von date2 zu date6 mit jQuery erstellt werden, wenn die Benutzer eine Buttom klickt und das Datetimepicker funktioniert nicht, nur die date1.How kann ich dieses Problem lösen? Dank

Answer 1

Hinzufügen als Antwort die Klasse Kommentar zu klären. Verwenden Sie eine Klasse auf dem neu hinzugefügten Elemente, dann erstellen Sie die Datumsauswahl durch, um den Körper oder das Dokument Anbringen wie:

<div class='input-group date datepicker-me-class' id='date2'> 
    <input type='text' class="form-control" /> 
    <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 

nun in das Dokument anhängen:

$(document).on('focus', ".datepicker-me-class", function() { 
    $(this).datepicker({ 
    language: 'es', 
    weekStart: 1, 
    todayBtn: true, 
    autoclose: true, 
    todayHighlight: true, 
    startView: 2, 
    minViewMode: 2, 
    forceParse: false 
    }); 
}); 

Answer 2

DEMO: Es ist scheint es funktioniert, kann die Option, die Sie wie

hinzugefügt haben

language: 'es', 
    weekStart: 1, 
    todayBtn: 1, 
    autoclose: 1, 
    todayHighlight: 1, 
    startView: 2, 
    minView: 2, 
    forceParse: 0 

Probleme erstellen, überprüfen Sie bitte die Datetimepicker-Version, die Sie verwenden, wenn diese Option verfügbar sind oder nicht.

$('#datetimepicker1,#datetimepicker2,#datetimepicker3,#datetimepicker4').datetimepicker();

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
 
    <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script> 
 

 
<div class="input-group date" id="datetimepicker1"> 
 
       <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
      </div> 
 
      <div class="input-group date" id="datetimepicker2"> 
 
       <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
      </div> 
 
      <div class="input-group date" id="datetimepicker3"> 
 
       <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
      </div> 
 
      <div class="input-group date" id="datetimepicker4"> 
 
       <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
      </div>