Bootstrap Datetimepicker with dynamic mirror fields

Question

I'm using http://www.malot.fr/bootstrap-datetimepicker/ and I have this snippet:

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

Please notice that the input[type=text] and the input[type=hidden] fields have the same id , but the latter with a _mirror suffix

Since I have a couple of datepickers in a page (ie also endDateTime and endDateTime_mirror ), I can't use a 'fixed' mirror field id as in datetimepicker's demo page

EDIT: an example of two 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>

I tried this, but it doesn't work (even if the 'generated' name is right, startDateTime_mirror (I can see it in 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"
})

Any help, please? Thanks

Answer 1

Why don't you try to put each couple of datepicker in a separate div that you would describe with an 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>