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

Question

我想限制用户只能使用日期时间选择器输入数据。下面是我使用的代码：

<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]
});

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

Answer 1

在输入的按键事件上使用event.preventDefault()：

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

Answer 2

readonly="readonly" 和 disabled="disabled" 都对我不起作用。下线有效；

<input type="text" onkeydown="return false"/>

Answer 3

您可以使用 ignoreReadonly 选项：

Allow date picker show event to fire even when the associated input element has the readonly="readonly" property.

这是一个工作示例：

$('#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>

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

How to restrict user to input data using datetimepicker and disable manual user input?

javascript

jquery

bootstrap-datetimepicker

eonasdan-datetimepicker