<input type =“ date”>をすべてのブラウザでサポートするにはどうすればよいですか？代替案はありますか？

83

HTML5要素の入力属性を使用していますが、日付と時刻の属性をサポートしているのはGoogleChromeのみです。Modernizrを試しましたが、Webサイトに統合する方法（コーディング方法/構文/インクルード）がわかりません。すべてのブラウザの日付、時刻属性を操作する方法に関するコードスニペット。

javascript  jquery  html  jquery-ui 
— leonardeveloper
ソース
Datepickerを使用しているのはどのようなコントロールですか？多分JQueryUIは完璧でしょう？
— Sebastien 2013
10
日付入力をシムするためだけに巨大な重みを含めて、jQueryUIにまだ依存していない場合は、デフォルトの決定ではないことに注意してください。
— jfmatt 2013
完全な例はhtml5doctor.com/
— koppor

回答:

116

入力タイプdateをサポートしないブラウザは、デフォルトで標準タイプになります。つまりtext、必要なのは、タイププロパティ （属性ではない）を確認することdateだけです。サポートされていない場合、日付入力はブラウザでサポートされていません。そして、あなたはあなた自身の日付ピッカーを追加します：

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

フィドル

もちろん、任意の日付ピッカーを使用できます。jQueryUIの日付ピッカーがおそらく最も一般的に使用されますが、UIライブラリを他の目的で使用していない場合は、かなりのjavascriptが追加されますが、代替の日付ピッカーは数百あります。から選択します。

type属性は決してブラウザはデフォルトにフォールバックします、変化しないtext1は、プロパティをチェックしなければならないので、プロパティのタイプ。
上記の例のように、属性は引き続きセレクターとして使用できます。

— アデネオ
ソース
1
DOMにドロップダウンするよりも、jQueryを使用してプロパティをチェックする方が良いでしょうか？$('input').prop('type') != 'date'
— IMSoP 2013
9
DOMの方が速いですよね？
— reaper_unique 2013
6
「日付」がサポートされていない場合、入力の「タイプ」は「テキスト」に変更されますが、属性「タイプ」は「日付」のままです。したがって、これはセレクターとして簡単に使用できます。私はこのようにフィドルを更新しました：jsfiddle.net/2AaFk/34
— Michael Wyraz 2014
2
@MichaelWyraz私があなたのフィドルをチェックしたとき、それはサファリブラウザでは機能していないようです。
— リシャブセス2016
1
これは私にとってはうまくいきました、私が必要なcssを持っていないことに注意してください、そして私はこのスレッドでそれを見つけました： stackoverflow.com/a/29791769/1339326 <link rel = "stylesheet" href = "// code.jquery.com /ui/1.11.2/themes/smoothness/jquery-ui.css ">
— magorich 2018
14

Modernizrは、新しいHTML5入力タイプの処理方法について実際には何も変更しません。これは特徴検出器であり、シムではありません（、、などを除いて<header>、<article>シムは同様のブロック要素として処理されます<div>）。

を使用<input type='date'>するにModernizr.inputtypes.dateは、独自のスクリプトをチェックインする必要があります。それがfalseの場合は、日付セレクターを提供する別のプラグインをオンにします。何千もの選択肢があります。Modernizrは、どこかから始めることができる可能性のあるポリフィルの網羅的でないリストを維持しています。または、そのまま放すこともできます。すべてのブラウザtextは、認識できない入力タイプが表示されたときにフォールバックするため、発生する可能性のある最悪の事態は、ユーザーが日付を入力する必要があることです。（プレースホルダーを指定するか、jQuery.maskedinputなどを使用してトラックを維持することをお勧めします。）

— jfmatt
ソース
11

あなたはModernizrの例を求めたので、ここに行きます。このコードは、Modernizrを使用して、「日付」入力タイプがサポートされているかどうかを検出します。サポートされていない場合は、JQueryUIdatepickerにフェールバックします。

注：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>

これがあなたのために働くことを願っています。

— ティムS
ソース
注Modernizr 3のために、あなたが使用して設定を生成する必要があることmodernizr.com/download?inputtypes-setclassesをで説明したようにJavaScriptをコンパイルmodernizr.com/docs/#downloading-modernizr
— koppor
7 
   <script>
      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.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
         document.write('<script src="http://ajax.googleapis.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();
       }); <- missing semicolon
    }
 </script>


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

ソース1 とソース2

— リタブラタゴータム
ソース
2

Chromeバージョン50.0.2661.87mは、変数に割り当てられている場合、mm-dd-yy形式をサポートしていません。yy-mm-ddを使用します。IEとFirefoxは期待どおりに動作します。

— ケルビン
ソース
2

私が見つけた最も簡単で実用的な解決策は、次のブラウザで作業することです

  1. グーグルクローム
  2. Firefox
  3. マイクロソフトエッジ

  4. サファリ

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h2>Poly Filler Script for Date/Time</h2>
<form method="post" action="">
    <input type="date" />
    <br/><br/>
    <input type="time" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {type: 'date'});
  webshims.setOptions('forms-ext', {type: 'time'});
  webshims.polyfill('forms forms-ext');
</script>

</body>
</html>
— カシフ・ラティフ
ソース
0

私はこれに問題があり、英国のdd / mm / yyyy形式を維持していました。最初は、adeneo https://stackoverflow.com/a/18021130/243905からの回答を使用しましたが、サファリでは機能しなかったため、これに変更しました。私が知る限り、これはすべての場所で機能します-jquery-ui datepicker、jquery検証を使用します。

if ($('[type="date"]').prop('type') !== 'date') {
    //for reloading/displaying the ISO format back into input again
    var val = $('[type="date"]').each(function () {
        var val = $(this).val();
        if (val !== undefined && val.indexOf('-') > 0) {
            var arr = val.split('-');
            $(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
        }
    });

    //add in the datepicker
    $('[type="date"]').datepicker(datapickeroptions);

    //stops the invalid date when validated in safari
    jQuery.validator.methods["date"] = function (value, element) {
        var shortDateFormat = "dd/mm/yy";
        var res = true;
        try {
            $.datepicker.parseDate(shortDateFormat, value);
        } catch (error) {
            res = false;
        }
        return res;
    }
}
— nat
ソース
0 
<html>
<head>
<title>Date picker works for all browsers(IE, Firefox, Chrome)</title>
<script>
    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.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.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
            $('#start_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
            $('#end_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
        })
    }
</script>
</head>
<body>
    <input name="start_date" id="start_date" type="date" required>
    <input name="end_date" id="end_date" required>
</body>
</html>
— アモルシルデ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.