Firefoxおよび/またはIE 10で動作するHTML 5入力type =“ date”を取得する方法

191

input type="date"今回もFirefoxでまだサポートされていないのは奇妙です。実際、私はそれらがinput要素にHTML 5の新しいタイプの多く（もしあれば）を追加したとは思いません。IE10でサポートされていないのも当然です。だから、私の質問は...

IEおよびFirefoxブラウザーのみのカレンダー/日付を取得するために、.jsファイル（つまり、DatePickerウィジェット）を追加せずに要素を機能type="date"させる方法は？FirefoxやIEブラウザでこの機能がデフォルトで機能するようにするために、どこかに適用できる何か（CDNか？）はありますか？IE 8以上のブラウザーとFirefoxをターゲットにすることは問題ではありませんが、最新バージョン（28.0）で問題ありません。inputjQueryUI

更新：Firefox 57以降は入力タイプ=日付をサポートしています

html  forms  jquery-ui  internet-explorer  firefox 
— ソロモン・クロッソン
ソース
29
Firefoxはまだこれをサポートしていないように私にはばかげているようです。今日、ChromeからFirefoxに切り替えました。最近の状況を確認するために、1日/ 1週間だけですが、すぐに元に戻したくなります。
— Codemonkey
19
その冗談FFは日付を
— サポートして
6
これが、Firefoxが最高のブラウザだと人々が言うとき、私は動揺している理由です。
— Martin Braun
1
ポリフィルではありませんが、jqueryやその他の依存関係のないプレーンなjs libであるpickadayを使用してしまいました...
— mb21
2
Firefox 57ではデフォルトで動作しているようです。
— Antoine Pinsard

回答:

138

cdn +で利用可能なwebshimsを試すことができます。必要な場合にのみ、ポリフィルをロードします。

ここにCDNのデモがあります：http : //jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

デフォルトの設定が満足できない場合、それを設定する多くの方法があります。ここに、datepicker configuratorがあります。

注：将来、webshimの新しいバグ修正リリースが存在する可能性があります。メジャーリリースはもうありません。これには、jQuery 3.0またはすべての新機能のサポートが含まれます。

— アレクサンダーファルカス
ソース
これは素晴らしいソリューションで、構成は豊富ですが、「YYYY / MM / DD」のような日付形式を設定する場所が見つかりません
— Pavel Niedoba
14
IE 11でこのjsfiddleを実行しようとすると、「アクセスが拒否されました」というエラーが表示され、日付ピッカーが機能しません。
— Shavais
4
これはIE10では機能しません...私は@Shavaisで言及されているのと同じエラーを受け取ります...それを機能させるには、jqueryのバージョンを1.11以上にアップグレードします。このリンクを
— Nitin
2
残念ながら、作者のサイトで通知されているように、今後のJquery 3に対するwebshimsサポートは行われません。そのため、私は古くて古き良きJquery UIに依存します。
— marionmaiden
1
これは間違いなくFirefoxで動作します。しかしIEでは機能しませんでした
— Varuni NR 2016
27

バージョン51（2017年1月26日）以降、Firefoxに含まれていますが、デフォルトではまだアクティブ化されていません。

それをアクティブにするには：

about：config

dom.forms.datetime- > trueに設定

https://developer.mozilla.org/en-US/Firefox/Experimental_features

— ジョナサン・ヴァナス
ソース
これを聞いてうれしい。デフォルトではimoでなければなりません。しかし、これは知っておくと役に立ちます。
— ソロモンクロッソン2017
私はFF 64.0.2を使用していますが、このオプションが "true"（オン）であっても機能しませんが、日時ボックスはテキストのみです。「timepicker」を有効にしようとしましたが、成功しませんでした。
— Wasted_Coder
20

jQueryが提供するdatePickerコンポーネントを使用して、この制限を取り除く簡単な方法があります。

  1. jQueryとjQuery UIライブラリを含める（まだ古いライブラリを使用しています）

    • src = "js / jquery-1.7.2.js"
    • src = "js / jquery-ui-1.7.2.js"

  2. 次の切り取りを使用 

    $(function() {
     $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
});

