tande lab.

うるう年判定と月によって異なる日付の入力制御

うるう年の判定ってどうやるんだろーと調べてみたら、Microsoft のページに書いてあった。

1. 判定する年が 4 で割り切れる場合は手順 2. に。割り切れない場合は手順 5. に。
2. その年が 100 で割り切れる場合は手順 3. に。割り切れない場合は手順 4. に。
3. その年が 400 で割り切れる場合は手順 4. に。割り切れない場合は手順 5. に。
4. その年はうるう年です。
5. その年はうるう年ではありません。

なるほどー?
私の弱い頭で整理した結果、

4 でも 100 でも 400 でも割り切れる西暦
4 で割り切れるが 100 で割り切れない西暦

がうるう年ってことかな?と判断して、JavaScript で以下な感じで判定しました。

// フォームで入力された値(西暦)をゲット
var YYYY = $("#inputYYYY").val();

// うるう年の場合(西暦が 4,100,400 のいづれでも割り切れる場合)
if(YYYY % 4 == 0 && YYYY % 100 == 0 && YYYY % 400 == 0){
	consol.log("うるう年だよー");

// うるう年の場合(西暦が 4 で割り切れて、かつ 100 で割り切れない場合)
}else if(YYYY % 4 == 0 && YYYY % 100 != 0){
	consol.log("うるう年だよー");

// うるう年ではない場合
}else{
	consol.log("うるう年じゃないよー");
}

先日リリースした Chrome Extension 妊娠カウンターで、初めて日付処理というものをやったので、そのときの覚え書きメモでした。

日付処理って単純なようで色々と面倒なのですね。勉強になりました。

うるう年の件も含めて、月によって存在する日が、28日、29日、30日、31日と違うので、入力した月によって入力できる日を変更するには、if文を入れ子にして対応しました。

30日までの月って数えてみると、4,6,9,11月の4個しかないんですね。
常識なのかもしれないですが私は気にしたことなかったので、こちらも勉強になりました。

/////////////////////////////////
// 設定された月に応じて日の表示数(28 or 29 or 30 or 31)を制御
/////////////////////////////////
var controlDay = function(){

	// 一度 "日" のプルダウンの内容を空にする
	$("#inputDD").empty();

	// "月"と"年"の入力内容を変数に格納
	var mmVal = $("#inputMM").val();
	var yyyyVal = $("#inputYYYY").val();

	// 2月が入力された場合
	if($("#inputMM").val() == 2){

		// うるう年の場合(西暦が 4,100,400 のいづれでも割り切れる場合)
		if(yyyyVal % 4 == 0 && yyyyVal % 100 == 0 && yyyyVal % 400 == 0){
			// プルダウンに表示する日数を29日に
			for(var i = 0; i < 29; i++){
				$("#inputDD").append($("<option></option>").text(i + 1));
			};
		// うるう年の場合(西暦が 4 で割り切れて、かつ 100 で割り切れない場合)
		}else if(yyyyVal % 4 == 0 && yyyyVal % 100 != 0){
			// プルダウンに表示する日数を29日に
			for(var i = 0; i < 29; i++){
				$("#inputDD").append($("<option></option>").text(i + 1));
			};
		// うるう年ではない場合
		}else{
			// プルダウンに表示する日数を28日に
			for(var i = 0; i < 28; i++){
				$("#inputDD").append($("<option></option>").text(i + 1));
			};
		}

	// 30日までしかない月の場合(4,6,9,11月)
	}else if(mmVal == 4 || mmVal == 6 || mmVal == 9 || mmVal == 11){
		// プルダウンに表示する日数を30日に
		for(var i = 0; i < 30; i++){
			$("#inputDD").append($("<option></option>").text(i + 1));
		};

	// 31日まである月の場合(2,4,6,9,11月以外)
	}else{
		// プルダウンに表示する日数を31日に
		for(var i = 0; i < 31; i++){
			$("#inputDD").append($("<option></option>").text(i + 1));
		};
	}

}

こんな感じで、年、月の入力に合わせて、プルダウンに表示される日の数を制御。

入力フォームで年または月が変更されるイベントを取得する度に、下記のように上の関数を呼び出して処理をしました。

// 年または月の表示が変わるたびに日の表示数を制御
$("#inputYYYY").change(function(){
	controlDay();
});
$("#inputMM").change(function(){
	controlDay();
});

なんか長ったらしいコードになってしまったけど、もっとスマートに処理する方法あるのかなぁ。

追記 2014.2.6

その後、こんな面倒なことしなくても普通にDateオブジェクト使えばうるう年計算とか勝手にやってくれるよ的なコメントを @soranchu からもらった。まじですか。

また後日色々調べてみる〜。




0 comments
Submit comment