- ベストアンサー
セレクトボックス日付同士の比較について
以下をどなたか教えていただけないでしょうか？よろしくお願いします。 二つのセレクトボックスで年/月/日を作成する。 さらに追加ボタンを押したときに 1.日付を比較しどちらかが一方が存在しない場合アラートを表示する。 2.開始日と終了日が前後していたらアラートを表示する。 3.OKであればテキストボックスに日付を出力する 以上です。javascript初心者ですが、よろしくお願いいたします。
- itio
- お礼率50% (5/10)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
よくわからない部分があるので補足願います。 ＝＝＝＝＝＝＝＝＝＝＝＝ 開始日 ＿年 ＿月 ＿日 終了日 ＿年 ＿月 ＿日 [さらに追加] [テキストボックス] ＝＝＝＝＝＝＝＝＝＝＝＝ ↑こんな画面があったとして・・・ 利用者が開始日と終了日を入力(選択)する。 [さらに追加]ボタンを押されたら、 ・全て入力されているか、 ・日付が前後していないか、 をチェックし、NGならアラートを出す。 OKであればテキストボックスに日付を出力…なんの日付を出力するんでしょうか？？
その他の回答 (3)
- yambejp
- ベストアンサー率51% (3827/7415)
#3です。 そこまで書いて何がわからないのでしょうか？ 十分ご自身で解くスキルはありそうです。 ざっと書いてみましたので参考にしてみてください。 <HTML> <HEAD> <SCRIPT language="JavaScript"> function addFunc(f){ var y1 = f.y1.value; var m1 = f.m1.value -1; var d1 = f.d1.value; var y2 = f.y2.value; var m2 = f.m2.value -1; var d2 = f.d2.value; var start_date = setDate(y1,m1,d1); var end_date = setDate(y2,m2,d2); if(start_date==false || end_date==false){ alert("日付が変"); return false; } if(start_date>end_date){ alert("日付が逆？"); return false; } var str =""; str+=start_date.getFullYear()+"年"; str+=(start_date.getMonth()+1)+"月"; str+=start_date.getDate()+"日"; str+="～"; str+=end_date.getFullYear()+"年"; str+=(end_date.getMonth()+1)+"月"; str+=end_date.getDate()+"日"; f.text1.value=str return true; } function setDate(y,m,d){ var date=new Date(y,m,d); if(date.getFullYear()!=y || date.getMonth()!=m || date.getDate()!=d ) return false; return date; } </SCRIPT> </HEAD> <BODY> <FORM> 開始日：<SELECT name="y1" > <OPTION value="2000">00</OPTION> <option value="2006">06</option> <option value="2007"selected>07</option> <option value="2008">08</option> <option value="2009">09</option> <option value="2010">10</option> </SELECT>年 <SELECT name="m1" > <option value="1"selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </SELECT>月 <SELECT name="d1"> <option value="1"selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </SELECT>日<br /> 開始日：<SELECT name="y2" > <OPTION value="2000">00</OPTION> <option value="2006">06</option> <option value="2007"selected>07</option> <option value="2008">08</option> <option value="2009">09</option> <option value="2010">10</option> </SELECT>年 <SELECT name="m2" > <option value="1"selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </SELECT>月 <SELECT name="d2"> <option value="1"selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </SELECT>日<br> <INPUT type="button" value="追加" onClick="addFunc(this.form);"><br> <INPUT type="text" name="text1" value="" size="50" readonly> </FORM> </BODY> </HTML>
お礼
回答ありがとうございます！ 私が思っていたものそのものです。 初心者なのでネットであれこれ参考にしたのですが、応用が利かなくて．．．今回のを参考にさらに応用力がつくように勉強していきたいと思います。 本当にありがとうございます。
- yambejp
- ベストアンサー率51% (3827/7415)
とりあえず一度日付型のデータにしてしまうとよいでしょう。 こんな感じでわかりますか？ <script language=javascript> function test(){ //月は0月からはじまるので注意 var d1=new Date(2006,11, 15); var d2=new Date(2006,11, 16); if(d1 < d2){ str =d1.getFullYear()+"年"+(d1.getMonth()+1)+"月"+d1.getDate()+"日"; str+="～"; str+=d2.getFullYear()+"年"+(d2.getMonth()+1)+"月"+d2.getDate()+"日"; alert(str) } } </script> <form> <input type=button value="test" onClick="test()"> </form> ただし日付けの妥当性については、Date()は拡大解釈 してしまうようなので、できあがった日付けデータから 年月日を取り出して、元の数字と違わないかチェックすると よいかもしれません。
お礼
回答ありがとうございました。良回答に選んだつもりが質問に対する回答は2個しか採点できないんですね。 初めての採点だったので申し訳ない気持ちでいっぱいです。 とてもよい回答をしていただきありがとうございました。
補足
回答ありがとうございます。 今のところここまでできたのですが、 <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function dateCheck(obj){ obj = obj.form; var years = obj.years.value; var months = obj.months.value; var days = obj.days.value; var flag = true; years = parseInt(years); months = parseInt(months) - 1; days = parseInt(days); var dates = new Date(years,months,days); if (dates.getYear() < 1900) { if (years != dates.getYear() + 1900) { flag = false; }} else {if (years != dates.getYear()) { flag = false; }} if (months != dates.getMonth()) { flag = false; } if (days!= dates.getDate()) { flag = false; } if (flag) {window.alert("入力された日付は存在します");} else {window.alert("入力された日付は存在しません");} } // --> </SCRIPT> </HEAD> <BODY> <FORM> <SELECT name="years" > <OPTION value="2000">00</OPTION> <option value="2006">06</option> <option value="2007"selected>07</option> <option value="2008">08</option> <option value="2009">09</option> <option value="2010">10</option> </SELECT> <SELECT name="months" > <option value="1"selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </SELECT> <SELECT name="days"> <option value="1"selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </SELECT> <INPUT type="button" value="日付チェック" onClick="dateCheck(this);"> </FORM> </BODY> </HTML> あとは 同様なセレクトボックスをもうひとつ作成し、ボタンをクリックすると日付の期間が前後していないかチェックするようにようにしたいのですが、なにかアドバイスよろしくお願いします。
- VCAT
- ベストアンサー率20% (16/79)
セレクトボックスは２群計６個と読みましたが、 それぞれに日付チェックも必要ですか？ どちらか一方に存在しないだけでアラートの意味不明。 つまり、片方は狂っていてもいいと？ テキストボックスに日付を、はムダでは？ 差分の日数のこと？
補足
回答ありがとうございます。 ＝＝＝＝＝＝＝＝＝＝＝＝ [テキストボックス] [セレクトボックス 開始日 ＿年 ＿月 ＿日～終了日 ＿年 ＿月 ＿日] [追加ボタン] ＝＝＝＝＝＝＝＝＝＝＝＝ 利用者が開始日と終了日を選択 ↓ false 日付の妥当性チェック（開始日、終了日ともに）→アラート出力 ↓true false 日付画前後していないかチェック→アラート出力→アラート出力 ↓true 日付＿年 ＿月 ＿日～＿年 ＿月 ＿日をテキストボックスに出力 といった感じです。説明不足ですいません。
補足
回答ありがとうございます。 ＝＝＝＝＝＝＝＝＝＝＝＝ [テキストボックス] [セレクトボックス 開始日 ＿年 ＿月 ＿日～終了日 ＿年 ＿月 ＿日] [追加ボタン] ＝＝＝＝＝＝＝＝＝＝＝＝ 利用者が開始日と終了日を選択 ↓ false 日付の妥当性チェック（開始日、終了日ともに）→アラート出力 ↓true false 日付画前後していないかチェック→アラート出力→アラート出力 ↓true 日付＿年 ＿月 ＿日～＿年 ＿月 ＿日をテキストボックスに出力 といった感じです。説明不足ですいません。