web-dev-qa-db-ja.com

HTML 5入力タイプ=「日付」がFirefoxで機能しない

HTML5を使用しています<input type="date" />、Chromeで正常に動作し、日付を選択するためのカレンダーポップアップが表示されます。

しかし、firefoxではテキストボックスのように機能し、カレンダーはポップアップしません。

いくつかの調査を行った後、webshims、modenizrなどを使用したソリューションはほとんどありませんが、jQueryは使用したくありません。

これに代わるものはありますか？ Firefoxで動作させるにはどうすればよいですか？

javascripthtmlhtml5firefoxfeature-detection
16
Aditi

[〜＃〜] edit [〜＃〜]：Firefox 57から、<input type="date"/>は 部分的にサポート です。

Firefox HTML5の<input type="date"/> まだ。

次の2つのオプションがあります。

  • 常にJavascript日時ピッカーを使用するか、または
  • ブラウザがそのタグをサポートしているかどうかを確認し、はいの場合は使用し、いいえの場合はJavaScriptの日付ピッカー（jQueryまたはその他）でフォールバックします。

これは Feature Detection と呼ばれ、 Modernizr はこのための最も人気のあるライブラリです。

常にjavascriptのdatepickerを使用する方が簡単で高速ですが、javascriptを無効にした場合（気になる人）は動作しません。

代わりにハイブリッドアプローチを使用すると、標準化された方法で、JavaScriptをまったく必要とせずに、すべてのブラウザーがHTML5のdatepickerをサポートする日まで、すべてのケースをカバーできます。これは将来性があり、 これはモバイルブラウジングで特に重要です です。JavaScriptの日付ピッカーはほとんど使用できません。

これは、すべての<input type="date"/>すべてのページの要素を自動的に：

<script>
    $(function(){           
        if (!Modernizr.inputtypes.date) {
        // If not native HTML5 support, fallback to jQuery datePicker
            $('input[type=date]').datepicker({
                // Consistent format with the HTML5 picker
                    dateFormat : 'yy-mm-dd'
                },
                // Localization
                $.datepicker.regional['it']
            );
        }
    });
</script>

私はjQueryを使用しているためjQueryを使用しますが、jQuery部分をVanilla javascriptで、datepicker部分を任意のjavascript datepickerで自由に置き換えることができます。

23
Andrea Ligios

現在は機能しています。 Firefox 53以降では、about:configを有効にすることでdom.forms.datetypeオプション。 http://caniuse.com/#feat=input-datetime および https://developer.mozilla.org/en-US/Firefox/Experimental_features を参照してください

3
Massimiliano Arione

さまざまなアイテムに6つのHTML選択ボックスを使用し、適切な値のOPTIONステートメントを使用します。

年2000-2050（または選択した任意の範囲）月1-12（月名を表示することができます）日1-31時間0-23（または深夜12時から午後11時まで、これは表示を変更します）分0- 59秒0-59（または単に0と仮定）

Javascriptは必要ありませんが、無効な選択（2月30日など）を避けるために一部を使用しています。これは、月または年が変わるとトリガーされます。

1
Mark Lloyd
`input type="date"` is not supported on mozilla

サポートされているイベントのリストについては、 link を確認してください

1
Visakh B Sujathan