[GAS][JavaScript]日付の取扱い、htmlで入力した日付とスプレッドシートから取得した日付の比較を行いたい

前提・実現したいこと

HTMLで作成したフォームで日付を入力する。
入力した日付と一致するセルがスプレッドシートにあるか調べる。
→ ここで詰まった。
日付が一致した行の任意列の値を配列に詰め、htmlに返す。
配列の値をhtmlのSelectBoxに設定。

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

日付の書式が違う？為うまく比較することができない。

試したこと

1.html上でhtmlで入力した日付をテキストボックスに表示
→ 2018-12-29と表示
2.スプレッドシートから読み取った値をStringに変換して比較
→ 効果なし
3.スプレッドシートから読み取った値をDate型に変換して比較
→ 効果なし
4.スプレッドシートから読み取った値をDate型に変換後、フォーマットをyyyy-mm-ddに変換して比較
→ 効果なし
5.html上で入力した日付をDate型に変換しGAS

該当のソースコード

html
1<!doctype html>
2<html>
3	<head>
4		<base target="_top">
5	</head>
6    
7    <script type="text/javascript">
8    ///////////////////////////////////////////////////////////////////////////////
9    /////  定数の宣言                                                           /////
10    ///////////////////////////////////////////////////////////////////////////////
11    // 1日に立卓する最大卓数
12    // シナリオ名受信に使用、不足なら増やすこと。
13    MAX_SESSION_NUM = 50;
14    
15    // メッセージコード
16    // メッセージと対応を取ること。
17    var MESSAGE_CODE =
18    {
19        TEXT_RESET             : 0,
20        SESSION_NUM_OVER       : 1,
21        SESSION_NOT_REG        : 2,
22        GUIDE_SELECT_SNR       : 3,
23    };
24
25    // メッセージ
26    // メッセージコードと対応をとること。
27    var MESSAGE_LIST = 
28    [
29       "サーバ処理終了待ちです",
30       "指定日の卓が多すぎます。管理者に問い合わせて下さい。",
31       "指定日に登録されている卓はありません。",
32       "シナリオを選択してください。",
33    ];
34    
35    ///////////////////////////////////////////////////////////////////////////////
36    /////  GAS呼出後実行する関数                                                 /////
37    ///////////////////////////////////////////////////////////////////////////////
38    // 日付探索
39    function CallGas_SearchSenarioByDate(ret)
40    {
41      // 一致する行の最大数超過時
42      if(ret == false)
43      {
44        OutputMessage(MESSAGE_CODE.SESSION_NUM_OVER);
45      }
46    }
47    ///////////////////////////////////////////////////////////////////////////////
48    /////  JavaScript内サブルーチン                                             /////
49    ///////////////////////////////////////////////////////////////////////////////
50    // Selectの要素全削除
51    function RemoveSelectBoxOption(control)
52    {
53    	if (control.hasChildNodes())
54        {
55	    	while (control.childNodes.length > 0)
56            {
57				control.removeChild(control.firstChild)
58            }
59        }
60    }
61    
62    // Selectの要素追加(配列)
63    function AddSelectBoxOption(control,arrData)
64    {
65        //配列をセレクトボックスにセットする
66        for(var i=0;i<arrData.length;i++)
67        {
68            let op = document.createElement("option");
69            op.value = "";      //value値
70            op.text = arrData[i];   //text値
71            control.appendChild(op);
72        }
73    };
74    
75    // メッセージ出力
76    function OutputMessage(MessageCode)
77    {
78        document.getElementById("txtDebug").value
79         = MESSAGE_LIST[MessageCode];
80    }
81    
82    ///////////////////////////////////////////////////////////////////////////////
83    /////  HTMLでの処理                                                        /////
84    ///////////////////////////////////////////////////////////////////////////////
85    // 日付が選択された時
86    function DateSet()
87    {
88      // セレクトボックスの初期化
89      RemoveSelectBoxOption(document.getElementById("selSenarioName"));
90      gs_SearchDateErr = 0;
91      
92      // 日付行の取得
93      var arrData = Array(MAX_SESSION_NUM);
94      arrData.fill("");
95      
96      var dateTemp = document.getElementById("txtSelectDate").value;
97      
98      google.script.run
99             .withSuccessHandler(CallGas_SearchSenarioByDate)
100             .SearchSenarioByDate(dateTemp, arrData);
101             
102      // データの確認
103      if(String(arrData[0]) == "")
104      {
105         OutputMessage(MESSAGE_CODE.SESSION_NOT_REG);
106      }
107      else if(gs_SearchDateErr != 1)
108      {
109        // 日付行のシナリオ名情報をSelectBoxに追加
110        AddSelectBoxOption(document.getElementById("selSenarioName"),arrData);
111        OutputMessage(MESSAGE_CODE.GUIDE_SELECT_SNR);
112      }
113    }
114    
115    </script>
116    
117	<body>
118		<form>
119			<p>
120			セッション選択<br>
121			     開催日　　<input type="date" value="" id="txtSelectDate" onchange="DateSet()"><br>
122                 シナリオ名<select id="selSenarioName" onchange="SenarioSet()" disabled>
123			                 <option value=""></option>
124			                 </select>
125                 
126			</p>
127			<!--- 中略 --->
128            <p>              
129				実行結果　
130                 <input type="text" value="" id="txtDebug"><br>
131			</p>
132			<p>
133            <a href = "https://script.google.com/macros/s/URL_ID/exec?p=index">メイン画面へ戻る</a><br>
134			</p>
135		</form>
136	</body>
137</html>

