【GAS】datetimepicker 日付のみ選択したい LINE Bot

Question

前提・実現したいこと

GASで
datetimepicker 日付のみ選択したい。
のですが
どうしても日付選択はできるようにはなるのですが
選択後動作しなくなる

発生している問題・エラーメッセージ

どうしても日付選択はできるようにはなるのですが
選択後、動作しなくなる

該当のソースコード

function doPost(e) {
  var event = JSON.parse(e.postData.contents).events[0]
  var replyToken = event.replyToken;
  var eventtype = event.type;
  if (typeof replyToken === 'undefined') {
    return;
  } 
  var messageText = "";
  if (eventtype == "postback") {
    messageText = event.postback.params.datetime;
  } else {
    messageText = event.message.text;
  }
  var cache = CacheService.getScriptCache();
  var type = cache.get("type");

  if (type === null) {
    //予定の追加
    if (messageText === "予定の追加") {
      cache.put("type", 1);
      //開始日時の質問
      pushDatePicker("　　開始日を入力してください", replyToken);
      //今日、７日間の予定の取得 
    } else if (messageText.match("今日の予定")) {
      reply(replyToken, getEvents());
    } else if (messageText.match("今週の予定")) {
      reply(replyToken, notifyWeekly());
    } else {
      //処理方法 の返答 
      replyPlans(replyToken, "「予定の追加」で予定追加します。", "「今日の予定」で今日の予定をお知らせします。", "「今週の予定」で7日間の予定をお知らせします。");
    }
  } else {
    //キャンセル処理 
    if (messageText === "キャンセル") {
      cache.remove("type");
      reply(replyToken, "予定追加のキャンセルをしました");
      return;
    }

    switch (type) {
      case "1":
        //開始日時の追加
        if (messageText.match(dateExp2)) {
          var [matched, start_month, start_day] = messageText.match(dateExp2);
          cache.put("type", 2);
          cache.put("start_month", start_month);
          cache.put("start_day", start_day);

          //終了日時の質問
          var year = new Date().getFullYear();
          var startDate = new Date(year, cache.get("start_month") - 1, cache.get("start_day"));
          //pushDatePicker("開始日は\n"+ EventFormat(startDate) + "\nですね。\n\n次に予定の終了日時をお知らせください。", userId);
          pushDatePicker("　　次に終了日を入力してください。", replyToken);

          break;
        } else {
          reply(replyToken, "予定追加処理中です。\n「キャンセル」\nで追加作業をキャンセルします。");
          break;
        } 
      case "2":
        // 終了日時の追加
        if (messageText.match(dateExp2)) {
          var [matched, end_month, end_day] = messageText.match(dateExp2);
          cache.put("type", 3);
          cache.put("end_month", end_month);
          cache.put("end_day", end_day);
          //予定名の質問
          var year = new Date().getFullYear();
          var endDate = new Date(year,cache.get("end_month")-1, cache.get("end_day"));

          reply(replyToken, "終了日時は\n"+EventFormat(endDate)+"\n ですね。\n\n最後に予定名を教えてください。");
          break;
        }else{
          reply(replyToken,"予定追加処理中です。\n「キャンセル」\nで追加作業をキャンセルします。");
          break;
        }
      case "3":
        //最終確認 
        cache.put("type", 4);
        cache.put("title", messageText);
        var [title, startDate, endDate] = createData(cache);
        //予定追加の確認
        replyPlans(replyToken, "【予定名】："+title,"開始予定日：\n"+EventFormat(startDate)+"\n終了予定日：\n"+
          EventFormat(new Date(endDate.setDate(endDate.getDate() - 1))),
          "予定を追加しますか？\n「はい」か「いいえ」でお知らせください。");
        break;
      case "4":
        if (messageText === "はい") {
          cache.remove("type");
          var [title, startDate, endDate]=createData(cache);
          CalendarApp.getDefaultCalendar().createAllDayEvent(title, startDate, endDate);
          reply(replyToken,"お疲れ様です☺️\nGoogleカレンダーに予定を追加しました！????");
        } else if (messageText === "いいえ") {
          cache.remove("type");
          reply(replyToken, "予定の追加をキャンセルしました。");
        } else {
          reply(replyToken, "「はい」か「いいえ」でお答えください。");
          break;
        }
        break;
    }   
  }
}


