为什么 Chrome 没有在移动设备上显示“input type="date"' 的默认值？答案

【问题标题】：Why does Chrome not show up the default value to 'input type="date"' on mobile?为什么 Chrome 没有在移动设备上显示“input type="date"' 的默认值？
【发布时间】：2018-05-06 09:09:24
【问题描述】：

我只是在制作一个网站供学习建议...
当我在桌面上时，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"...但没有成功...

为什么会这样？
有人可以帮我吗？
提前致谢！

【问题讨论】：

请查看编辑后的答案，它有更多的见解

标签： android html google-chrome date mobile

【解决方案1】：

Android WebKit 4 太混乱了，它需要自己的私有兼容性表来处理某些类型。

尽管<input type="date" > 的实现在各种移动操作系统平台上有所不同，但支持却相当广泛，除了普通的 Android 浏览器。

对于此浏览器和低端设备，将显示一个简单的文本字段。这对于日期输入不是很友好。

当您使用引导程序时，我建议您通过：this

编辑：

我发现了一个有趣的方法来解决这个问题：一个名为 Modernizr 的工具会告诉您用户的浏览器必须提供哪些 HTML、CSS 和 JavaScript 功能。使用它，您可以尝试以下操作，它显示了如何在可用时使用本机日期选择器，并在不支持的浏览器中回退到 jQuery UI 的选择器（在这种情况下：Chrome -> 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();
    }
});

【讨论】：