2015年4月19日日曜日

[JavaScript] [jQuery] 任意の年月の月末日を得る

年、月、日のプルダウンが存在していて、年、月が選択されたタイミングで日のプルダウンの値を更新する仕組みを考えます。この時、日の月末日は閏年の判定も含めて、年、月の値に応じて変化させる必要があります。

このために、任意の年月の月末日を得る必要があります。例を示します。


$(function(){
// 年、月、日のプルダウンの参照を取得(idがそれぞれyear, month, dayであるとする)
var year = $('#year');
var month = $('#month');
var day = $('#day');
var endDay;
year.change(function(){
endDay = getMonthEndDay(year.val(), month.val());
day.children().remove();
for (var i=0; i<endDay; i++) {
day.append($('<option>').attr({ value: 1+i }).text(1+i));
}
});
month.change(function(){
endDay = getMonthEndDay(year.val(), month.val());
day.children().remove();
for (var i=0; i<endDay; i++) {
day.append($('<option>').attr({ value: 1+i }).text(1+i));
}
});
});
/**
* 年月を指定して月末日を求める関数
* year 年
* month 月
*/
function getMonthEndDay(year, month) {
// 通常、new Date()にはmonth - 1を渡すところ、monthをそのまま渡す。
// するとそのままでは次月の指定になるが、日に0を指定すると前月の末日の指定になる。
// これによって任意年月の末日を得る。
var dt = new Date(year, month, 0);
return dt.getDate();
}
view raw gistfile1.js hosted with ❤ by GitHub

例では、任意の月末日を得たのち、年、月のプルダウンが変化(change)するタイミングで、その時の年、月の組み合わせで月末日(endDay)を求めて、この値を使って動的に日のselectのoption要素を動的に生成しています。

参考
 JavaScript による日付・時刻・時間の計算・演算のまとめ – hoge256 blog

0 件のコメント:

コメントを投稿