jQuery UI DatePicker-必要に応じて日付形式を変更するを参照してください。

— ダックス
ソース
8
OPは「.jsファイル（つまりjQueryUI DatePicker Widget）を追加せずに機能する」と述べていますが、この質問はGoogleのトップヒットであるため、質問の答えはありませんが、あなたの答えは確かに非常に役に立ちます。今あなたの投稿に賛成票を投じるのに気分を害する必要がなかったといいのですが。
— phil294 2015
2
カレンダーを適切に表示するには、jQuery UI CSSも含める必要があります。<br> <link rel = "stylesheet" href = "// code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
— YuAn ShaolinMaculelêLai
16

type = "date"は、現時点では実際の仕様ではありません。これはGoogleが考案した概念であり、whatwg仕様（公式ではありません）にあり、Chromeで部分的にのみサポートされています。

http://caniuse.com/#search=date

この時点では、この入力タイプに依存しません。あるといいのですが、これが実際に作られるとは思いません。一番の理由は、ブラウザに負担がかかりすぎて、やや複雑な入力に最適なUIを決定できないためです。レスポンシブな観点から考えてみてください。400ピクセル、800ピクセル、1200ピクセル幅のUIで最も効果的に機能するものをベンダーが知るにはどうすればよいでしょうか。

— クリス・ラブ
ソース
138
私は同意しません、ブラウザはこれを理解するのに十分スマートでなければなりません。私はそこにある日付ピッカーを使用していて、それらを更新し続けなければならないことに本当に疲れています。
— SuperUberDuper 2014
49
奇妙な推論。ブラウザにとっては負担が大きすぎますが、ジョーのWeb開発者にとってはそうではありませんか？！？
— jeroenh 2015年
35
これは、今、HTML 5ワーキングドラフトの一部です：w3.org/html/wg/drafts/html/master/...
— クリス・
7
私もすべての新しい入力タイプを喜んでいます。それらはよりよく定義され、ネイティブであり、通常は高速を意味します。
— トマーシュZato -復活モニカ
5
@MMありがとう。その間、HTML 5は公式のW3C勧告にアップグレードされました。新しいリンクがあるw3.org/TR/2014/REC-html5-20141028/...
— クリス
9

YYYY-MM-DDでフォーマットされた日付の完全な例を次に示します

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />
— だらだら
ソース
1
これがタイムピッカーを追加するオプションも許可するかどうか誰かが知っていますか？
— drooh
JSFiddle @Droohでスクリプトを試しましたが、機能しません。日付を選択するたびに、入力フィールドにミリ秒程度表示されてから消えます。誰かが日付設定dd / mm / yyyyを使用して動作するフィドルバージョンを提供できますか？
— Ryan Coolwebs 2015
2016年8月現在、webshimはjQuery 3では機能せず、私のテストでは2.2.4でも機能しません。
— drooh
Firefoxは、日付入力追加するまで、これが最善の解決策であることが私を見つけたstackoverflow.com/questions/2528706/...
— drooh
4

これではdatepicker uiを取得できませんが、Mozillaではパターンを使用できるため、少なくとも次のようなもので日付の検証を取得できます。

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

最終的に、Mozillaがこれをネイティブに組み込むのにかなり遅れているという点で、@ SuperUberDuperに同意します。

— ajax1515
ソース
1
「時間」のバージョンはありますか？
— マルコムサルバドール
1
この例を拡張してください。これは入力のhtml属性ですか？
— Wasted_Coder
3

これは、Daxの回答に続く提案にすぎません。（私はその答えでそれをコメントに入れますが、他の質問にコメントするのに十分な評判はまだありません）。

IDはフィールドごとに一意である必要があるため、フォームに複数の日付フィールドがある場合は、IDの代わりにクラス要素を使用できます。

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

そしてあなたの入力は：

 <input type="text" class="datepicker" name="your-name" />

