Bootstrap DateTimePicker с динамическими зеркальными полями

Question

Я использую http://www.malot.fr/bootstrap-datetimepicker/ и у меня есть этот фрагмент:

<div class="input-group date form_datetime"> 
    <input type="text" class="form-control" name="startDateTime" id="startDateTime"> 
    <input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default date-set" type="button"> 
      <i class="fa fa-calendar"></i> 
     </button> 
    </span> 
</div> 

Пожалуйста, обратите внимание, что input[type=text] и input[type=hidden] поля имеют одинаковый id, но последний с _mirror суффиксом

Поскольку у меня есть пара финалистов на странице (то есть также endDateTime и endDateTime_mirror), я не могу использовать «фиксированный» идентификатор поля зеркала, как на демо-странице datetimepicker

EDIT: пример двух datetimepickers

<div class="input-group date form_datetime"> 
    <input type="text" class="form-control" name="startDateTime" id="startDateTime"> 
    <input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default date-set" type="button"> 
      <i class="fa fa-calendar"></i> 
     </button> 
    </span> 
</div> 
<div class="input-group date form_datetime"> 
    <input type="text" class="form-control" name="endDateTime" id="endDateTime"> 
    <input type="hidden" id="endDateTime_mirror" name="endDateTime_mirror"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default date-set" type="button"> 
      <i class="fa fa-calendar"></i> 
     </button> 
    </span> 
</div> 

Я попытался это, но он не работает (даже если имя «генерируется» является правильным, startDateTime_mirror (я могу видеть его в console.log()):

$(".form_datetime").datetimepicker({ 
    autoclose: true, 
    format: "dd MM yyyy hh:ii", 
    linkField: ($(this).find('.form-control').prop('id')) + '_mirror', 
    linkFormat: "yyyy-mm-dd hh:ii" 
}) 

Любая помощь, пожалуйста? Благодаря

Answer 1

Почему бы вам не попробовать положить каждую пару DatePicker в отдельном DIV, который вы бы описать с идентификатором:

<div class="input-group date form_datetime" id="startBlock"> 
    <input type="text" class="form-control" name="startDateTime" id="startDateTime"> 
    <input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default date-set" type="button"> 
      <i class="fa fa-calendar"></i> 
     </button> 
    </span> 
</div> 
<div class="input-group date form_datetime" id="endBlock"> 
    <input type="text" class="form-control" name="endDateTime" id="endDateTime"> 
    <input type="hidden" id="endDateTime_mirror" name="endDateTime_mirror"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default date-set" type="button"> 
      <i class="fa fa-calendar"></i> 
     </button> 
    </span> 
</div> 
<script type="text/javascript"> 
    $("#startBlock").datetimepicker({ 
     format: "dd MM yyyy - hh:ii", 
     linkField: "startDateTime_mirror", 
     linkFormat: "yyyy-mm-dd hh:ii" 
    }); 

    $("#endBlock").datetimepicker({ 
     format: "dd MM yyyy - hh:ii", 
     linkField: "endDateTime_mirror", 
     linkFormat: "yyyy-mm-dd hh:ii" 
    }); 
</script>