Javascript小僧：タイムリミットの「日」を設定する

Javascript小僧：タイムリミットの「月」を設定する
http://cheese999.blog.so-net.ne.jp/2013-10-14

の続きで、「日」の設定について書きたいと思います。

「日」は、１日から３１日まで、３１個の選択枝があります。数が多いですが、プルダウンメニューで作ることにします。

HTML部分はこんな感じです。

<form>
<select name="SelDay3" id="IdSelDay3">
<option value="1">1
<option value="2">2

（中略）

<option value="31">31
</select>日
</form>

プルダウンメニューに設定された「日」をJavascriptで拾うには、

T = new Date(Year1, Month1,
document.getElementById("IdSelDay3").selectedIndex+1,
Day1,Hour1,Min1,Sec1,000);

のようにします。

selectedIndexは、プルダウンメニューの何番目のoptionが選ばれているか、整数で返します。０から始まることに注意して下さい。３を選んだとき、selectedIndexは２になります。

選んだ日(selectedIndex)をnew Date()の日として代入します。new Date()の日は１から始まるので、selectedIndexの値に１を足します。

ところで、日って、月によって最終日が変化しますよね。

月	最終日
1, 3, 5, 7, 8, 10, 12	31
4, 6, 9, 11	30
2(平年)	28
2(うるう年)	29

たとえば、４月だったら、プルダウンメニューの３１を選べなくしてやると親切ですね。そうするには、

<option value="31" disabled>31

としてやります。２月は平年と「うるう年」で最終日が違いますので、年と月の２つの値を見て、２９日から３１日の部分を選択可能にしたり、選択不可能にしたりしてやればいいですね。javascriptで制御するためにHTMLの２９日から３１日の部分にIDを付けます。

<form>
<select name="SelDay3" id="IdSelDay3">
<option value="1">1
<option value="2">2

（中略）

<option value="29" id="IdOpDay29" disabled>29
<option value="30" id="IdOpDay30" disabled>30
<option value="31" id="IdOpDay31" disabled>31
</select>日
</form>

次に、javascript部分を考えます。まず、「うるう年」です。「うるう年」はwikiによると、

１．西暦年が4で割り切れる年は閏年
２．ただし、西暦年が100で割り切れる年は平年
３．ただし、西暦年が400で割り切れる年は閏年

とのことですので、次の関数で判定してやることにします。

// うるう年の判定
// 【引数】
// myYear : 西暦年
// 【戻り値】
// 平年=0
// うるう年=-1
// 【コード】
function FJudUru1(myYear){
var Flag1 = 0;
if((myYear % 400) == 0){Flag1 = -1} // うるう年
else if((myYear % 100) == 0){Flag1 = 0} // 平年
else if((myYear % 4) == 0){Flag1 = -1} // うるう年
else {Flag1 = 0} // 平年
return(Flag1);
}

次に、１か月の日数を返す関数を作ります。

// １か月の日数を算出する
// 【引数】
// myYear : 西暦の年。４桁。例：2005
// myMonth : 月。(1 - 12)
// 【戻り値】
// １か月の日数：28, 29, 30, 31のいずれか
// 【コード】
function FNumDayMon1(myYear,myMonth){
var NumMDays = 0; // その月の日数
switch(myMonth){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
NumMDays = 31;break;
case 4:
case 6:
case 9:
case 11:
NumMDays = 30;break;
case 2:
if(FJudUru1(myYear) == 0){NumMDays = 28} // 平年
else if(FJudUru1(myYear) == -1){NumMDays = 29} // うるう年
break;
default:
var tmpMes1 = "myMonth=" + myMonth + "が範囲外[FNumDayMon1]";
alert(tmpMes1);NumMDays = 31;break;
}
return(NumMDays);
}

次に、１か月の日数に応じて日付の選択肢を選択可能（ or 不可能）にする関数を作ります。

