moment.jsで時間の差を計算してみた

先日moment.jsを使って時間の計算をしてみました。
メモ代わりに記載してみます。
初心者の忘備録的なメモなので、
コード長いし
コード汚いし
変数名もどんどん意味不明です。
お時間ある方はどうぞお付き合い下さい。

moment.jsの準備

今回はCDNから読み込みました。

試しに書いてみる！

##今日の表示

var today = moment();
//これだけでもう今日の情報取得！

//見やすく表示
var todayFormat = today.format("YYYY年MM月DD日(ddd)");
//2020年2月17日(月)

あんなに苦労して日にち取得していたのに...moment()に感動！！

##昨日の表示

var yesterday = today.subtract(1, "days");
//これで今日から１日マイナス=昨日、になる

昨日も一瞬で出せる、凄い・・・

#時間の計算をしてみる
私がしたかったのは、「選択した特定の時間-選択した特定の時間」でした。
ここでは「Time1ーTime2」とします。

##htmlとjqueryの準備

<!--Time1の選択画面-->
<select class="Day1">
  <option value="0" selected>選択してください</option>
  <option value="" class="today"></option>
  <option value="" class="yesterday"></option>
  <option value="" class="two_days_ago"></option>
  <option value="" class="three_days_ago"></option>
</select>
<!--上記の要領で今日から３日前までを取得,2020年2月17日(月)と表示出来るようにformatされている-->
<select class="Hour1">
  <option value="0" selected>選択してください</option>
     <!-- 00-23 -->
</select>
   時<br/>
<select class="Minute1">
  <option value="0" selected>選択してください</option>
     <!-- 00-59 -->
 </select>
   分<br/>

<!--Time2の選択画面(Time1のクラス名変更しただけ）-->
<select class="Day2">
  <option value="0" selected>選択してください</option>
  <option value="" class="today"></option>
  <option value="" class="yesterday"></option>
  <option value="" class="two_days_ago"></option>
  <option value="" class="three_days_ago"></option>
</select>
<!--上記の要領で今日から３日前までを取得,2020年2月17日(月)と表示出来るようにformatされている-->
<select class="Hour2">
  <option value="0" selected>選択してください</option>
     <!-- 00-23 -->
</select>
   時<br/>
<select class="Minute2">
  <option value="0" selected>選択してください</option>
     <!-- 00-59 -->
 </select>
   分<br/>

// ゼロフィル関数（1を01と表示する）
function zeroFill(number) {
  return ("0" + number).slice(-2);
}

// 時間をoptionにいれる（0 - 23時 / 0 - 59分）
function timeOption(number, target) {
  for (let i = 0; i <= number; i++) {
    let html = "<option value>" + zeroFill(i) + "</option>";
    target.append(html);
  }
}

timeOption(23, $(".Hour1"));
timeOption(59, $(".Minute1"));
timeOption(23, $(".Hour2"));
timeOption(59, $(".Minute2"));

これで今日から３日間で好きな日にちと時間を選択できるようになりました！

##moment.jsで計算

// Time1をmoment()に入れるための処理

//選択された日時を表示
  var day1 = $(".Day1 option:selected").text();
  var hour1 = $(".Hour1 option:selected").text();
  var min1 = $(".Minute1 option:selected").text();

//moment()に入れるために、年、月、日、を/に変えて曜日を消す
  var dayA = day1.replace("年", "/");
  var dayB = dayA.replace("月", "/");
  var dayC = dayB.replace("日", "");
  var dayCom = dayC.slice(0, 10);

//moment()に入れるための日時
  var day1Time = dayCom + "-" + hour1 + ":" + min1;

//やっとmoment()に入れる！
var Day1Com = moment(day1Time);

同じ事をDay2でも繰り返します

// Time2をmoment()に入れるための処理

//選択された日時を表示
  var day2 = $(".Day2 option:selected").text();
  var hour2 = $(".Hour2 option:selected").text();
  var min2 = $(".Minute2 option:selected").text();

//moment()に入れるために、年、月、日、を/に変えて曜日を消す
  var day2A = day2.replace("年", "/");
  var day2B = day2A.replace("月", "/");
  var day2C = day2B.replace("日", "");
  var day2Com = day2C.slice(0, 10);

//moment()に入れるための日時
  var day2Time = day2Com + "-" + hour2 + ":" + min2;

//やっとmoment()に入れる！
var Day2Com = moment(day2Time);

これで基本となるTime1とTime2をmoment()に入れて計算出来る下準備ができました。
計算します。

diff()で簡単に時間差を計算出来ますが、時間、分、秒、いずれか表示になります。
つまり時間差が69分の場合、

var DayMin = Day2Com.diff(Day1Com, "hours");
//1
var DayMin = Day2Com.diff(Day1Com, "minutes");
//69
var DayMin = Day2Com.diff(Day1Com, "seconds");
//4140

上記の場合1時間9分と表示させたかったので、表示方法を変えました。

//時間差を時間と分で出します
var DayHour = Day2Com.diff(Day1Com, "hours");
//1
var DayMin = Day2Com.diff(Day1Com, "minutes");
//69

//DayHourを分にします
var DayHour_toMin = 60 * DayHour;
//1*60=60
//
var DayMM = DayMin - DayHour_toMin;
//69-60=9

//最後の表示
val html=DayHour + "時間" + DayMM + "分"
//1時間9分

日にちまたいだ計算も恐らくこれで出来るはずです。
(今の所自分で試している範囲ではバグは生じていません）
#感想
単純に好きな日時ー好きな日時をしたいなと思っただけだったのに、意外と大変で驚きました笑
コードが長い！
コードが汚い！
変数名も意味不明！
となっています。
もっと良い方法もありそうなんですが・・・
自分の中では相当力技感が否めません・・・

間違っているとか、もっと違う方法あるよ、等あれば教えて頂ければ幸いです。