日期输入在Firefox中不起作用

Question

我有以下日期输入:

<div class="form-group">
    <label for="start_date">Start Date</label>
    <input type="date" class="form-control" name="start_date" id="start_date" placeholder="mm/dd/yyyy">
</div>

如果我在chrome中点击它,会弹出日期选择器:

但是,如果我在firefox中单击它,则不会弹出日期选择器 达:

有谁知道为什么会发生这种情况和/或我如何在Firefox中修复它所以它是一致的？

注意 - 我正在使用bootstrap 3

提前致谢!!

Answer 1

不幸的<input type="date"/>是,Firefox不支持.为了能够在所有浏览器中使用日期类型,您可以使用modernizer进行检查,如果不支持,您可以回退使用javascript来显示datepickerr.

<script>
    $(function(){           
        if (!Modernizr.inputtypes.date) {
            $('input[type=date]').datepicker({
                  dateFormat : 'yy-mm-dd'
                }
             );
        }
    });
</script>

Answer 2

浏览器对此类功能的支持差别很大.目前,Firefox和其他几种浏览器不支持使用此处提到的<input type='date' />元素,如下图所示:

考虑一个基于Javascript的替代方案

您可能会考虑使用基于Javascript的插件(如jQueryUI的DatePicker)来定位该类型的任何元素,并让它以更加跨浏览器友好的方式接管:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(function(){
         // Find any date inputs and override their functionality
         $('input[type="date"]').datepicker();
    });
</script>

此外,您还可以考虑查看Bootstrap特定的插件,例如bootstrap-datepicker,它可以为您提供更一致的外观.