web-dev-qa-db-ja.com

HTML5の日付ピッカーがSafariに表示されない

以前にjQueryの日付ピッカーを使用していたので、Webサイトのフォームの日付フィールドの一部をHTML5の日付ピッカーに変換しました。

ドキュメントでは、Safariがサポートされていると書かれていますが、現在はテキストフィールドのみが表示されています（Chromeおよびその他のブラウザーは日付ピッカーを正しく表示します）。

echo "<input type='date' name='Date' min='$todaymin'>";

（min属性なしで適用されるものと同じ）

これは私のコード行です-何か間違ったことをしているのですか、それともドキュメントを間違って読んでいるだけで、Safariではサポートされていませんか？

ありがとうございました！

html5safari
25
Will WP

Safariには、デスクトップバージョン用のネイティブな日付ピッカーが含まれていません（iOSには含まれています）。ちなみに、IEも同様です。開発者の時間を大幅に節約できるため、非常にイライラします。

これは、サポートの追跡に役立つリンクです。 http://caniuse.com/#feat=input-datetime

42
kevin

http://www.javascriptkit.com/javatutors/createelementcheck2.shtml から取得

JQueryおよびjQuery UIを使用すると、ブラウザーがネイティブでサポートしていない場合にのみポップアップするクロスブラウザーの日付ピッカーを作成できます。プロジェクトにすでにjQueryがある場合は、次を実行します。

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://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"><\/script>\n') 
}        
if (datefield.type != "date"){ //if browser doesn't support input type="date", initialize date picker widget:
    $(document).ready(function() {
        $('#your-date').datepicker();
    }); 
}
6
drjorgepolanco

Safari（またはIE）にはネイティブの日付ピッカーはありませんが、かなり良い回避策は、日付入力にplaceholder属性を追加することです。これは、SafariとIEフォールバックテキスト入力をフォーマットするユーザー（yyyy-mm-dd）を通知します。

プレースホルダーはtype="date"をサポートするブラウザーでは表示されないため、この回避策は他のブラウザーに影響しません。

例えば<input type="date" placeholder="yyyy-mm-dd" />

2
Finlay Percy