如何避免双重日期选择器出现在谷歌浏览器上

Question

如果没有该类（datepicker），谷歌浏览器会显示datepicker小部件，但不会显示在Firefox中。 所以我添加了这个类，它的脚本和样式。 这在firefox上工作正常，但是两个日期选择器小部件出现在谷歌浏览器上，那个jquery的datepicker小部件不能用作日期格式输入..

以下是我的代码的一部分：

<div class="form-group">
    <label class="control-label col-sm-2">Tanggal lahir :</label> 
        <div class="col-sm-10">
            <input type="date" class="form-control datepicker" name="tglLahir">
        </div>
</div>
<link rel="stylesheet" type="text/css" href="../js/jquery-ui.css">
<script type="text/javascript" src="../js/external/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript">
    $( ".datepicker" ).datepicker();
</script>
</div>

截图：

抱歉英语不好

Answer 1

根据caniuse（http://caniuse.com/#feat=input-datetime），输入类型“日期”不适用于Firefox，这就是为什么在Chrome上您会看到双重日期选择器（第一个来自浏览器中实现的本机选择器，另一个来自jquery datepicker）。

最快的解决方案是将type="date"替换为type="text"

修改 另一个解决方案是在不更改输入类型的情况下添加此CSS规则：

input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator {
   display: none;
}

基本上它会隐藏旋转按钮和选择器指示器，因此，应该无法打开本机日期选择器。

Answer 2

将type="date"更改为type="text"。

这是因为Chrome会自动识别type="date"并自动为您提供本机日期选择器。

您可以这样做或删除datepicker代码，在这种情况下，您将留下<input type="date">，而在firefox中，它不支持本机日期选择器，您将看不到任何内容。