google-apps-script - 如何创建下拉时间选择

Question

我想用 Google Apps Script 创建一个类似于 Google Calendar 的 From time 的 TimeBox，但是没有createTimeBox办法，我该怎么办？

使用createDateBox()方法我可以创建一个扩展的日历选择，但我不知道如何创建一个下拉时间选择。

我还没有找到UiApp 与谷歌日历的从时间相同的创建下拉时间选择的方法

Answer 1

这是 Bryan 脚本的一个变体，有一个或两个小改进来处理 case hour=0 和 dateBox 上的验证器，以防止在未选择日期时抛出错误。

function doGet() {
  var app = UiApp.createApplication();
  var hpanel = app.createHorizontalPanel();
  var dateBox = app.createDateBox().setId('dateBox').setName('dateBox');
  var hour = app.createListBox(false).setId('hour').setName('hour')
  for(h=0;h<13;++h){hour.addItem(h)}

  var min = app.createListBox(false).setId('minute').setName('minute')
  .addItem('00').addItem('15').addItem('30').addItem('45');  // ADD ALL THE MINUTES YOU WANT

  var amPm = app.createListBox(false).setId('am').setName('amPm')
  .addItem('AM').addItem('PM');

  var dateTimeLabel = app.createLabel('',false).setId('dateTimeLabel');
  var submit = app.createButton('Submit').setId('submit');

  // SUBMIT HANDLERS
  var handler1 = app.createClientHandler().validateMatches(dateBox, '2','g').forEventSource().setEnabled(false);
  var handler2 = app.createServerHandler('showDate').validateMatches(dateBox, '2','g').addCallbackElement(hpanel);
  submit.addClickHandler(handler1).addClickHandler(handler2);

  hpanel.add(dateBox).add(hour).add(min).add(amPm).add(submit);
  app.add(hpanel).add(dateTimeLabel);
  return app;
}

function showDate(e) {
  var app = UiApp.getActiveApplication();
  var date = e.parameter.dateBox;
  var timeZone = date.toString().substr(25,6)+":00";  // timezone of this date according to script TZ
  var hour = Number(e.parameter.hour);  // TURN INTO NUMBER
  var min = Number(e.parameter.minute); // TURN INTO NUMBER
  var amPm = e.parameter.amPm;
  if (amPm == 'PM' ){hour = hour+12};  // ADD 12 HOURS TO PM HOURS
  if (hour == 24){hour = 0 ;amPm='AM'};  // HANDLE 24 HOUR CORRECTLY
  var newDate=new Date(date)
  newDate.setHours(hour,min,0,0);//set hours minutes sec and milliSecs
  var newDate = Utilities.formatDate(newDate, timeZone, 'MM/dd/yy hh:mm aaa');
  app.getElementById('dateTimeLabel').setText(newDate);
  app.getElementById('submit').setEnabled(true);
  return app;
}

Answer 2

您可以创建自定义小时列表框、分钟列表框以及上午/下午之间的选择。假设您想要进一步处理日期+时间，您需要将小时数和分钟数转换为毫秒并将它们添加到 date.getTime() 中。

演示

function doGet() {
  var app = UiApp.createApplication();
  var hpanel = app.createHorizontalPanel();
  var dateBox = app.createDateBox().setId('dateBox').setName('dateBox');
  var hour = app.createListBox(false).setId('hour').setName('hour')
  .addItem(1).addItem(2).addItem(3);  // ADD ALL THE HOURS YOU WANT

  var min = app.createListBox(false).setId('minute').setName('minute')
  .addItem('00').addItem('15').addItem('30').addItem('45');  // ADD ALL THE MINUTES YOU WANT

  var amPm = app.createListBox(false).setId('am').setName('amPm')
  .addItem('AM').addItem('PM');  

  var dateTimeLabel = app.createLabel('',false).setId('dateTimeLabel');
  var submit = app.createButton('Submit').setId('submit');

  // SUBMIT HANDLERS
  var handler1 = app.createClientHandler().forEventSource().setEnabled(false);
  var handler2 = app.createServerHandler('showDate').addCallbackElement(hpanel);
  submit.addClickHandler(handler1).addClickHandler(handler2);

  hpanel.add(dateBox).add(hour).add(min).add(amPm).add(submit).add(dateTimeLabel);
  app.add(hpanel);
  return app;
}

function showDate(e) {
  var app = UiApp.getActiveApplication();
  var date = e.parameter.dateBox;
  var timeZone = date.toString().substr(25,6)+":00";  // SCRIPT TIME ZONE
  var dateMilli = date.getTime();  // GET MILLISECONDS OF DATE PICKED
  var hour = parseInt(e.parameter.hour);  // TURN INTO NUMBER
  var amPm = e.parameter.amPm;
  if (amPm == 'PM' && hour != 12) hour = hour + 12;  // ADD 12 HOURS TO PM HOURS, EXCEPT 12PM
  if (hour == 12 && amPm == 'AM') hour = 0;  // HANDLE 12AM HOUR CORRECTLY
  var hourMilli = hour * 3600000;  // # OF MILLISECONDS IN 1 HOUR 
  var minMilli = parseInt(e.parameter.minute) * 60000;  // # OF MILLISECONDS IN 1 MIN
  var milliTotal = dateMilli + hourMilli + minMilli; // ADD ALL MILLISECOND TOGETHER

  // PUT TOTAL MILLISECONDS INTO A NEW DATE AND CREATE CUSTOM FORMAT
  // THIS MIGHT NOT BE THE USER'S BROWSER TIME ZONE 
  var newDate = Utilities.formatDate(new Date(milliTotal), timeZone, 'MM/dd/yy hh:mm aaa');
  app.getElementById('dateTimeLabel').setText(newDate);
  app.getElementById('submit').setEnabled(true);
  return app;
}

如果您需要在他们的浏览器时区中向用户显示日期+时间 - 您需要提前知道他们的时间并在脚本属性中进行设置。除非有办法以编程方式自动调整脚本时区......？