引導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的演示頁面中使用「固定」鏡像字段ID

編輯：二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

你爲什麼不嘗試放在一個單獨的DIV每對夫婦的日期選擇器，你會用一個id描述：

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