function pushDatePicker(message, replyToken) {
  var url = "https://api.line.me/v2/bot/message/reply";
  UrlFetchApp.fetch(url, {
    "headers": {
      "Content-Type": "application/json; charset=UTF-8",
      "Authorization": "Bearer "+ CHANNEL_ACCESS_TOKEN,
    },
    "method": "post",
    "payload": JSON.stringify({
      "replyToken": replyToken,
      "messages": [
        {
          "type": "template",
          "altText": "datetime_picker",
          "template": {
            "type": "buttons",
            "thumbnailImageUrl": "https://placehold.jp/80/78cffa/0a0a0a/640x480.png?text=%E4%BA%88%E5%AE%9A%E6%97%A5%E3%81%AE%E8%BF%BD%E5%8A%A0&css=%7B%22border-radius%22%3A%2215px%22%2C%22font-family%22%3A%22%20'arial%20black'background%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20left%20bottom%2C%20from(%23666666)%2C%20to(%23fffff))%22%7D", // 画像のURL
            "imageAspectRatio": "rectangle", // 画像のアスペクト比、「rectangle: 1.51:1」・「square: 1:1」、デフォルト値はrectangle
            "imageSize": "cover", // 画像の表示形式
            "imageBackgroundColor": "#FFFFFF", // 画像の背景色
            "title": "【予定日の追加】",
            "text": message,
            "defaultAction": {
              "type": "uri",
              "label": "View detail",
              "uri": "https://www."
            },
            "actions": [
              {
                "type": "datetimepicker",
                "label": "ここをタップ！",
                "data": "action=settime",
                "mode": "date",
                "initial": Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy-MM-dd"),
                // "max": "2018-01-24t23:59",
                // "min": "2017-12-25t00:00"
              }
            ]
          }
        }
      ],
      "notificationDisabled": false // trueだとユーザーに通知されない
    }),
  });

  return// ContentService.createTextOutput(JSON.stringify({ "content": "postok"})).setMimeType(ContentService.MimeType.JSON);

}

// createData(cache)他
// --->略 （現状から変えなくてよいはず）

function createData(cache) {
  var year = new Date().getFullYear();
  //var year = 2020;
  var title = cache.get("title");
  var startDate = new Date(year, cache.get("start_month") - 1, cache.get("start_day"));
  var endDate = new Date(year, cache.get("end_month") - 1, cache.get("end_day"));
  endDate = new Date(endDate.setDate(endDate.getDate() + 1));
  return [title, startDate, endDate];
}

function EventFormat(Date) {
  var y = Date.getFullYear();
  var m = Date.getMonth() + 1;
  var d = Date.getDate();
  var w = Date.getDay();
  var weekname = ['日', '月', '火', '水', '木', '金', '土'];
  m = ('0' + m).slice(-2);
  d = ('0' + d).slice(-2);
  return y + '年' + m + '月' + d + '日 (' + weekname[w] + ')\n';
}

