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

Question

如果没有该类(datepicker),谷歌浏览器会显示datepicker小部件,但不会显示在Firefox中.所以我添加了这个类,它的脚本和样式.这在firefox上工作得很好,但是两个datepickers小部件出现在google chrome上,那个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;
}

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