【GAS】特定の日の「翌日」をinput type dateの初期値にする方法

どうもcoto.です。
今回はスプレッドシートから読み込んだ日付の「翌日」を、Webアプリ上に設置したinput type=’date’ の初期値に設定する方法のご紹介。ジャンル的にはGASというよりJavascriptかもしれません。

Contents

やりたいこと
用意するものとコード
1. 用意するもの
2. コード
結果と少し解説
御託

やりたいこと

GasのWebアプリで作業記録などをつけていくことを想定しています。
「今回の作業では〇月〇日～×月×日分まで終了しました」みたいなやつです。

そういった場合スプレッドシートでは下の図のようになります。
しかし、「赤枠に入る日はほとんど青枠の翌日（6/26）。だけど100％じゃないから一応input type=’date’で選択もできるようにしておきたいんだよな」みたいなことありませんか。

今回はこれを解決したいと思います。

用意するものとコード

用意するもの

・基準になる日付が入ったスプレッドシート
・input type=’date’を置いておくHTML (index.html）

コード

今回はGASといいつつhtmlファイルしか使いません。

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

  </head>
  <body>

   <? 
    const ss      = SpreadsheetApp.openById("●●●●●●●●●●●");     //スプレッドシートIDを指定
    const sheetDB = ss.getSheetByName("test");                             //シートtestを開く

    var date = sheetDB.getRange("D4").getValue();         //基準の日付が入っているセルデータを取得
    var xday = new Date(date.getFullYear(), date.getMonth(), date.getDate());    //基準の日付を時間なしの日付形式で取得
    xday.setDate(xday.getDate() + 1);                     //基準の日付の翌日を計算
    xday = Utilities.formatDate(xday, 'Asia/Tokyo', 'yyyy-MM-dd');   //初期値にするためにyyyy-MM-ddの形に整える
  ?>

    今回の開始日：<input type="date" value= "<?= xday ?>"/>


  </body>
</html>