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

编辑：两个日期时间选择器的示例

<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中，用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>

具有动态镜像字段的Bootstrap Datetimepicker

1 个答案: