【Web】FirefoxとSafariでinput dateのカレンダーが表示されない

普段はChromeで表示確認をしているのですが、確認作業でFirefoxやSafariでフォームのカレンダーが表示されない事がわかりました。

しばらく調べましたが、以下のスクリプトを読みこむようにすると解決するようです。

<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>

中身で何をやっているか、詳しくは見ていませんが、CDNからwebshimsが提供するスクリプトを読み込んでいるようですね。

調べてみるとこれらはブラウザに欠けているUIなどの機能の代替を提供してくれるスクリプトらしいです。

ここではmodernizr-custom.jsという拡張ライブラリとpolyfiller.jsというポリフィルライブラリを読み込んでいますね。

これでカレンダーが表示されるようになりました。便利ですね〜

シェアする

  • このエントリーをはてなブックマークに追加

フォローする