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

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

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

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

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;
}