Javascript <；输入>；具有只读属性的窗口小部件无法打开

我正在尝试使用 试图使输入字段为只读，然后即使日期选择器按钮被禁用，我也无法打开日期选择器小部件

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control readonly" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

$（函数（）{
$（'#datetimepicker1'）。datetimepicker（）；
});

---

是否有任何方法可以使字段只读并仍然访问date pciker小部件？

要使

日期时间选择器工作，您必须将id设置为输入，而不是父容器

要使您的输入成为只读的，您必须在输入中添加一个属性。不是一门课

<input type='text' class="form-control"  id='datetimepicker1' readonly/>



编辑：我更新了下面的代码片段，以便您可以看到4种不同的行为：


父div中定义的选择器id
输入中定义的选择器id
在输入中的父div、readonly属性中定义的选择器id
输入中定义的选择器id，输入中的只读属性



父div中的id:
输入中的id：
父div中的id，只读：
输入中的id，只读：
$（函数（）{
$（'#datetimepicker1'）。datetimepicker（）；
$（'#datetimepicker2'）。datetimepicker（）；
$（'#datetimepicker3'）。datetimepicker（）；
$（'#datetimepicker4'）。datetimepicker（）；
});
我找到了解决我所面临问题的方法

在datetimepicker的选项中设置
ignoreReadonly:true
成功了（ignoreReadonly默认值为false）

使用HTML标记中的只读属性将输入字段设置为只读，并使用上述选项启用日期选择器按钮

谢谢。
如果希望用户能够选择值，为什么要将其设置为只读？这没有什么意义。我想让用户可以使用datepicker选择日期，而不是在输入中选择日期后手动编辑输入字段。日期选择器的可能副本正在工作，无论我在父div或输入字段中输入id=“datetimepicker1”。我的问题是，一旦我将输入设为只读，日期选择器就不会works@Suvojit在我的回答中使用更新后的代码段，根据设置id的位置以及是否设置只读属性，查看不同的行为。