Uncaught Error: datetimepicker component should be placed within a relative positioned container

在使用Bootstrap Datetimepicker时间选择控件时有的时候会出现下面异常：

Uncaught Error: datetimepicker component should be placed within a relative positioned container

这个异常的意思是datetimepicker指定的输入框的外层应该是一个相对定位的标签才可以。

异常情况下的代码：

<div class="form-group">
    <label class="control-label">日期1：</label>
    <input class="form-control date validate[required,date[yyyy-MM-dd]]" name="stirng1" id="stirng1" placeholder="yyyy-MM-dd" />
</div>

//绑定日期控件
$('#stirng1').datetimepicker({
    format: 'YYYY-MM-DD',
    locale: moment.locale('zh-cn'),
    allowInputToggle: true
});

解决方案可以为input的父级添加position:relative

也可以 使用bootstrap的input-group，如下：

<div class="form-group">
    <label class="control-label">日期1：</label>
    <div class="input-group date">
        <input class="form-control  validate[required,date[yyyy-MM-dd]]" name="stirng1" id="stirng1" placeholder="yyyy-MM-dd" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

js绑定同上。

更多使用实例：

Bootstrap3 datetimepicker控件的使用