2014-02-05 44 views
9

隨着HTML5出現了一組新的輸入類型。其中之一是date,在Chrome中,此輸入會生成一個很好的本機日期選擇器,如下所示。Chrome上的本地日期選擇器和IE/Firefox的後備版本

Datepicker

它還提供了有關這是使用新的輸入型我的主要支撐點移動設備上的本地日期選擇器。

但是,在Firefox(23.0.1)和IE(10)上,本機日期選取器未出現,輸入被視爲正常文本輸入。在這種情況下,我想回到Javascript日期選擇器。

此網站用於運行AngularJS和當前的datepicker插件是bootstrap-datepicker。如果瀏覽器支持本機日期選擇器,那麼禁用此插件最簡單的方法是什麼?我是否需要檢查瀏覽器是否支持date輸入類型並在這種情況下禁用插件?

+2

[How to make 在所有瀏覽器上支持的可能重複?任何替代品?](http://stackoverflow.com/questions/18020950/how-to-make-input-type-date-supported-on-all-browsers-any-alternatives) – qwertynl

回答

9

你可以做一個HTML5功能檢查,像這樣:

// Determine if this browser supports the date input type. 
var dateSupported = (function() { 
    var el = document.createElement('input'), 
     invalidVal = 'foo'; // Any value that is not a date 
    el.setAttribute('type','date'); 
    el.setAttribute('value', invalidVal); 
    // A supported browser will modify this if it is a true date field 
    return el.value !== invalidVal; 
}()); 

那麼只有初始化引導日期選擇器,如果!dateSupported

+0

太棒了。我怎樣才能刪除這個創建的元素思想?我在最後說'var isSupported = el.value!== invalidVal; document.removeChild(EL);返回isSupported;'。因此,cahcing的結果,並嘗試刪除,但這會導致'NotFoundError:未找到節點'。我想刪除它,因爲它不再需要,加上引導程序的日期選擇器彈出對齊到這個幻象元素,而不是真正的選擇器。 –

+0

好的,現在我說'delete el;',所以選擇器不會爲幻像元素彈出。 –

+0

好的想法,但這個答案將解釋爲什麼這是不必要的。 http://stackoverflow.com/questions/1847220/javascript-document-createelement-delete-domelement – Scottux

1

我做了這樣的功能檢查。它包括檢查是否需要選取器。

if (
    $('input[type="date"]').length 
    && $('input[type="date"]').get(0).type == "date") { 

    // Load Fallback Date Picker 
} 
相關問題