Bootstrap日历在第二次点击而不是第一次点击时打开

Question

我的页面上有多个动态日历

在编写动态代码时，如下面的一个所示的多个日历已呈现

<div class="input-group date dvPeriodDate" id="cal101" style="width: 150px;"> <input type="text" onkeypress="return isNumberKey(event)" maxlength="10" width="100" class="form-control bootstrap-datetimepicker-widget" value="01/01/2004" id="txtPeriodDate101" name="txtPeriodDate">  <div class="input-group-addon btn btn-default" onclick="GetContent(101)" id="transDateIcon101"><i class="fa fa-calendar"></i> </div> </div>

用于初始化document.ready（）上所有日历的jQuery代码

 $('.dvPeriodDate').datetimepicker({
        format: 'MM/DD/YYYY',
        toolbarPlacement: 'bottom',
        showClose: true,
        showTodayButton: true,
        keepInvalid: true,
        keyBinds: {
            up: null,
            down: function (widget) {
                if (!widget) {
                    this.show();
                    return;
                }
            },
            left: null,
            right: null,
            t: null,
            'delete': null
        }
    });

日历在第二次单击日历图标时打开，有人可以指导我如何在第一次单击时打开它