如何在 Datetimepicker 的默认设置中为 Datetimepicker 设置无键盘输入？

Question

如何在默认设置中为 Datetimepicker 设置无键盘输入？

datetimepicker : {
     icons: {
         time: "fa fa-clock-o",
         date: "fa fa-calendar",
         up: "fa fa-arrow-up",
         down: "fa fa-arrow-down",
         today: "fa fa-camera"
     },
     format : "MMM DD, YYYY HH:mm"
},

这是我的日期时间选择器的默认设置，我想禁用键盘输入。

注意：我设置为只读，但是删除键有响应。

Answer 1

有 2 个解决方案，都与防止按键事件有关。为此，您可以使用以下方法之一

<input onkeydown="return false" ... />

或

$("#yourInput").keydown(function (event) {
            event.preventDefault();
        });

希望对你有所帮助

Answer 2

您可以将您的组件设置为只读并设置 ignoreReadonly option to true, then you can use keyBinds 选项以防止删除键清除日期选择。

正如文档所说，keyBinds 选项：

Allows for custom events to fire on keyboard press.

实例：

$('#datetimepicker1').datetimepicker({
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down",
        today: "fa fa-camera"
    },
    format : "MMM DD, YYYY HH:mm",
    ignoreReadonly: true,
    keyBinds: {
        'delete': function () {
            return false;
        }
    }
});

<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"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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.22.2/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='col-sm-12'>
  <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>

如何在 Datetimepicker 的默认设置中为 Datetimepicker 设置无键盘输入？

How do I set no keyboard input for Datetimepicker in default settings for Datetimepicker?

bootstrap-datetimepicker

eonasdan-datetimepicker