Datepicker duplicate ID

Posted 4 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.

Reply to

Use Markdown with GitHub-flavored code blocks.