アプリ版：「スタンプのみでお礼する」機能のリリースについて

日付リストボックスの制御について

解決済

  • 質問者：aquapark4
  • 質問日時：
  • 回答数：2件

現在、フォームに 年、月、日のリストボックスをそれぞれ配置して、たとえば、月を選択したときに、その月に対応する日（たとえば、６月を選択した場合は、日のリストボックスには、1～30までの値が入る）を表示させると言う
制御をJavaScriptで実現させたいと考えています。

うるう年の場合も対応したいと考えています。

しかし、JavaScript初心者のために、まったくわからない状態です。

経験者の方々、サンプルソースもしくは、参考になるURL等ありましたら、ご教授お願いします。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： arukamun
  • 回答日時：

こんばんは



おもしろそうなので作って見ました。
曜日鑑別法を実相しています。
ここではTABが使えないので全角の空白が入っていますので、それは置換してしてください。
解らないところがあれば、補足してください。
では、お試しあれ。

<HTML>
<BODY onLoad="toDay()">
<SCRIPT LANGUAGE=JavaScript>
<!--
function weekDay(y,m,d)
{　　// 曜日を求めます。
　　if ( m < 3 ){
　　　　y -- ;
　　　　m += 12 ;
　　}
　　return (y+Math.floor(y/4)-Math.floor(y/100)+Math.floor(y/400)+Math.floor((m*13+8)/5)+d)%7 ;
}
function maxDay(y,m)
{　　// 最大日数を求めます。
　　s = weekDay(y,m,1);
　　if ( m == 12 ){
　　　　y ++ ;
　　　　m = 1 ;
　　} else {
　　　　m ++ ;
　　}
　　e = weekDay(y,m,1);
　　if ( e >= s ){
　　　　return 28+e-s ;
　　} else {
　　　　return 35+e-s ;
　　}
}
function changeDay()
{　　// 日付を更新します。
　　var y = eval(document.date.year.value);
　　var m = eval(document.date.month.selectedIndex+1);
　　var d = eval(document.date.day.selectedIndex+1);
　　var maxd = maxDay(y,m);
　　if ( d > maxd ){
　　　　d = maxd ;
　　　　document.date.day.selectedIndex = d-1 ;
　　}
　　var i ;
　　for (i=0 ;i<maxd ;i++){
　　　　document.date.day.options[i].text = i+1 ;
　　}
　　for ( ;i<31 ;i++){
　　　　document.date.day.options[i].text = "" ;
　　}
　　document.date.week.selectedIndex = weekDay(y,m,d);
　　return false ;
}
function toDay()
{　　// 今日の日付に設定します。
　　d = new Date();
　　document.date.year.value = d.getFullYear();
　　document.date.month.selectedIndex = d.getMonth();
　　document.date.day.selectedIndex = d.getDate()-1;
　　changeDay();
}
// -->
</SCRIPT>
<FORM NAME=date>
<INPUT NAME=year SIZE=4 onChange="changeDay()">
年
<SELECT NAME=month onChange="changeDay()">
<OPTION>1<OPTION>2<OPTION>3<OPTION>4<OPTION>5<OPTION>6<OPTION>7
<OPTION>8<OPTION>9<OPTION>10<OPTION>11<OPTION>12</SELECT>
月
<SELECT NAME=day onChange="changeDay()">
<OPTION>1<OPTION>2<OPTION>3<OPTION>4<OPTION>5<OPTION>6<OPTION>7<OPTION>8<OPTION>9<OPTION>10<OPTION>11
<OPTION>12<OPTION>13<OPTION>14<OPTION>15<OPTION>16<OPTION>17<OPTION>18<OPTION>19<OPTION>20<OPTION>21
<OPTION>22<OPTION>23<OPTION>24<OPTION>25<OPTION>26<OPTION>27<OPTION>28<OPTION>29<OPTION>30<OPTION>31</SELECT>
日
<SELECT NAME=week disabled>
<OPTION>日曜日<OPTION>月曜日<OPTION>火曜日<OPTION>水曜日<OPTION>木曜日<OPTION>金曜日<OPTION>土曜日</SELECT>
</FORM>
</BODY>
</HTML>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： leaz024
  • 回答日時：

日の select オブジェクトの options プロパティを動的に変更することで可能です。


月末日や閏年の求め方が分からなければ、勉強がてらソースを解読してみてください。

# スクリプト部
<script type="text/javascript">
<!--
function setDayOptions(f) {
　　// 年月日を取得
　　var y = f.year.options[f.year.selectedIndex].text;
　　var m = f.month.selectedIndex + 1;
　　var d = f.day.selectedIndex + 1;

　　// 月末日を算出
　　var last = (m <= 7) ? (30 + m % 2) : (31 - m % 2);
　　if (m==2) {
　　　　last = 28;
　　　　if (y%4==0 && (y%100!=0 || y%400==0)) last++;
　　}

　　// optionsを変更
　　f.day.options.length = last;
　　for (var i = 29; i <= last; i++)
　　　　f.day.options[i-1] = new Option(i);

　　// 元の選択日を設定
　　f.day.selectedIndex = (d < last ? d : last) - 1;
}
//-->
</script>

# フォーム部
<form>
<select name="year" onChange="setDayOptions(this.form)">
<option>2003<option>2004
</select>年
<select name="month" onChange="setDayOptions(this.form)">
<option>1<option>2<option>3<option>4<option>5<option>6
<option>7<option>8<option>9<option>10<option>11<option>12
</select>月
<select name="day">
<option>1<option>2<option>3<option>4<option>5
<option>6<option>7<option>8<option>9<option>10
<option>11<option>12<option>13<option>14<option>15
<option>16<option>17<option>18<option>19<option>20
<option>21<option>22<option>23<option>24<option>25
<option>26<option>27<option>28<option>29<option>30<option>31
</select>日
</form>

※閏年にも対応したいとのことですので、年の select の onChange からも日の select を変更する setDayOptions() を呼び出します。
※スクリプトのインデントに全角空白を使っているので、コピペする場合はタブや半角空白に置換してください。

# 恐らく、このフォームの送信を受け取るCGIって「No.604526:Perlの日付の比較に関して」のものですよね？そちらは解決しましたか？
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報