急いでいます！

フォームで開始時間と終了時間の二つのselectボックスを表示させたい

締切済

質問者：まめまめまめまめこ
質問日時：2018/08/16 21:36
回答数：2件

前回の質問で、「現在時刻を取得してフォームのselectのプルダウンを30分間隔で表示する」ことはできたのですが、
もう一つ同じselectボックスを表示させて開始時間と終了時間で選択できるフォームをつくりたいのですが、どのようにすればいいでしょうか？
どなたかご教示お願いします！

babu_babu_babooさんにご回答していただきました⇩
「現在時刻を取得してフォームのselectのプルダウンを30分間隔で表示する」
<!DOCTYPE html>
<meta charset="UTF-8">
<title>ES2015がすでにあるというのに</title>
<style>
</style>

<body>
<form id="hoge">
<select id="fuga"></select>
</form>

<script>

function* getTime (count = 0, D = new Date, step = 30) {
　const
　　zp = n => ('0' + n ).slice (-2);

　while (count--) {
　　let
　　　H = D.getHours ();
　　　M = D.getMinutes ();

　　yield [
　　　zp (H),
　　　zp (M)
　　].join (':');

　　D.setMinutes (M + step);
　}
}

const select = document.querySelector ('#fuga');
　
//for (let e of select.childNodes) e.remove ();

for (let t of getTime (10))
　select.appendChild (new Option (t, t));

以上、よろしくお願いします

ご回答有難うございます。
説明不足で申し訳ありません。

開始時間と終了時間のセレクトがあり、
終了時間のセレクトは、開始時間の選択した時間から30分間隔で表示したいです。

開始時間のセレクトは作成できたので、終了時間のセレクトの作成方法を教えていただけないでしょうか。
どうぞよろしくお願いします！！！

No.1の回答に寄せられた補足コメントです。補足日時：2018/08/17 09:40
通報する

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： babu_babu_baboo
回答日時：2018/08/17 16:27

>説明不足で申し訳...

終了時間は、どこまで表示するのか？
ましてや、最初にだれかが指摘していたけれど、日付けが変わったらどうするのか？
などなど。

作成を丸投げするんだから、きっちりと仕様書をかくべき！
回答が付くかは別だけれど。
回答者側もできるだけ汎用性をもたせて書くべきですね。

方法3)
for (let t of getTime (10,今から30分後のDateオブジェクト))

このヒントで動かせないのならあきらめて！

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2018/08/17 01:01

こんばんは

＞開始時間と終了時間で選択できるフォームをつくりたいのですが、
＞どのようにすればいいでしょうか？
同じものをふたつつくりたいということでしょうか？

1）出来上がったものを後で複製してしまう。
　select.parentNode.appendChild (select.cloneNode(true));
ただし、IDも複製されてしまうので、重複しないようにIDを用いずにセレクタをクラス等に変えておく必要があります。

2）空のセレクト要素をもうひとつ用意しておいて（例えばselect2とします）同時に作成してしまう。
同じループのなかで
　select2.appendChild (new Option (t, t));