Question

我想创建一个类似谷歌日历的TimeBox，使用Google Apps脚本，但没有createTimeBox方法，我该怎么办？

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

我没有找到关于创建下拉时间选择的UiApp方法与Google日历的时间相同

Answer 1

您可以创建一个小时的自定义列表框，列表分钟框以及上午/下午之间的选择。假设您想要使用日期+时间进一步做一些事情，您需要将小时数和分钟数转换为毫秒数并将它们添加到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;
}

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

Answer 2

这是Bryan脚本的变体，带有一个或两个小改进来处理case小时= 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;
}

如何创建下拉时间选择

2 个答案: