inputフォームでdataタイプが使えないブラウザの時はjQuery UIのdatapickerを使うように切り替える方法


ChromeやEdgeでは、inputフォームタグにtype=”date”としてやれば、簡単にカレンダー入力が可能になります。

しかし、Firefoxや旧IEではこれをサポートしていないため、ただのテキスト入力になってしまいます。

そのため、これらサポート外のブラウザの際はjQuery UIのdatapickerを代わりに実装することになります。

この時、

input[type=”date”]がサポートされてない時だけjQuery UIのプラグインを使うようにしたい。 – かもメモ

HTML5のフォームパーツがたくさん増えて便利なのですが、割りとよく使いたくなる input[type=”date”]、 Firefoxなどカレンダーで選択できる機能が実装されてない プラウザもまだまだ多い印象があります。単純に input[type=”text”]にしてjQueryUIのdatepicker使っちゃうのが一番楽な気がしています。 ただ、レスポンシブとかにするなら スマートフォンのキーボードの関係もあって input[type=”date”]を使いたいってケースも多いです。 そこで今回は、 input[type=”date”]でフォームを作成して、 input[type=”date”] をサポートしていないブラウザの時だけjQueryUIのdatepickerを使うようにするメモです。 modernizr.jsは JavaScript のライブラリです。 閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれます。 出展: ブラウザ対応が簡単に!「modernizr.js」の機能と利用方法 | 株式会社LIG まずは、 modernizr.jsのサイトからライブラリをDownloadします。 色々な設定をしてDownloadする事ができるようなので、今回はinputタグのtypeが色々使えるかどうかだけが判れば良いのでリストから Form input typesを探してチェックを入れて、右上の BUILDボタンを押してライブラリをダウンロードします。 HTMLでmodernizr.jsを読み込ませ、下記のように スクリプト を追加するだけです。 既に jQueryを使っているような場合は、 nope[]リストから jQueryのURLを削除すればOKです。 また、jQueryUIも既に使っているような場合は次のようなif文で判別させることもできます。 感想 modernizr.js には色々なオプションや APIが用意されているのでブラウザ対応に重宝しそうです! ブラウザの対応を統一して欲しい… [参考]

によると、modernizr.jsというJavaScriptライブラリーを使ってブラウザを判別して使えば良いよ、とありました。

Modernizr: the feature detection library for HTML5/CSS3

All web developers come up against differences between browsers and devices. That’s largely due to different feature sets: the latest versions of the popular browsers can do some awesome things which older browsers can’t – but we still have to support the older ones.

しかしながら、上記サイトを参考に試してみたのですがうまく機能しませんでした。記述ミスがあったのかもしれません。

そこでもっと楽な方法は無いかと探していましたら、

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

と書けばOKとありました。

How to make supported on all browsers? Any alternatives?

I’m working with HTML5 elements input attributes and only Google Chrome supports the date, time attributes. I tried Modernizr but I can’t understand on how to integrate it on my website(on how to c…

これなら余計なライブラリーの追加も不要です。

※もちろん、使用するためにはjQueryとjQuery UIを別途読み込んでおく必要があります。



物草灸太郎

怠けたい。

コメントを残す