// １か月の日数に応じて日付の選択肢を選択可能（ or 不可能）にする
// 【引数】
// myYear : 西暦の年。４桁。例：2005
// myMonth : 月。(1 - 12)
// Obj1[0], Obj1[1], Obj1[2]：29日、30日、31日のオブジェクト
// 【戻り値】
// 無し
// 【コード】
function FEnableDayMon1(myYear, myMonth, Obj1){
Obj1[0].disabled = true; // 29日を選択不可能
Obj1[1].disabled = true; // 30日を選択不可能
Obj1[2].disabled = true; // 31日を選択不可能
var NumMDays = FNumDayMon1(myYear, myMonth); // １か月の日数
if(NumMDays >= 29){Obj1[0].disabled = false} // 29日を選択可能
if(NumMDays >= 30){Obj1[1].disabled = false} // 30日を選択可能
if(NumMDays >= 31){Obj1[2].disabled = false} // 31日を選択可能
}

31日を選択可能にするところの条件を(NumMDays = 31)としたら、うまく動きませんでした。理由は不明です。年と月が変更されたら、29, 30, 31日の選択肢を即更新したいので、周期起動する関数を作ります。

// FEnableDayMon1関数を周期起動する
function FStartEnDayMon1(){
clearInterval(T[4]);
// Obj1[0], Obj1[1], Obj1[2]：29日、30日、31日のオブジェクト
var Obj1 = new Array();
Obj1[0] = document.getElementById("IdOpDay29");
Obj1[1] = document.getElementById("IdOpDay30");
Obj1[2] = document.getElementById("IdOpDay31");
T[4] = setInterval(function(){
FEnableDayMon1(document.getElementById("Idyyyy1").value,
document.getElementById("IdSelMonth4").selectedIndex+1, Obj1)},500);
}

「日」のプルダウンメニューが選択され(onFocus)たら、周期起動を停止し、メニューからフォーカスが外れ(onBlur)たら、周期起動を再開させるため、HTML部分を変更します。

<select name="SelDay3" id="IdSelDay3"
onFocus="clearInterval(T[4])" onBlur="FStartEnDayMon1()" disabled>

動かしてみて分かった話ですが、Firefoxでは周期起動しっぱなしでも「日」を選択できるのですが、IEは周期起動を止めないと「日」を選択できませんでした。



メニューは、こんな感じになります。



事故前、公民館にはどんな人が集ってたんでしょうね。。？

Guns n´Roses - 14 years (lyrics)


この歌って、Izzy StradlinとW.Axl RoseのHello Goodbyeみたいやね。

The Beatles - Hello Goodbye


こちら、JohnとPaulのHello Goodbye

Canon ミラーレス EOS　木村カエラ 「観覧車篇」


カエラ姉さんのHello Goodbye

タグ：Izzy Stradlin JavaScript 14 Years Guns n´Roses Hello Goodbye THE BEATLES

コメント 5

やったぜ！ ありがとうございます。[__猫]
by cheese999 (2013-10-20 21:43) 

今回紹介したコードを試験した年と月の組み合わせは、
2013年1月⇒29日：○、30日：○、31日：○
2013年2月⇒29日：X、30日：X、31日：X（平年）
2013年3月⇒29日：○、30日：○、31日：○
2013年4月⇒29日：○、30日：○、31日：X
2013年5月⇒29日：○、30日：○、31日：○
2013年6月⇒29日：○、30日：○、31日：X
2013年7月⇒29日：○、30日：○、31日：○
2013年8月⇒29日：○、30日：○、31日：○
2013年9月⇒29日：○、30日：○、31日：X
2013年10月⇒29日：○、30日：○、31日：○
2013年11月⇒29日：○、30日：○、31日：X
2013年12月⇒29日：○、30日：○、31日：○

2012年2月⇒29日：○、30日：X、31日：X (うるう年）
2000年2月⇒29日：○、30日：X、31日：X (うるう年）
2100年2月⇒29日：X、30日：X、31日：X（平年）

西向く侍（２４６９１１）

by cheese999 (2013-10-21 05:54) 

使う側には便利な機能も、作るとなると大変ですね＾＾
by ぽちの輔 (2013-10-21 08:13) 

ホント、作るの大変そう（^^;
by Ａちゃん (2013-10-21 17:11) 

ぽちの輔さん、
そうですねぇ～。世の中には、もっと難しいプログラム作っておられる方もいっらしゃいますが。。[__猫]

Ａちゃんさん、
趣味でやっているので、大変と思ったことはありませんよ～。
by cheese999 (2013-10-22 05:49)