JavaScript
1function SearchSenarioByDate(date,cellVal)
2{
3  // データベースファイル
4  var sheet
5   = SpreadsheetApp
6      .openById(DATABASE_FILE_NAME)
7      .getSheetByName(DATABASE_SS_MAIN);
8
9  // Hit件数
10  var nSerchHit = 0;
11  
12  //受け取ったシートのデータを二次元配列に取得
13  var dat = sheet.getDataRange().getValues();
14  
15  // 値の探索、値が見つかった場合行数を返却
16  for(var i = 0; i < dat.length;i++)
17  {
18    if(i > cellVal.length)
19    {
20      return false;
21    }
22    var dateTemp = new dat[i][DATABASE_START_DATE_COL - 1];
23    
24    if(dateTemp == date)
25    {
26      // シナリオ名を配列に格納
27      cellVal[nSerchHit] = dat[i][DATABASE_SENARIO_NAME_COL - 1];
28      nSerchHit++;
29    }
30    else
31    {
32      if(nSerchHit != 0)
33      {
34        break;
35      }
36    }
37  }
38  
39  return true;
40}

papinianus

2018/12/30 05:18

詰まっているのはfalseが返されることですか？if(i > cellVal.length)のifブロックは意味的に妥当なチェックでしょうか？こいつがfalseを返している？

papinianus

2018/12/30 06:20 編集

違うかな。適切なリターンをしていない、受け取ってないから何も起こらないということでは？以前にも書いたように非同期を投げた直後のスクリプトはawaitしてないので(gasではできない)、サーバ応答を待たずに処理してarrData[0]が必ず空の判定が成り立ちます。また、サーバとクライアントで配列は参照渡しできないので、成功時ハンドラで返り値を受けましょう

Arisa.Sunagawa

2018/12/30 15:51

成功時ハンドラが起きてから次へ進む（処理終わるまで待ってくれる）と勘違いしてました。配列を戻り値とすること、成功時ハンドラ内にarrData[0]の比較等を入れることの2点修正してみます。

行動規範の内容に同意します

回答2件

自己解決

papinianusさんの指摘事項を修正することで動作しました。

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

投稿2019/01/01 03:26

Arisa.Sunagawa

総合スコア16

比較については変数dateに何が入っているかによりますが、下記部分はひとまず new Date() を使うことになります。

js
1// var dateTemp = new dat[i][DATABASE_START_DATE_COL - 1];
2//                     ↓                                        ↓
3   var dateTemp = new Date( dat[i][DATABASE_START_DATE_COL - 1] );

【Spreadsheetでの日付と、Google Apps ScriptでのnewDate()】
https://jjnurburg.com/newdate/

【Google Apps ScriptでのDateオブジェクトの各生成方法、日付と時刻を分ける】
https://tonari-it.com/gas-date-object/

投稿2018/12/29 17:44

kei344

総合スコア69625

Arisa.Sunagawa

2018/12/30 00:30

dateはhtmlのテキストボックス <input type="date" value="" id="txtSelectDate" onchange="DateSet()"> への入力値です。以下のように取得しています。 date＝document.getElementById("txtSelectDate").value; また、以下の関数でＧＡＳへデータを渡しています。 google.script.run .withSuccessHandler(CallGas_SearchSenarioByDate) .SearchSenarioByDate(date, arrData);