<input>要素 time型へ自動入力する方法について

Question

HTMLの<input>要素の自動入力について、
教えて頂きたいことがあります。

実現したいことは、以下のtime型にて、
name='stime'が入力されたら、自動で、name='etime'が+1時間後で入力される、ことになります。
（例:10:00と入力されたら、11:00と自動で入力される）

おそらく、Javascriptでの実装になると思われますが、
自身、Javascriptが不慣れのため、参考コードを教えて頂けると幸いです。
よろしくお願い致します。

<input type='time' name='stime' value='09:00' required>
<input type='time' name='etime' value='10:00' required>

Comments

[m.ts10806]

不慣れでもまず自身が調べたこと試したことを記載されたほうが良いかと。

[m.ts10806]

あと「PHP」との関連性は何でしょうか。

Answer 1

• stime の要素を得て変数に入れる
• その要素の change イベントリスナで以下の処理をする (inputイベントでもいいかも)

** その要素の valueAsNumber プロパティを読んで、それが NaN ではない場合、3600000 を足して、etime 要素を得てその valueAsNumber プロパティにセットする

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。
フローは大変、参考になり、
学習の道しるべとなりました。ありがとうございました。

Answer 2

HTMLInputElement#valueAsDate

1. input[name=stime] ノードの valueAsDate プロパティを変数 sTime に代入
2. sTime.getHours() に1加算した値を Date#setHours() する
3. input[name=etime] ノードの valueAsDate プロパティに「2.」を代入する

• HTMLInputElement - Web API | MDN
• Date.prototype.getHours() - JavaScript | MDN
• Date.prototype.setHours() - JavaScript | MDN

Re: sanechan さん

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。
フローは大変、参考になり、
さっそく実装してみたいと思います。