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

【问题标题】：How to restrict user to input data using datetimepicker and disable manual user input?如何限制用户使用 datetimepicker 输入数据并禁用手动用户输入？
【发布时间】：2017-09-23 01:21:17
【问题描述】：

我想限制用户只能使用 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 属性，但这会禁用输入和日期时间选择器。有什么方法可以禁用输入字段，但仍允许用户单击日历图标来选择日期？

【问题讨论】：

如果我想将时间 06:00 更改为 w/c -（文本）怎么办？我也在使用 datetimepicker 并且文本框不是只读的，因为用户想要将唯一的时间更改为一些文本，如 w/c。在文本框中，我可以将时间更改为文本，但如果退出该值，则值仍然会更改，因为 timepicker 值

标签： javascript jquery bootstrap-datetimepicker eonasdan-datetimepicker

【解决方案1】：

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

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

【讨论】：

onkeydown="return false" 或 onkeydown="event.preventDefault()" 都为我工作。谢谢你。但是，当输入字段获得焦点时，是否可以打开日历？而不是点击日历图标？
@H.Khan 嗯，当我在 jquery 演示页面上尝试它时，它会打开焦点。你的设置有什么不同吗？焦点是指当你通过 Tab 键聚焦时？
当我尝试它时它没有打开焦点。我正在使用 MVC5 并且对它相当陌生。
I am using this datetimepicker
不客气，汗。 :) 下次，请务必说明所使用的确切版本/库，以确保获得更好、更快的支持。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：