Question

我正在尝试使用https://github.com/Eonasdan/bootstrap-datetimepicker 并尝试使输入字段为只读，那么即使禁用日期选择器按钮，我也无法打开日期选择器小部件

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

有什么办法可以使该字段为只读字段并仍然访问日期pciker小部件？

Answer 1

要使datetimepicker工作，必须将id设置为输入，而不是父容器。

要使输入为readonly，必须向输入添加属性。不上课。

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

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

在父div中定义的选择器ID
选择器ID
选择器的ID在父div中定义，输入中为readonly属性
选择器的ID，在输入中设置readonly属性

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<script src="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    id in the parent div : <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date'>
                    id in the input :<input type='text' class="form-control"  id='datetimepicker2' />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker3'>
                    id in the parent div, readonly : <input type='text' class="form-control" readonly/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date'>
                    id in the input, readonly :<input type='text' class="form-control"  id='datetimepicker4' readonly/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>        
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
$('#datetimepicker3').datetimepicker();
$('#datetimepicker4').datetimepicker();
            });
        </script>
    </div>
</div>

Answer 2

我找到了解决自己面临的问题的方法。

在datetimepicker选项中设置ignoreReadonly:true可以达到目的（ ignoreReadonly 默认为 false ）

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

谢谢。

具有只读属性的<input />不会打开小部件

2 个答案: