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

如果没有这个类（datepicker），google chrome已经显示了datepicker小部件，但在firefox中没有。 所以我添加了这个类，它的脚本和样式。 这在firefox上运行良好，但google chrome上出现了两个datepicker小部件，而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>

唐加尔·拉希尔：
$（“.datepicker”）.datepicker（）；

截图：

抱歉，英语不好

请将

type=“date”

更改为

type=“text”

这是因为chrome自动识别

type=“date”

，并自动为您提供本机日期选择器

您可以这样做，或者删除日期选择器代码，在这种情况下，您将保留

，而在不支持本机日期选择器的firefox中，您将看不到任何内容。

根据caniuse（）的说法，输入类型“date”在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;
}

基本上，它将隐藏旋转按钮和选择器指示器，因此，不可能打开本机日期选择器