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个解决方案，两者都与防止keydown事件有关。为此，您可以使用以下任一方法

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

或

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

希望对您有所帮助。

Answer 2

您可以将组件设置为只读，并将ignoreReadonly选项设置为true，然后可以使用keyBinds选项来防止使用Delete键清除日期选择。

如文档所述，keyBinds选项：

允许自定义事件在键盘按下时触发。

实时示例：

$('#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设置键盘输入？

2 个答案: