如何限制用户使用 datetimepicker 输入数据并禁用手动用户输入？

Question

我想限制用户只能使用 datetimepicker 输入数据。下面是我正在使用的代码：

<div class="form-group">
    <label>Start</label>
    <div class="input-group date" id="dtp1">
        <input type="text" id="txtStart" class="form-control" readonly="readonly"/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

$('#dtp1').datetimepicker({
    format: 'DD/MM/YYYY HH:mm A',
    daysOfWeekDisabled: [0, 6]
});

我曾尝试使用 readonly 属性，但这会同时禁用输入和日期时间选择器。有什么方法可以禁用输入字段但仍允许用户单击日历图标来选择日期？

Answer 1

event.preventDefault()在输入上使用on keydown 事件：

<input type="text" id="txtStart" class="form-control" onkeydown="event.preventDefault()">

Answer 2

您可以使用以下ignoreReadonly选项：

即使关联的输入元素具有该readonly="readonly"属性，也允许触发日期选择器显示事件。

这是一个工作示例：

$('#dtp1').datetimepicker({
    format: 'DD/MM/YYYY HH:mm A',
    daysOfWeekDisabled: [0, 6],
    ignoreReadonly: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
    <label>Start</label>
    <div class="input-group date" id="dtp1">
        <input type="text" id="txtStart" class="form-control" readonly="readonly"/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>