Datepicker duplicate ID

Posted 7 months ago by m3enkech

Hi, I would like to create a events scheduler and I want to create multiple datepickers (start-date end-date) with a possibility to have multiple dates for each Event. My code is like this :

              <form role="form" autocomplete="off">
                   <div class="entry input-group">
       <div class='input-group date' id='datetimepicker1'>
           <input type='text' name="date_debut[]" class="form-control" placeholder="Date debut" />
           <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
       </div>         
       <div class='input-group date' name='datetimepicker2'>
           <input type='text' name="date_fin[]" class="form-control" placeholder="Date fin" />
           <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
       </div>  

                       <span class="input-group-btn">
                           <button class="btn btn-success btn-add" type="button">
                               <span class="glyphicon glyphicon-plus"></span>
                           </button>
                       </span>
                   </div>
               </form>

Javascript code :

$(function () {
                $('#datetimepicker1').datetimepicker({
                    locale: 'fr'
                });
            $('#datetimepicker2').datetimepicker({
                    locale: 'fr'
                });
            });

the problem is when I click the plus-btn, new form appears but I can't see the datepicker due to the duplicate ID. Any help with the JS code?

Please sign in or create an account to participate in this conversation.