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

作成日:

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

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

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

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

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

そこでもっと楽な方法は無いかと探していましたら、[js]if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}[/js]と書けばOKとありました。

How to make supported on all browsers? Any alternatives? https://stackoverflow.com/questions/18020950/how-to-make-input-type-date-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を別途読み込んでおく必要があります。

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。