javascript - 使用 Google Apps 脚本从 html5 时间和日期输入创建日历事件？

Question

我有一个应用程序，它使用 html 服务来基本上创建个人工作时钟。我可以成功地将开始日期和时间以及结束日期和时间以及注释写入电子表格。我还可以提取电子表格数据并显示应用程序的最近类次表。

问题是当我尝试创建日历事件时。这是我到目前为止所拥有的。

<h1>When Did I Work?</h1>

<div>
  <form id='timeClock'>


 <p class='in'>Date In: <input type="date" id="dateIn" name="dateIn"></p>

<p class='in'>Time In: <input id="clockIn" type="time" name="clockIn" value="23:00:00">   </p>


<p class='out'>Date Out: <input type="date" id="dateOut" name="dateOut"></p>

 <p class='out'>Time Out: <input id="clockOut" type="time" name="clockOut" value="07:30:00"></p>


<textarea name="note"></textarea>

<p><input type='submit'value="Submit"></p>

</form>

<h3 class='hide'>Submitted:</h3>
<p id='dayIn'></p>
<p id='timeIn'></p>
<p id='dayOut'></p>
<p id='timeOut'></p>
<p id='noteSum'></p>

 <? var data = displayData(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
  <tr>
    <? for (var j = 0; j < data[i].length; j++) { ?>
      <td><?= data[i][j] ?></td>
     <? } ?>
  </tr>
<? } ?>
</table>

<a href="" target="_blank">Open SpreadSheet</a> 

/div>
<?!=HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



<script>
$(document).ready(function(){



$('#timeClock').submit(function(){

    var dateIn = $('#dateIn').val();
    var timeIn = $('#clockIn').val();
    var dateOut = $('#dateOut').val();
    var timeOut = $('#clockOut').val();
    var note = $('textarea').val();

       google.script.run.withSuccessHandler(function(ret){
        $('#timeClock').slideUp();
        $('.hide').show().text("Submitted: ");
        $('#dayIn').text("Date In: " + dateIn);
         $('#timeIn').text("Time In: " + timeIn);
         $('#dayOut').text("Date Out: " + dateOut);
         $('#timeOut').text("Time Out: " + timeOut);
         $('#noteSum').text("Note: " + note);

           console.log(ret);
        }).sendClock(this);

       google.script.run.withSuccessHandler(function(ret){
         console.log(ret);
         }).logHours(this);

  });

});
</script>



 Code.gs
function doGet() {
  var html = HtmlService.createTemplateFromFile("index")
             .evaluate().setTitle('whendidiwork')
             .setSandboxMode(HtmlService.SandboxMode.NATIVE);
  return html;
}

function sendClock(form){
  var ss = SpreadsheetApp.openByUrl('').getSheets()[0];
  ss.insertRowAfter(1);
  var range = ss.getRange(2, 1, 1, 5);
  var values = [[ form.dateIn, form.clockIn, form.dateOut, form.clockOut, form.note]];
  range.setValues(values);
  Logger.log(values);

  return values;
}

function displayData(){
  var ss = SpreadsheetApp.openByUrl('').getSheets()[0];
  var data = ss.getSheetValues(1, 1, 7, 5);
  Logger.log(data);
  return data;

}

function logHours(form){
  var event = CalendarApp.getDefaultCalendar().createEvent('work hours', new Date(form.dateIn + form.clockIn),
                                                           new Date(form.dateOut + form.clockOut),{description: form.note});
 Logger.log(event);
  return event;
}

Answer 1

[用户回答了自己的问题，但编辑了问题而不是回答。我试图通过将他的编辑复制到社区维基答案中来挽救它]

我终于想出了如何让它发挥作用。这是我改变的。在提交函数中，我像这样格式化了输入值。

var start = new Date(dateIn+ " " +timeIn).toString();
var end = new Date(dateOut+ " " +timeOut).toString();

这是服务器调用。

google.script.run.withSuccessHandler(function(ret){
  console.log(ret);
}).logHours(start, end, note);

这是code.gs函数

function logHours(start, end, note){
   var event = CalendarApp.getCalendarById("").createEvent('TFO: ' + note, new Date(start), new Date(end), {description: note});
   return event;
 }

其余代码。

<form id='timeClock'>
  <p class='in'>Date In: <input type="date" id="dateIn" name="dateIn"></p>
  <p class='in'>Time In: <input id="clockIn" type="time" name="clockIn" value="23:00:00">   </p>
  <p class='out'>Date Out: <input type="date" id="dateOut" name="dateOut"></p>
  <p class='out'>Time Out: <input id="clockOut" type="time" name="clockOut" value="07:30:00"></p>
  <textarea name="note"></textarea>
  <p><input type='submit'value="Submit"></p>
</form>

<script>
  $(document).ready(function(){
    $('#timeClock').submit(function(){
      var dateIn = $('#dateIn').val();
      var timeIn = $('#clockIn').val();
      var dateOut = $('#dateOut').val();
      var timeOut = $('#clockOut').val();
      var note = $('textarea').val();

      google.script.run.withSuccessHandler(function(ret){
        $('#timeClock').slideUp();
        $('.hide').show().text("Submitted: ");
        $('#dayIn').text("Date In: " + dateIn);
        $('#timeIn').text("Time In: " + timeIn);
        $('#dayOut').text("Date Out: " + dateOut);
        $('#timeOut').text("Time Out: " + timeOut);
        $('#noteSum').text("Note: " + note);

        console.log(ret);
      }).sendClock(this);

      google.script.run.withSuccessHandler(function(ret){
        console.log(ret);
      }).logHours(this);
    });
  });
</script>

代码.gs

function doGet() {
  var html = HtmlService.createTemplateFromFile("index")
             .evaluate().setTitle('whendidiwork')
             .setSandboxMode(HtmlService.SandboxMode.NATIVE);
  return html;
} 


function logHours(form){
  var event = CalendarApp.getDefaultCalendar().createEvent('work hours', new Date(form.dateIn + form.clockIn),
                                                           new Date(form.dateOut + form.clockOut),{description: form.note});
  Logger.log(event);
  return event;
}