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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

4634閲覧

【Jquery】過去日付をセレクトボックスに表示しない方法

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/09/01 01:41

編集2017/09/02 08:22

初心者です。よろしくお願いします。

###やりたいこと
0. デフォルトで現在日付を選択状態としたい
0. 利用開始日なので過去日付を選択できないようにしたい

###やったこと

HTML

1<form method="post"> 2 <div> 3 <label>利用開始日</label> 4 <div> 5 <select id="year"></select>年 6 <select id="month"></select>月 7 <select id="day"></select>日 8 </div> 9 </div> 10</form>

Javascript

1var time = new Date(); 2var year = time.getFullYear(); 3var selected = ' selected="selected"'; 4 5for (var i = year; i <= year + 5; i++) { 6 $('#year').append('<option value="' + i + '"'+ (i == year ? selected : '') +'>' + i + '</option>'); 7} 8for (var i = 1; i <= 12; i++) { 9 $('#month').append('<option value="' + i + '"'+ (i == time.getMonth() + 1 ? selected : '') +'>' + i + '</option>'); 10} 11for (var i = 1; i <= 31; i++) { 12 $('#day').append('<option value="' + i + '"'+ (i == time.getDate() ? selected : '') +'>' + i + '</option>'); 13}

###つまっているところ
上記やりたいことの1は実現できたのですが2を実現するための実装方法がわかりません。

現在日付を2017年9月2日とした例:

  • 2017年9月2日〜2022年12月31まで選択可としたい

(※Toを+5年としていますがこだわりはなく仮の値としています)

  • 0000年1月1日〜2017年9月1日まで選択不可としたい

エラーが出て詰まっているというわけではなく、選択された年によって選択できる月日を動的に変更したいがその実現方法がわからないという状況です。

よろしくお願いします。

###追記
やりたいこと2の「選択された年によって選択できる月日を動的に変更したい」とはどういうことか、上記例でもう少し詳細に書きます。難しい書き方をしてしまいましたが考え方は単純です。

初期状態で2017年9月2日(現在日付)が選択されていた場合:

  • この状態で月のセレクトボックスを見ると9〜12しか表示されない
  • この状態で日のセレクトボックスを見ると2〜31しか表示されない

→要は過去日を除いて未来日が選択できる状態

上記状態で年を2017から2018年(未来年)に変更した場合:

  • この状態で月のセレクトボックスを見ると1〜12を表示
  • この状態で日のセレクトボックスを見ると1〜31しか表示されない

→要は未来日がすべて選択できる状態

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/09/01 02:28

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
退会済みユーザー

退会済みユーザー

2017/09/02 06:50

ご指摘ありがとうございます!追記いたします!
Tomak

2017/09/02 07:36

「選択された年によって選択できる月日を動的に変更したい」の例をあげて具体的に説明してほしいです。いまいちわかりません。例えば、2018年を選択したら、月と日の初期値が変わるのでしょうか、それとも並びがかわるのでしょうか?月・日を動的に変更する方法(ロジック)は年によってどのようにかわるのでしょうか?
退会済みユーザー

退会済みユーザー

2017/09/02 08:28 編集

ここに書くと見にくいので質問欄に追記しました。よろしくお願いいたします。 一言で言うと質問タイトルの通りとなります。
guest

回答2

0

ベストアンサー

下記で可能かと思います。

js

1var time = new Date(); 2var year = time.getFullYear(); 3var month = time.getMonth() + 1; 4var today = time.getDate(); 5var lastDate = new Date(year, month, 0); // 今月の最終日 6var selected = ' selected="selected"'; 7 8var i; 9 10for (i = year; i <= year + 5; i++) { 11 $('#year').append('<option value="' + i + '"'+ (i == year ? selected : '') +'>' + i + '</option>'); 12} 13for (i = month; i <= 12; i++) { 14 $('#month').append('<option value="' + i + '"'+ (i == month ? selected : '') +'>' + i + '</option>'); 15} 16for (i = today; i <= lastDate; i++) { 17 $('#day').append('<option value="' + i + '"'+ (i == today ? selected : '') +'>' + i + '</option>'); 18} 19 20// 年セレクトボックス変更時イベント 21$('body').on('change', '#year', function (e) { 22 var $year = $(e.target); 23 var $month = $('#month'); 24 var $date = $('#day'); 25 26 var slectedMonth = $month.val(); 27 var slectedDate = $date.val(); 28 29 $month.empty(); 30 $date.empty(); 31 32 // 年が今年なら 33 if (yaer == $year.val()) { 34 for (i = month; i <= 12; i++) { 35 $month.append('<option value="' + i + '"'+ (i == slectedMonth ? selected : '') +'>' + i + '</option>'); 36 } 37 for (i = today; i <= lastDate; i++) { 38 $date.append('<option value="' + i + '"'+ (i == slectedDate ? selected : '') +'>' + i + '</option>'); 39 } 40 } 41 // 年が未来なら 42 else { 43 for (i = 1; i <= 12; i++) { 44 $month.append('<option value="' + i + '"'+ (i == slectedMonth ? selected : '') +'>' + i + '</option>'); 45 } 46 for (i = 1; i <= lastDate; i++) { 47 $date.append('<option value="' + i + '"'+ (i == slectedDate ? selected : '') +'>' + i + '</option>'); 48 } 49 } 50});

投稿2017/09/01 13:06

編集2017/09/02 09:13
Tomak

総合スコア1652

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/09/02 07:13

ご回答ありがとうございます。 おかげさまでやりたいことの1は実現できました。 また、質問への追記修正依頼を受けて質問内容を具体的にしました。 もしお時間ありましたらご確認のほどよろしくお願いいたします。
Tomak

2017/09/02 09:17

回答を編集しました。実際に動かしてないのでバグあるかもしれません。 回答のコードはちょっと重いかもしれません。
退会済みユーザー

退会済みユーザー

2017/09/02 11:52

編集いただいた後のコードを参考にして実装したらうまくいきました! 本当にありがとうございました!
x_x

2017/09/04 08:00

参考にしてコピペする人がいないとも限らないので注意しておくと、そのままでは最終日の取得に問題があり、固まります。
guest

0

むしろ過去しか出してないですよね?

JavaScript

1// for (var i = year; i >= 1900; i--) { 2for (var i = year; i < 2100; i++) {

こういうのは<input type="date">を使えばmin属性で日付まで指定できるのでいいのですが、要件を満たさないのですかね?

投稿2017/09/01 04:23

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/09/02 07:16

ご回答ありがとうございます。 質問への追記修正依頼を受けて質問内容を具体的にしました。 >むしろ過去しか出してないですよね? 失礼しました。コードを修正しました。 >こういうのは<input type="date">を使えばmin属性で日付まで指定できるのでいいのですが、要件を満たさないのですかね? はい、現在のフォーム部品は変更せず(セレクトボックスを使用して)実現したいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問