質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

89.09%

javascriptで動的カレンダーをHTMLに出力したいです。

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 3,518
iwbtbij

iwbtbij

score 10

今生年月日をセレクトボックスに作ってみました。
しかし、このソースコードは非常に大きな問題点があります。
最後の日を出力する時もうし二月なのに31日まで出力しております。
私は今年月まで入力したら日は自動的に年月に合わせて日を出力したいです。 

var date = new Date(1960, 02);

var dateCnt = date.getUTCDate();

上のソースコードを利用し、解決挑戦したができませんでした。 

<th bgcolor=#D8D8D8>生年月日
        <td>
            <select name="year">
                <option value="">
                <script>
                   for( var i=new Date( ).getFullYear( )-50 ; i<new Date( ).getFullYear( )+2 ; i++){
                       document.write( "<option value="+i+">"+i );
                   }
                </script>
            </select>&nbsp;&nbsp;年&nbsp;
            <select name="month">
                <option value="">
                <script>
                   for( var i=1 ; i<=12 ; i++){
                       if(i<10){ document.write( "<option value='0"+i+"'>0"+i ); }
                       else   { document.write( "<option value='"+i+"'>"+i ); }
                   }
                </script>
            </select>&nbsp;&nbsp;月&nbsp;
            <select name="day">
                <option value="">
                <script>
                   for( var i=1 ; i<=31 ; i++){
                       if(i<10){ document.write( "<option value='0"+i+"'>0"+i ); }
                       else   { document.write( "<option value='"+i+"'>"+i ); }
                   }
                </script>
            </select>&nbsp;&nbsp;日

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3 件

link

checkベストアンサー

+4

「JavaScript select 年月日」で検索。

【javascriptでありえない日付をselectで選択させない制御 - Qiita】
http://qiita.com/terrym/items/115e899294221902781f

【簡単にHTMLの年月日のプルダウンを作る方法 - ITS】
https://its-office.jp/blog/js/2016/03/08/ymd-html.html

【セレクトボックスの日付を切り替え | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website】
http://shanabrian.com/web/javascript/change-day.php

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/23 09:27

    ありがとうございます。
    http://shanabrian.com/web/javascript/change-day.php＜＜これを見て解決しました。
    さすが日本は整理が綺麗ですね。
    後もっとご参照頂きます。

    キャンセル

link

+2

一般的には大きな問題ではなく選択後データ送信時にバリデートして
選択した日付は存在しない旨アラートを出せば済む話です。

実際2017年3月31日を選んで、その後3月を2月に変更すれば結局31日が
選ばれた状態になります。それを見越してあれやこれや例外処理を入れても
結局未入力をさけるためにも送信時のチェックは必要なので
がんばってもさほど意味がない作業になります。

 sample

一応形だけ 

<script>
document.addEventListener('change',function(e){
  var t=e.target;
  if(t.nodeName=="SELECT" && (t.name=="year" || t.name=="month")){
   setDay();
  }
});
function setDay(){
  var f=document.getElementById("f1");
  var y=f.elements["year"].options[f.elements["year"].selectedIndex].value;
  var m=f.elements["month"].options[f.elements["month"].selectedIndex].value;
  var d=f.elements["day"];
  for(var i=d.options.length-1;i>0;i--){
    d.removeChild(d.options[i]);
  }
  if(y!=="" && m!==""){
    for(var i=1 ; i<=(new Date(y,m,0)).getDate(); i++){
      var n=document.createElement("option");
      n.setAttribute("value",i);
      n.appendChild(document.createTextNode(("0"+i).substr(-2,2)));
      d.appendChild(n);
    }
  }

}
window.onload=function(){
  var f=document.getElementById("f1");
  var y=f.elements["year"];
  var m=f.elements["month"];
  var myDate=new Date( );
  for(var i=myDate.getFullYear()-50 ; i<myDate.getFullYear( )+2 ; i++){
    var n=document.createElement("option");
    n.setAttribute("value",i);
    n.appendChild(document.createTextNode(i));
    y.appendChild(n);
  }
  for(var i=1 ; i<=12 ; i++){
    var n=document.createElement("option");
    n.setAttribute("value",i);
    n.appendChild(document.createTextNode(("0"+i).substr(-2,2)));
    m.appendChild(n);
  }
  setDay();
}
</script>

<form id="f1">
<select name="year">
<option value="">----</option>
</select>年
<select name="month">
<option value="">--</option>
</select>月
<select name="day">
<option value="">--</option>
</select>日

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+2

JavaScriptのDateオブジェクトの月は0～11までなので、2を指定すると3月になります。
そして面倒な末日計算などしなくても、このDateの日の部分に0を指定すると前月の末日になります。
末日さえわかればあとはできるのではないでしょうか？

JavaScriptで月末日を取得する
http://qiita.com/akase244/items/f558b9b3c51804103d16

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 89.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る