使用bootstrap-datepicker时如何不显示移动键盘？

Question

我尝试设置disableTouchKeyboard选项,但它什么也没做 - 至少在iOS/Safari上.我专门使用的选项是:

$(".datepicker").datepicker({
    autoclose: true,
    disableTouchKeyboard: true,
    format: 'm/d/yyyy',
    startDate: '01/01/1900',
    todayBtn: 'linked',
    todayHighlight: true,
});

任何人都知道最好的方法是什么？

Answer 1

如果您使用的是Bootstrap3 Datepicker:https://eonasdan.github.io/bootstrap-datetimepicker

只需将此属性添加到输入:readonly ="readonly",并将此属性添加
到实例化库时的选项.

$('#datetimepicker1').datetimepicker({
        useCurrent: false,
        daysOfWeekDisabled: [0, 6],
        format: 'DD-MM-YYYY',
        ignoreReadonly: true   <------ this property
});

在Safari iPhone和Chrome/Native浏览器Android上测试.

Answer 2

这就是我完成的方式，但我很想知道是否有更好的方法。

在问题中使用相同的选项，然后我还readonly通过在我的 HTML中执行此操作来制作 HTML 文本框：

@Html.EditorFor(model => model.Date, new { htmlAttributes = new { 
    @class = "form-control datepicker", @readonly = "true",
}})

这似乎有效，因为 JavaScript 仍然可以更改字段的值。但是，它确实使文本框的背景变灰（即，禁用），并将鼠标指针更改not-allowed为不需要的交叉圆圈图标 ( )。为了解决这个问题，我添加了一个内联样式：

@Html.EditorFor(model => model.Date, new { htmlAttributes = new { 
    @class = "form-control datepicker", @readonly = "true",
    style = "cursor: default; background-color: #fff"
}})

我试图覆盖CSS 中的cursor和background-color（使用!important），但这在 Internet Explorer 中似乎不起作用。

这不漂亮，但对我有用。仍然需要看看我如何以更健壮的方式做到这一点（例如，没有对背景颜色进行硬编码，不必在我的所有日​​期字段上指定这一点，等等）。如果有人知道更好的方法，我将不胜感激。