株式会社uluca

WEBシステム設計・WEBプログラム開発運用・スマートフォンアプリ開発

開発ブログ

ympickerに手を加える

jQuery

jQueryで年月だけ入力できるympicker
jquery.ui.datepicker.jsをカスタマイズしたものです。
https://www.softel.co.jp/blogs/tech/archives/4297

とても便利でいいのですが、jQueryのバージョンでは表示されなかったり、
または変に表示されたり(IEだけ)、表示すると常に当月がデフォルトとなっています。

とりあえず使えるようにしたいなと思って修正変更しましたので動作の保証はできません。
あくまで参考程度に捉えてください。

ympickerバージョン 1.8.21
jQueryバージョン 2.1.3
確認ブラウザ IE11/FireFox(41.0.2)

まず最新のjQueryバージョンでは動きません。
上記のサイトの下の投稿に

1582行目を以下に変えればJquery1.9以降でも動きますね。
html += buttonPanel + (!$.support.noCloneChecked && !inst.inline ?

とあるのでIEでやってみると以下のようにおかしな表示になります。
ie

ただし、FireFoxで確認するとちゃんと表示されている感じです。
ff

そこで1582行目あたりこうなっているところを

html += buttonPanel + (!$.support.noCloneChecked && !inst.inline ?
'<iframe src="javascript:false;" class="ui-datepicker-cover" frameborder="0"></iframe>' : '');

以下のようにしました。

html += buttonPanel;

要はbuttonPanel以降は処理を無視しました。(何をやっているか細かいことは調べていません)
これでIEでもちゃんと表示され、動作も問題なさそうです。

これで表示の問題はクリアですが、次は常に当月が選択状態になっているところです。
1302行目あたり、こうなっている箇所を

inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
inst.currentDay = (dates ? date.getDate() : 0);
inst.currentMonth = (dates ? date.getMonth() : 0);
inst.currentYear = (dates ? date.getFullYear() : 0);

以下のように変更しました。

if (dates) {
	var ym = dates.split("/");
	var y = parseInt(ym[0]);
	var m = parseInt(ym[1])-1;
	inst.selectedDay = date.getDate();
	inst.drawMonth = inst.selectedMonth = m;
	inst.drawYear = inst.selectedYear = y;
	inst.currentDay = (dates ? date.getDate() : 0);
	inst.currentMonth = m;
	inst.currentYear = y;
} else {
	inst.selectedDay = date.getDate();
	inst.drawMonth = inst.selectedMonth = date.getMonth();
	inst.drawYear = inst.selectedYear = date.getFullYear();
	inst.currentDay = (dates ? date.getDate() : 0);
	inst.currentMonth = (dates ? date.getMonth() : 0);
	inst.currentYear = (dates ? date.getFullYear() : 0);
}

datesに入力済みの年月(yyyy/mm)が入っているので
入力済みならそれをデフォルトの選択年月にするためにinstにそれぞれ格納しています。
dayのほうはそのままで変えていません。

このように表示され、動作も今のところは問題なさそうです。
ieok