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

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



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

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

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

この時、
http://chaika.hatenablog.com/entry/2015/09/28/175239
によると、modernizr.jsというJavaScriptライブラリーを使ってブラウザを判別して使えば良いよ、とありました。

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

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

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

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

supported on all browsers? Any alternatives?" title="How to make supported on all browsers? Any alternatives?">
参考
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...

supported on all browsers? Any alternatives?"> Stack Overflow

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

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

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

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


開発

ChromeやEdgeでは、inputフォームタグにtype=”date”としてやれば、簡単にカレンダー入力が可能になります。 しかし、Firefoxや旧IEではこれをサポートしていないため、ただ…


関連する記事



こちらはいかが?


jQueryでExcel書き出し
jQueryでExcel書き出し

http://jquerybyexample.blogspot.com/2012/10/export-table-data-to-excel-using-jquery.html WordPressで作成したHTMLテーブ…

jQueryでHTMLタグを置換する
jQueryでHTMLタグを置換する

例として、ボタンをクリックしてulタグをolタグに置換しています。 See the Pen クリックしてタグを置換する by kosuke agusa (@aguko) on CodePen. でも、このままだとidやク…

FlexsliderのDestroy処理
FlexsliderのDestroy処理

http://flexslider.woothemes.com/ Flexsliderでスライダー処理を設定した後、やっぱりやめよう、という時にスライダーの設定を無効化(Destroy)したい。 そんな時には・・・ $(…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)