これで、日付ピッカーが必要になるたびに、そのクラスを追加するだけです。PS私は知っています、あなたはまだjs :(を使用する必要がありますが、少なくともあなたはあなたのすべてのサイトに設定されています。私の2セント...

— コーデックス
ソース
3

2017年11月14日にリリースされたFirefox 57（Quantum）の最新バージョンは、日付およびその他の機能をサポートしています。このリンクをクリックしてダウンロードできます。

— イルファンダー
ソース
0

アレクサンダーに感謝、私はen langのフォーマットを変更する方法を見つけました。（どの言語がこのような形式を使用しているかはわかりませんでした）

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');
— パベル・ニードバ
ソース
そのフォーマットを使用している唯一の「en」国はカナダだと思います。いずれにせよ、 'en'はあいまいです。これには米国も含まれるため、ほとんど独自の "特別な"日付形式が使用されるためです。
— Michael Scheper
私の場合は、クライアントワークステーションでは異なる可能性がある、クライアントロケールの日付形式を上書きすることです。ただし、1つの特定のページでは、この日付形式を使用したいと考えています（コピーと貼り付けのため）。アレクサンダーファルカスの回答に対するコメントのようなものですが、コメントにコードを貼り付けることができないため、別の回答として記載しました。これを1年以上本番環境で使用しています。
— Pavel Niedoba 2016年
注意してください。Webshimsがブラウザのロケールの解釈に依存している場合、予期しない結果になる可能性があります。'en'は、異なるプラットフォーム（システムロケールに依存）でも、異なるブラウザーでも、同じ形式を意味しない場合があります。カナダのブラウザでは「en-ca」（yyyy-mm-ddである可能性が高いが、一貫性がない可能性があります）と解釈されますが、インドのブラウザでは「en-in」と解釈されます（世界のほとんどの地域と同様）。 、dd-mm-yyyyを生成します）。量産コードにあるからといって、適切にテストされているわけではありません。大規模なサイトであっても、量産コードには多くのi18nバグが存在します。
— Michael Scheper 16年
最後の行$ .webshims.activeLang（ 'en'）; lang（またはロケール）がブラウザ設定をオーバーライドするwebshimsに強制されるため、形式は常に同じです。
— Pavel Niedoba 2016年
0

以下の理由により、プロジェクトでDatepicker http://jqueryui.com/datepicker/を使用したくない場合があります。

  • あなたはjqueryを使いたくない
  • プロジェクト内のjqueryバージョンの競合
  • 年の選択は便利ではありません。たとえば、10年前に移動するには、[前へ]ボタンを120回クリックする必要があります。

日付入力のための非常に単純なクロスブラウザーコードを参照してください。私のコードは、ブラウザーが日付タイプの入力をサポートしていない場合にのみ適用されます

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>
スニペットを展開

— アンドレイジ
ソース
3
このコードは完全に失敗します。フィールドに "YYY-MM-DD"が既に入力されているため、日付を入力できません。日付をクリアしようとすると、フィールドが再び表示されます。
— スティーブンR
ハイフンは削除しないでください。Windows 10、Google Chrome 52、Firefox 41、Opera 39、Microsoft Edge、IE 11でのテストに成功しました。お使いのデバイス、OS、ブラウザを教えてください。
— Andrej
実際には、コメントのすぐ下にある「コードスニペットの実行」リンクをクリックしています。「YYYY-MM-DD」プレースホルダーは、入力を開始すると消えるのではなく、積極的に競合しているため、日付を正しく入力できません。Windows 10で最新のFirefoxを使用しています
— Stephen R
1
外部JSファイルを追加しないという条件に違反しているため、質問には答えません。実際、コード自体は完全に直感的に使用できません。ネイティブの日付形式ではない場合でもISO形式を強制します。定型入力が再表示されるため、新しい日付を入力できません。定型入力をマスクとしてではなく、ボックス内の実際のテキストとして上書きすることはできません。入力します。とにかく正規表現検証の標準入力よりも優れていません
— MikeT
-1

bootstrap-datepickerFirefox 55 Portableでカレンダーを機能させるには、プラグインを使用する必要がありました。

https://bootstrap-datepicker.readthedocs.io/en/latest/

Bootstrap v2およびv3と互換性があります。スタンドアロンのスタイルシートが付属しているため、Bootstrapに依存する必要はありません。

使用法：

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});
— サンティアゴはSOをやめる
ソース
-2 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
— ワイザー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.