web-dev-qa-db-ja.com

HTML 5 input type = "date"をFirefoxや/またはで動作させる方法 IE 10年

私は、input type="date"がFirefoxの中でまだサポートされていないのは変なことだと思います。実際、私は彼らがinput要素にHTML 5の新しい型を追加したとは思いません。それがIE10でサポートされていないことは驚くことではありません。だから、私の質問は...

IEとFirefoxブラウザだけのカレンダー/日付を取得するために、さらに別の.jsファイル（つまりinput DatePicker Widget）を追加せずにjQueryUI要素のtype="date"を機能させる方法は？ FirefoxやIEブラウザでこの機能がデフォルトで機能するようにするために、どこかに適用できるもの（おそらくCDN）がありますか。 IE 8+ブラウザをターゲットにしてFirefoxを使用しようとしても、最新バージョン（28.0）で問題ありません。

アップデート：Firefox 57以降はinput type = dateをサポートする

html5formsjquery-uiinternet-explorerfirefox
185
Solomon Closson

webshims を試すことができます。これは cdn +で利用可能です。

これは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コンフィギュレータ があります。

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

134
alexander farkas

Firefox 51以降（2017年1月26日）からFirefoxに入っていますが、デフォルトではまだアクティブになっていません（まだ）

有効にするには：

about：config

dom.forms.datetime - > trueに設定

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

26
Jonathan Vanasse

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 - 日付フォーマットの変更 を参照してください。

20
Dax

Type = "date"は現時点では実際の仕様ではありません。これはGoogleが思いついた概念であり、その仕様は公式ではなく、Chromeで部分的にしかサポートされていません。

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

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

17
Chris Love

これは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" />
9
drooh

これでは日付ピッカーの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))'

最終的に、私は@SuperUberDuperに同意します。Mozillaはこれをネイティブに含めることをかなり遅れているからです。

4
ajax1515

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

Idはすべてのフィールドに対して一意である必要があります。そのため、フォームに複数の日付フィールドがある場合は、IDの代わりにclass要素を使用できます。

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

そしてあなたの入力：

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

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

3
codeispoetry

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

3
irfandar

これが正しい解決策です。あなたはどこでもjquery datepickerを使うべきです

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

以下は完全なコードを入手するためのリンクです。

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

0
santosh devnath

プロジェクトでDatepicker http://jqueryui.com/datepicker/ を使用したくない場合があります。

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

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

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
        <meta name="author" content="Andrej Hristoliubov [email protected]">
        <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>
0
Andrej

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

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

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

使用法：

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});
0
Santiago Trejo

Alexanderに感謝します。私はどのようにen langのためにフォーマットを修正する方法を見つけました。 （どの言語がそのようなフォーマットを使っているかわかりませんでした）

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

 $.webshims.activeLang('en');
0
Pavel Niedoba