ブラウザが<inputtype = 'date'>をサポートしているかどうかはどうすればわかりますか


83

重複の可能性:
HTML5タイプの検出とプラグインの初期化

<input type=date>

(オプションの)ユーザーエージェントが提供するdatepickerを使用して入力を作成する必要がありますが、まだ広くサポートされていないため、jQuery UIDatepickerを使用しています。ブラウザーにそのようなものがない場合にのみ、ブラウザーが独自の日付ピッカーを使用してjQuery UIにフォールバックできるようにするにはどうすればよいですか?

現在、日付ピッカーが組み込まれているのはOperaだけだ​​と思いますが、Operaのテストは明らかに悪いでしょう。この機能を検出する方法はありますか(ポータブルな方法で検出できる場合)?


1
異なるブラウザが異なるレベルの日付をサポートするという事実により、日付サポートの検出は複雑になります。いくつかは素晴らしいカレンダーの日付ピッカーを提供します。他の人はそれが日付のように見えることを検証するだけです。
rjmunro 2012

2
まさに私が質問した理由。日付入力を理解していると主張しているのではなく、ブラウザに日付ピッカーがあるかどうかを知りたいと思いました。これはAFAICTの重複ではなく、以下の回答は役に立ちません。更新やコンテストに取り掛かることはありませんでした。私はちょうど行って<input class=datepicker>、常にjquery ui datepicker(昔ながらの方法)を使用します。
daedalusFall

1
デスクトップブラウザでは、日付入力UIがしばしば何かを残していることに注意する必要があります。彼らがそれをサポートしていても、あなたはそれを使いたくないかもしれません。この問題はモバイルブラウザには影響しないようです。
リッチリマー2016年

回答:


134

以下のメソッドは、一部の入力タイプがほとんどのブラウザでサポートされているかどうかを確認します。

function checkInput(type) {
    var input = document.createElement("input");
    input.setAttribute("type", type);
    return input.type == type;
}

ただし、コメントでsimonoxが言及しているように、一部のブラウザー(Androidストックブラウザーとして)は、(日付として)特定のタイプをサポートしているように見せかけますが、日付入力用のUIを提供していません。そのため、simonoxは、日付フィールドに不正な値を設定するというトリックを使用して実装を改善しました。ブラウザがこの入力をサニタイズすると、日付ピッカーも提供される可能性があります!!!

function checkDateInput() {
    var input = document.createElement('input');
    input.setAttribute('type','date');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}

8
アンドロイド株式のブラウザでは動作しません、それはtrueを返しますが、日付ピッカーをサポートしていない
ビョルン・アンダーソン

33
type属性の要求は、すべてのAndroidストックブラウザーで機能するわけではありません。inputType = dateをサポートしているふりをしますが、日付入力用のUIは提供していません。この機能検出は私のために働きました:function(){var el = document.createElement( 'input')、notADateValue = 'not-a-date'; el.setAttribute( 'type'、 'date'); el.setAttribute( 'value'、notADateValue); return!(el.value === notADateValue); トリックは、日付フィールドに不正な値を設定することです。ブラウザがこの入力をサニタイズする場合、日付ピッカーを提供する可能性もあります。
simonox 2013年

3
'!===' = '!=='のことですか?:)
Matty Balaam 2016

1
@MattyBalaam明らかにそれは構文エラーでした。私はそれを修正しました:)
IonicăBizău2016年

完璧に動作します。このメソッドを簡単に拡張して、他のHTML5タイプを検出できます。
Gusstavv Gil 2016
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.