web-dev-qa-db-ja.com

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

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

javascriptjqueryhtmlhtml5jquery-ui
69
leonardeveloper

入力タイプdateをサポートしないブラウザーは、デフォルトで標準タイプtextになります。そのため、タイプproperty（属性ではない）、それがdateでない場合、日付入力はブラウザでサポートされず、独自の日付を追加します日付ピッカー：

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

FIDDLE

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

type属性は変更されず、ブラウザはプロパティのデフォルトのtextタイプにのみフォールバックするため、プロパティを確認する必要があります。
上記の例のように、属性は引き続きセレクターとして使用できます。

100
adeneo

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

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

13
jfmatt

Modernizrの例を要求したので、ここに行きます。このコードは、Modernizrを使用して、「日付」入力タイプがサポートされているかどうかを検出します。サポートされていない場合、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>

これがお役に立てば幸いです。

8
Tim S

これはちょっとした意見ですが、 WebShims で大成功を収めました。ネイティブが利用できない場合は、jQuery datepickerを使用してきれいに減衰できます。 デモはこちら

6
Antti Haapala
   <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>

SOURCE 1＆SOURCE 2

5
Ritabrata Gautam

<script src="modernizr.js"></script>セクションで<head>を使用するだけで、スクリプトは2つのケースを分離するのに役立つクラスを追加します：現在のブラウザーでサポートされているかどうか。

さらに、このスレッドに投稿されたリンクに従ってください。 HTML5入力タイプの日付、色、FirefoxおよびInternet Explorerでの範囲サポート

3
Rápli András

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

2
Kelvin

私が見つけた最も簡単で実用的なソリューションは、次のブラウザに取り組んでいる

  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>
1
Kashif Latif
<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>
0
Amol Shirude

私はこれに問題があり、英国の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;
    }
}
0
nat

Two-Script-Include-Solution（2019）：

Better-DomとBetter-スクリプトセクションのDateinput-Polyfill。

デモは次のとおりです。
http://chemerisuk.github.io/better-dateinput-polyfill/

0
Bijan