如何限制用户使用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属性，但这会禁用input和datetimepicker。有什么方法可以禁用输入字段，但仍然允许用户点击日历图标来选择日期？

Answer 1

您可以使用以下ignoreReadonly选项：

  

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

这是一份工作样本：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我现在能想到的唯一方法是在输入上的keydown事件上使用event.preventDefault()：

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

Answer 3

readonly =“readonly”＆amp; disabled =“disabled”对我没用。 下线工作;

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