2015-11-24 27 views
5

मेरे पास डेट पिकर जोड़ने के लिए कोड है। अच्छा कर रहा है। लेकिन जब मैं एक से अधिक पिकर्स (div) जोड़ने का प्रयास करता हूं। केवल पहला पिकर काम करता है, क्या कोई मुझे बता सकता है कि क्या गलत है। मुझे अपने समय सारिणी में सोलह डेटपिकर्स (इनपुट) जोड़ने की जरूरत है।एकाधिक डेटपिकर्स काम नहीं कर रहे हैं

<!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

आप एक ही आईडी '# datetimepicker' – Raviteja

उत्तर

4

class द्वारा id बदलें, क्योंकि आईडी एक ही दस्तावेज़ में अद्वितीय होना चाहिए:

$('#datetimepicker').datetimepicker({ 

होना चाहिए:

$('.date').datetimepicker({ 

आशा इस मदद करता है।


<!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

उपयोग कर रहे हैं इसे का उपयोग। मैंने काम करने वाले पहले इनपुट डेट टाइम पिकर को भी खो दिया –

+0

हाँ, मैं इसे आईडी के बजाय कक्षा के साथ काम कर रहा हूं। धन्यवाद –

संबंधित मुद्दे