JQueryのカレンダーが前面に表示されないとき

2017年2月11日

JQueryのカレンダーを使用すると、他のコントロールの後ろに表示されることがあります。

この見た目は良くないので、こんな風にしたいのです。

これが意外と難しくて、数時間悩んでしまいました。
正しいやり方は、これらしいです。

$(function(){
  $("#datepicker").datepicker({
	    beforeShow: function() {
	        setTimeout(function(){
	            $('.ui-datepicker').css('z-index', 99999999999999);
	        }, 0);
	    }
  });
});

全然気がつきませんでした。
こんなやり方があるんですね。

これに限らず、Webの開発は微妙なところで難しいです。
いろいろ便利なコンポーネントはありますが、うまく結合させるのが困難。
そんなことは、よくあります。