Question

我只是建立一个研究提议的网站...
当我在桌面上时，input type="date"显示默认值，字母为dd / mm / aaaa ...
on desktop

但是当我使用我的手机（Android）时，input type="date"会显示一个空字段...
on mobile Android

代码是（我正在使用Bootstrap 3）：

...
<div>
  <input type="date" class="form-control" id="data" name="data" style="width:65%;" required>
</div>
...

我也试过了placeholder="dd/mm/aaaa" ......但没有成功......

为什么会发生这种情况？有人可以帮帮我吗？提前谢谢！

Answer 1

Android WebKit 4是如此混乱，它需要一些类型的私有兼容表。

虽然<input type="date" >的实现在各种移动操作系统平台上有所不同，但支持非常普遍，除了Android浏览器之外。

对于此浏览器和低端设备，将显示简单的文本字段。这对于日期输入来说不是非常用户友好。

当您使用bootstrap时，我建议通过：this

编辑：

我找到了解决此问题的有趣方法：名为Modernizr的工具会告诉您用户浏览器必须提供的HTML，CSS和JavaScript功能。使用它可以尝试以下内容，它显示了如何在可用时使用本机日期选择器，并在不支持的浏览器中回退到jQuery UI的选择器（在这种情况下：Chrome - ＆gt; Android Webkit）。

if (!Modernizr.inputtypes.date) {
    $('input[type=date]').datepicker({
        // Consistent format with the HTML5 picker
        dateFormat: 'yy-mm-dd'
    });
}

您的完整代码如下所示：

HTML：

<input type="date">

<br><br>

<input type="text" id="myDate" />

JAVASCRIPT：

$(function() {
    if (!Modernizr.inputtypes['date']) {
        $('input[type=date]').datepicker();
    }
});

为什么Chrome没有在移动设备上显示“输入类型=”日期“'的默认值？

1 个答案: