2015-11-24 13 views
5

Ich habe den Code, um eine Datumsauswahl hinzuzufügen. Funktioniert gut. aber wenn ich versuche, mehr als einen Pflücker (div) hinzuzufügen. Nur der erste Pflücker funktioniert, kann mir jemand erklären was falsch ist. Ich muss in meinem Stundenplan sechzehn Datepicker (Eingaben) hinzufügen.Mehrere Datepicker funktionieren nicht

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" media="screen" 
 
    href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css"> 
 
    </head> 
 
    <body> 
 
    <div id="datetimepicker" class="input-append date"> 
 
     <input type="text"></input> 
 
     <span class="add-on"> 
 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
 
     </span> 
 
    </div> 
 

 

 
    <div id="datetimepicker" class="input-append date"> 
 
     <input type="text"></input> 
 
     <span class="add-on"> 
 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
 
     </span> 
 
    </div> 
 
    <script type="text/javascript" 
 
    src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
 
    </script> 
 
    <script type="text/javascript" 
 
    src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"> 
 
    </script> 
 
    <script type="text/javascript" 
 
    src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"> 
 
    </script> 
 
    <script type="text/javascript" 
 
    src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js"> 
 
    </script> 
 
    <script type="text/javascript"> 
 
     $('#datetimepicker').datetimepicker({ 
 
     format: 'dd/MM/yyyy hh:mm', 
 
     language: 'en', 
 
     pick12HourFormat: true // enables the 12-hour format time picker 
 

 
     }); 
 
    </script> 
 

 
    </body> 
 
<html>

+0

Sie verwenden dieselbe id '# datetimepicker' – Raviteja

Antwort

4

ersetzen id durch class, weil id in demselben Dokument eindeutig sein sollte:

$('#datetimepicker').datetimepicker({ 

werden sollten:

$('.date').datetimepicker({ 

Hoffnung, das hilft.


<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" media="screen" 
 
    href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css"> 
 
    </head> 
 
    <body> 
 
    <div id="datetimepicker" class="input-append date"> 
 
     <input type="text"></input> 
 
     <span class="add-on"> 
 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
 
     </span> 
 
    </div> 
 

 

 
    <div id="datetimepicker" class="input-append date"> 
 
     <input type="text"></input> 
 
     <span class="add-on"> 
 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
 
     </span> 
 
    </div> 
 
    <script type="text/javascript" 
 
    src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
 
    </script> 
 
    <script type="text/javascript" 
 
    src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"> 
 
    </script> 
 
    <script type="text/javascript" 
 
    src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"> 
 
    </script> 
 
    <script type="text/javascript" 
 
    src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js"> 
 
    </script> 
 
    <script type="text/javascript"> 
 
     $('.date').datetimepicker({ 
 
     format: 'dd/MM/yyyy hh:mm', 
 
     language: 'en', 
 
     pick12HourFormat: true // enables the 12-hour format time picker 
 

 
     }); 
 
    </script> 
 

 
    </body> 
 
<html>

+0

es zu benutzen. Ich verlor sogar die Arbeit erste Eingabe Datum Zeit Picker –

+0

ja, ich bekomme es mit Klasse statt ID arbeiten. Vielen Dank –

Verwandte Themen