Multiple JQuery Datepicker with hidden input

Question

I'm using a variable number of datepicker on my page.

Every datepicker must be always visible and I don't want to display the input field.

foreach ($array as $k =>$z) {
  echo "<div id='datepicker".$k."'></div>
        <input name='dates[]' id='datepicker_input".$k."' type='hidden' >";
}   

javascript

<script>
$(document).ready(function() {
 <?php
      foreach ($array as $k => $z) {
          echo "$('#datepicker".$k."').datetimepicker({      
              format:'d.m.Y H:i',
              inline:true,
              lang:'en'
          });";
      }
 ?>
});
</script>

My Goal is to send all the dates using a form, so that when I click to my submit button I can retrieve every dates from _POST. Unfortunately, the dates array I retrieve contains empty arrays.

I dont know how to bind the datepicker inline with my hidden fields... I need to update the hidden input fields with the selected values.

Maybe I'll have to use JSON, but I'm not sure of what to do.

Thanks

Answer 1

Check this fiddle: http://jsfiddle.net/pms2juab/3/

HTML:

<input name='dates[]' id='datepicker1' class="datepicker" type='hidden' />
<input name='dates[]' id='datepicker2' class="datepicker" type='hidden' />
<input name='dates[]' id='datepicker3' class="datepicker" type='hidden' />
<input name='dates[]' id='datepicker4' class="datepicker" type='hidden' />
<input name='dates[]' id='datepicker5' class="datepicker" type='hidden' />

JS:

$(function(){
   $('.datepicker').each(function(i,k){
   $(this).datetimepicker({      
              format:'d.m.Y H:i',
              inline:true,
              lang:'en'
          });
   });
});

Answer 2

This worked

<script>
$(document).ready(function() {
 <?php
      foreach ($array as $k => $z) {
          echo "$('#datepicker".$k."').datetimepicker({      
              format:'d.m.Y H:i',
              inline:true,
              lang:'en'
          });

             $('#datepicker_input".$k."').change(function(){
                $('#datepicker".$k."').datepicker('setDate', $(this).val());
             });
             $('#datepicker".$k."').change(function(){
                $('#datepicker_input".$k."').attr('value',$(this).val());
             });
      }
 ?>
});
</script>