如何在使用 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

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

在问题中使用相同的选项，然后我还在我的 HTML:

中创建了 HTML 文本框 readonly

@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 中似乎不起作用。

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

Answer 2

我have/had有类似的问题。

我使用一个输入字段 type=text，我在其中绑定了一个 jQuery 日期选择器。当我 select 我的手机上的输入字段 (android chrome) 我得到 phone.

的日期选择器和键盘

在搜索 Whosebug 后，我找到了一些关于将输入字段设置为只读或禁用该字段的解决方案。问题是当您禁用该字段时，它将不会被提交，并且当设置为只读时，我的 jQuery 验证器会跳过该字段。所以我需要一个不同的解决方案。

我现在已经通过让日期选择器在打开选择器之前将字段设置为只读并在选择器关闭时删除只读来修复它。到目前为止，我已经在移动设备 android（chrome 和 I.E）上对其进行了测试，但我没有使用本机键盘。 iphone/ipad 尚未测试，但也许其他人可以检查它。

密码是：

$(this).datepicker({
beforeShow: function(input, obj){$(input).prop('readonly', 'readonly');},
onClose: function () {$(this).prop('readonly', false);}});

Answer 3

如果您使用的是 Bootstrap3 日期选择器：
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 / 本机浏览器 Android 上测试。

Answer 4

只需在日期选择器中也添加属性 readonly。

$(".datepicker").datepicker({
    format: "dd-M-yyyy",
    autoclose: true,
    disableTouchKeyboard: true,
    Readonly: true
}).attr("readonly", "readonly");

Answer 5

这是一个老问题，但我想我应该分享我的解决方案，因为这个问题出现在 Google 搜索中。如果您将输入类型设置为按钮，则键盘将不会显示，如果确实需要，您可以将按钮设置为看起来像文本输入字段。

<input type="button" style="background-color:white;border:1px solid #DDD;padding:5px;cursor:text;" value="Enter a Date" id="datepicker">

Answer 6

Javascript 的这个快速块将允许您在日期字段中禁用键盘输入。如果您需要避免虚拟键盘出现在日期选择器中，此代码段很有用。

<script type="text/javascript">
    jQuery(function() {
         jQuery( ".datepicker" ).datepicker({ }).attr('readonly','readonly');
    });
</script>

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

How to not show a mobile keyboard when using bootstrap-datepicker?

asp.net-mvc

datepicker

twitter-bootstrap

asp.net-mvc-5

bootstrap-datepicker