function replyPlans(replyToken, message, message2, message3) {
  var url = "https://api.line.me/v2/bot/message/reply";
  UrlFetchApp.fetch(url, {
    "headers": {
      "Content-Type": "application/json; charset=UTF-8",
      "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
    },
    "method": "post",
    "payload": JSON.stringify({
      "replyToken": replyToken,
      "messages": [{
        "type": "text",
        "text": message,
      },{
        "type": "text",
        "text": message2,
      },{
        "type": "text",
        "text": message3,
      }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({"content": "post ok"})).setMimeType(ContentService.MimeType.JSON);
}

function reply(replyToken, message) {
  var url = "https://api.line.me/v2/bot/message/reply";
  UrlFetchApp.fetch(url, {
    "headers": {
      "Content-Type": "application/json; charset=UTF-8",
      "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
    },
    "method": "post",
    "payload": JSON.stringify({
      "replyToken": replyToken,
      "messages": [{
        "type": "text",
        "text": message,
      }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({"content": "post ok"})).setMimeType(ContentService.MimeType.JSON);
}

//今日の予定
function getEvents() {
  var events = CalendarApp.getDefaultCalendar().getEventsForDay(new Date());
  var body = "今日の予定は\n";

  if (events.length === 0) {
    body += "ありません。";
    return body;
  }

  body += "\n";
  events.forEach(function(event) {
    var title = event.getTitle();
    body += "????" + title + "\n";
  });
  body += "\nです！";
  return body;
}

//７日間の予定
function notifyWeekly() {
  var  body = "1週間の予定は\n\n";
  var weekday = ["日", "月", "火", "水", "木", "金", "土"];
for ( var i = 0;  i < 7;  i++ ) {

  var dt = new Date();
  dt.setDate(dt.getDate()+i);
  var events = CalendarApp.getDefaultCalendar().getEventsForDay(dt);
  body += Utilities.formatDate(dt, "JST", '???? MM/dd(' + weekday[dt.getDay()] + ')') + "\n";
  if (events.length === 0) {
    body += "ありません。\n";
  }

  events.forEach(function(event) {
    var title = event.getTitle();
    body += title + "\n";
  });
}
  return body;
}

function HmFormat(date){
  return Utilities.formatDate(date, "JST", "HH:mm");
}

試したこと

 "actions": [
              {
                "type": "datetimepicker",
                "label": "ここをタップ",
                "data": "action=settime",
                "mode": "datetime",
                "initial": Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy-MM-dd'T'HH:mm"),
                // "max": "2018-01-24t23:59",
                // "min": "2017-12-25t00:00"

を

 "actions": [
              {
                "type": "datetimepicker",
                "label": "ここをタップ！",
                "data": "action=settime",
                "mode": "date",
                "initial": Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy-MM-dd"),
                // "max": "2018-01-24t23:59",
                // "min": "2017-12-25t00:00"

に書き換えたが、
日付のみにはなったが
その後BOTからの返信がなくなる

補足情報（引用記事になります！）

引用記事になります
https://developers.line.biz/ja/reference/messaging-api/#datetime-picker-action

Comments

[draq]

GAS側でなにかエラーになっているだけでしょう。GAS側のソースを提示しないと誰にもわかりません。

[SA-KYO]

修正致しました！
よろしくお願い致します。

[draq]

ソースが全然足りません。LINEアプリで日付が選択された場合、postbackがボット側に飛んでくるのでそこでなにをやっているかが重要です。doPost以降なにをやっているかわからないとよくわかりません。
というかエラーがおきていないかをまず調べて質問に記載してください。

[SA-KYO]

実行ログで確認しても
動作が完璧の時も
エラーが出るので
今回のエラーがどこか特定できませんでした、、、
すみません、、、

コピペミスでした。
再度修正致しました。
よろしくお願い致します。

Answer 1

最後の書き換え

"actions": [
              {
                "type": "datetimepicker",
                "label": "ここをタップ！",
                "data": "action=settime",
                "mode": "date",
                "initial": Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy-MM-dd"),
                // "max": "2018-01-24t23:59",
                // "min": "2017-12-25t00:00"

ここまではｏｋだと思います。

ただ前回質問からさらに変えないといけない部分が２箇所あり

-var dateExp2 = /(\d+)-(\d+)T\d+:\d+/;
+var dateExp2 = /\d+-(\d+)-(\d+)/;

および

  if (eventtype == "postback") {
-    messageText = event.postback.params.datetime;
+    messageText = event.postback.params.date;

  } else {
    messageText = event.message.text;
  }

に変えないといけません。
"mode": "datetime"を設定して日付選択アクションを出し、ユーザーが日付と時刻を入力すると、
event.postback.params.datetime に、「2021-08-24T12:34」 のような形式で値が返ってきます。

"mode": "date"に変えると、ユーザーは日付だけ入力すればよくなりますが
event.postback.params.date に、「2021-08-24」 のような形式で値が返ってきます。

（このことは、ドキュメントの日時選択アクション-日付と日時の形式と日時選択アクションのpostback.paramsオブジェクトに書いてあります）

|mode設定値|日時データ格納場所(event.postback.〜)|日時データの形式|正規表現リテラルの例（月と日を抽出）|
|:--|:--|:--|
|"mode": "datetime"|params.datetime|2021-08-24T12:34|/(\d+)-(\d+)T\d+:\d+/|
|"mode": "date"|params.date|2021-08-24|/\d+-(\d+)-(\d+)/|
||||

---

dateExp2　も「2021-08-24」の形式に合うように変えないといけません。

Comments

[SA-KYO]

自分で解決できず甘えて
質問ばかりで本当にすみませんでした。
本当にありがとうございます。
これからは公式ドキュメントや
記事や参考書なども落ち着いて焦らず
読んでいけたらと思います。

しかし、
qnoirさんの
解説やご指摘は本当に
わかりやすく、あっている箇所や
訂正箇所など至らない事ばかりの自分に
丁寧にお答えくださりありがとうございました。

しばらくは少し落ち着いて
勉強しながら実装していきたいと思います。

またどうしても時がありましたら
厚かましいですが
よろしくお願い致します。

本当にありがとうございました。