【GAS】日付計算機能をGASアプリに実装する方法

大分ご無沙汰しています、coto.です。

突然ですが、日数って計算むずかしくないですか？明日の〇日後とか、2週間後とか、3週間後の木曜日、とか。

今回はそんな日付計算をサポートするWebアプリをGASで作成してみました。

Contents

Webアプリ
コード
少し説明
御託

Webアプリ

アプリといってもCSSなどをいじってないので見た目はひどいですが、2つの機能を作ります。

機能①：開始日と終了日を指定してその期間の日数を計算する

機能②：指定日の〇日後を計算する

コード

GASのWebアプリは構築元になるファイルが必要なので適当なスプレッドシートを用意しますが、シートは特にいじりません。

webアプリの見た目になるhtmlと、htmlを表示するためのgsファイルを作ります。（この辺はWebアプリの作り方になるので割愛します）

機能①：htmlに載せるコード

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

  </head>
  <body>

      <h2>期間から日数を計算する</h2>
           <input type="date" id="start" name="start1" class="regis"/>　～　<input type="date" id="end" name="end1" class="regis"/>　は

      <div id="dayresult">   
      </div>
      <div>
    　　　<input type="button" value="計算する" onclick="calcBtn()"/>
　　　　</div>     

<script>

    //▼期間計算の挙動▼
    function calcBtn(){
       var start   = document.getElementById("start").value;
       var start2  = new Date(start);　 
       start2      = new Date(start2.getFullYear(), start2.getMonth(), start2.getDate());     

       var end   = document.getElementById("end").value;
       var end2  = new Date(end);　 
       end2      = new Date(end2.getFullYear(), end2.getMonth(), end2.getDate());  

       var daysa = (end2 - start2)/ 86400000 + 1;  


       var html =  "<p style = 'font-size:2em;'>" + daysa + "日間です</p>";
       document.getElementById('dayresult').innerHTML = html;   //body内のdayresultにここで作ったhtmlを追記
    }


</script>
 </body>
</html>

機能②：htmlに載せるコード

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

  </head>
  <body>
      <h2>日数から期間を計算する</h2>
           <input type="date" id="sta" name="sta1" class="regis"/>　の
           <input type="number" id="days" name="days1" class="regis"/>　日後は

      <div id="dayresult2">   
      </div>
      <div>
    　　　<input type="button" value="計算する" onclick="calcBtn2()"/>
　　　　</div>        

<script>

    //▼日数計算の挙動▼
    function calcBtn2(){
       var start   = document.getElementById("sta").value;
       var days    = document.getElementById("days").value;

       google.script.run.withSuccessHandler(result).makeDay(start, days);  //コード.gsの関数「makeDay」に送って成功したら↓の関数「result」に戻す

    }

    function result(start2){
       var html =  "<p style = 'font-size:2em;'>" + start2 + "です</p>";
       document.getElementById('dayresult2').innerHTML = html;   //body内のdayresult2にここで作ったhtmlを追記
    }


</script>

  </body>
</html>

機能②：gsに載せるコード

//▼日数計算の挙動▼
function makeDay(start, days){
       days = Number(days);
       var start2  = new Date(start);  //startは2023-05-18みたいな文字型なので日付型に変換
       start2      = new Date(start2.getFullYear(),start2.getMonth(), start2.getDate());  //時間情報を削除

       start2.setDate(start2.getDate() + 1);   //指定日数を足す 
       start2  = Utilities.formatDate( start2, "Asia/Tokyo", "yyyy/mm/dd"); 

    return start2;  

}