input要素のtime型の値を取得した後に、加算する方法

Question

input要素にて、
name='stime'の値を取得して+1時間後の値を、
name='etime'に代入したいです。

javascriptにてコードを書いたのですが、
name='stime'の値は取得できたのですが、
ここからの時刻の加算が分かりません。

最終的には、
name='stime'の値が入力される度に
name='etime'が変化するものを実装したいと思います。

アドバイス頂ければ幸いです。
どうぞよろしくお願い致します。

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

var sTime = document.getElementById("stime").value;
console.log(sTime);
//09:00

Answer 1

すんまへん。便利なもん使うて楽させてもらいますぅ。

const [stimeInput, etimeInput] = document.getElementsByTagName('input');

stimeInput.addEventListener('change', ({ target: { value } }) => {    
  etimeInput.value = dayjs(value, 'HH:mm').add(1, 'hour').format('HH:mm');
});

➡ サンプル

Comments

[退会済みユーザー]

ありがとうございます。

さっそく実装してみましたが、
エラーが発生しました。
もし原因がわかれば教えてくださいぅ。

エラー：
The specified value "Invalid Date" does not conform to the required format. The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.

コード：
document.addEventListener('DOMContentLoaded', function() {
const stimeInput = document.getElementById("stime");
const etimeInput = document.getElementById("etime");

stimeInput.addEventListener('change', ({ target: { value } }) => {
etimeInput.value = dayjs(value, 'HH:mm').add(1, 'hour').format('HH:mm');
});
});

[退会済みユーザー]

dayjs で HH:mm 形式の時刻の文字列をパースさせるには、

CustomParseFormat
https://day.js.org/docs/en/plugin/custom-parse-format

というプラグインが必要なのですが、これを追加していないか、または、プラグインの追加設定がうまくいっていないかもしれません。

ちなみに、回答に載せたサンプルで、一行目に

dayjs.extend(dayjs_plugin_customParseFormat);

としているのが設定で、dayjs_plugin_customParseFormat という変数を使うためにdayjs本体

https://unpkg.com/dayjs@1.8.21/dayjs.min.js

だけではなく、

https://unpkg.com/dayjs@1.8.21/plugin/customParseFormat.js

をCDNから読み込んでいます。

[退会済みユーザー]

教えていただきありがとうございました。

＞https://unpkg.com/dayjs@1.8.21/plugin/customParseFormat.js
を追加で読み込んだら上手くできました。

新しい視点をご丁寧に回答いただき、
本当にありがとうございました。
勉強になりました。

Answer 2

基本的には、stime 要素 input イベントか change イベントで stime 要素の valueAsNumber (valueではありません) に 60 * 60 * 1000 を足して etime 要素の valueAsNumber にセットすれば良いでしょう。

ユーザはstime要素の値を消して空の状態することができるので、そのへんの対処もする必要があります。そのケースは、stime 要素の value が空文字列、またはstime要素のvalueAsNumber が NaN で判定することができます。

Comments

[退会済みユーザー]

教えていただき誠にありがとうございます。

以下のコードで実装できました。

stime.addEventListener('change', (event) => {
var sTime = document.getElementById("stime").valueAsNumber;
var eTime = sTime +(60 * 60 * 1000);
document.getElementById("etime").valueAsNumber = eTime;
});

空の状態の対処は、
これから考えます。

ご丁寧に教えていただき
誠にありがとうございました。