使用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答案中来挽救它]

我终于想出了如何使它起作用。 这是我改变的。 在Submit函数中，我像这样格式化输入值。

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>

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