如何使<input type = 「date」> 支持所有瀏覽器？任何替代品

問題描述

我正在使用 HTML5 元素輸入屬性，只有 Google Chrome 支持日期，時間屬性。我試過 Modernizr，但是我不明白如何將它集成到我的網站上 (關於如何編碼/語法/包含的內容) 。任何關於如何使用日期，時間屬性到所有瀏覽器的代碼片段。

最佳解決方案

任何不支持輸入類型 date 的瀏覽器將默認為標準類型，即 text，因此您只需要檢查類型屬性 (而不是屬性)，如果不是 date，日期輸入不受支持瀏覽器，並添加自己的 datepicker：

if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}

小提琴

你當然可以使用任何你想要的日期戳，jQuery UI 的 datepicker 可能是最常用的，但是如果你沒有使用 UI 庫來做任何其他事情，它會添加相當多的 javascript，但是還有數百個替代的 datepicker 從中選擇。

type 屬性永遠不會更改，瀏覽器將僅返回到屬性的默認 text 類型，因此必須檢查該屬性。該屬性仍然可以用作選擇器，如上例所示。

次佳解決方案

Modernizr 實際上並沒有改變關於如何處理新的 HTML5 輸入類型的任何內容。它是一個功能檢測器，而不是墊片 (除了<header>，<article> 等，它被作為與<div> 類似的塊元件來處理) 。

要使用<input type='date'>，您需要在自己的腳本中檢查 Modernizr.inputtypes.date，如果是錯誤的，請打開另一個提供日期選擇器的插件。你有數以千計的選擇; Modernizr 維護 a non-exhaustive list of polyfills，可能會讓您在某個地方開始。或者，您可以讓它走 – 所有的瀏覽器都回到 text，當他們不能識別的輸入類型，所以最糟糕的是，你的用户必須輸入日期。 (你可能想給他們一個佔位符，或者使用像 jQuery.maskedinput 這樣的東西來保持它們的正常運行。)

第三種解決方案

你要求 Modernizr 的例子，所以在這裏你去。此代碼使用 Modernizr 來檢測是否支持’date’ 輸入類型。如果不支持，那麼它將返回到 JQueryUI datepicker 。

注意：您需要下載 JQueryUI，並且可能會以自己的代碼更改 CSS 和 JS 文件的路徑。

<!DOCTYPE html>
<html>
    <head>
        <title>Modernizer Detect 'date' input type</title>
        <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
        <script type="text/javascript">
            $(function(){
                if(!Modernizr.inputtypes.date) {
                    console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead.");
                    $("#theDate").datepicker();
                }
            });
        </script>
    </head>
    <body>
        <form>
            <input id="theDate" type="date"/>
        </form>
    </body>
</html>

我希望這適合你。

第四種方案

這是一個意見，但我們在 WebShims 取得了巨大的成功。如果 native 不可用，它可以乾淨地使用 jQuery datepicker 。 Demo here

第五種方案

   <script type="text/javascript">
      var datefield=document.createElement("input")
      datefield.setAttribute("type", "date")
      if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
         document.write('<link href="http://googleajax.admincdn.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />n')
        document.write('<script src="http://googleajax.admincdn.com/ajax/libs/jquery/1.4/jquery.min.js"></script>n')
        document.write('<script src="http://googleajax.admincdn.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>n')
      }
   </script>

 <script>
    if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
       jQuery(function($){ //on document.ready
           $('#birthday').datepicker();
       })
    }
 </script>

<body>
 <form>
   <b>Date of birth:</b>
   <input type="date" id="birthday" name="birthday" size="20" />
   <input type="button" value="Submit" name="B1"></p>
 </form>
</body>

SOURCE 1& SOURCE 2