javascript - (准确)从用户输入获取时间的首选方法(在 UiApp - GAS 中)

Question

UiApp有DateBox和 DateTimeFormat 对于那个类(class)。但是，不存在诸如 TimePicker 或 TimeBox 这样的东西，用户可以通过明确指定的方式(例如通过使用 Google 表单)输入时间:

在 Chrome 和 Firefox 中，Forms 对于这个小部件有不同的行为(我更喜欢 Chrome 的行为)。无论如何，目前我正在使用 TextBox 来获取时间值，有人会通过以下方式输入时间值:

12:00 或 13:50 等。这些时间采用 24 小时制，以便我可以创建新的 Date 基于 someDate + ""+ startTime 的对象，该对象将充当日历上事件的真实开始时间(这是我当前在工作中的几个应用程序中使用的过程)。由于多种原因，这显然不可靠。

例如:如果用户在 HH:MM:SS 中输入除有效 24 小时表示形式之外的任何内容，则日期创建将会失败。

我不想强制我的老板对如何将时间输入 UI 过于谨慎，而且我也想避免重新调整“有效”格式并让 UI 执行大量后端工作(总共有 18 个正则表达式测试，如果有任何失败，我就必须单独处理它们)。

那么，问题:在 UiApp 中是否有一种有效/首选的方法来获取时间，无论是通过 TextBox 还是其他接口(interface)？

Answer 1

类似的事情怎么样？测试应用程序here (已更新新版本，请参阅编辑)

代码如下:

function doGet() {
  var app = UiApp.createApplication().setTitle('enter time');
  var frame = app.createVerticalPanel().setStyleAttributes({'border':'solid 1px #AA6','background-color':'#FFD','padding':'15px'});
  var handler = app.createServerHandler('setTime').addCallbackElement(frame);
  var h = app.createListBox().setId('h').setName('h').setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
  for(var n=0;n<12;n++){h.addItem(Utilities.formatString('%02d', n),n)}
  var m = app.createListBox().setId('m').setName('m').setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
  for(var n=0;n<60;n++){m.addItem(Utilities.formatString('%02d', n),n)}
  var am = app.createListBox().setId('am').setName('am').setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
  am.addItem('AM').addItem('PM');
  var date = app.createDateBox().setValue(new Date()).setFormat(UiApp.DateTimeFormat.DATE_LONG).setName('date').addValueChangeHandler(handler);
  var label = app.createHTML('<b>StartTime *</b><br>When your reservation starts').setStyleAttributes({'fontSize':'10pt','font-family':"Arial, sans-serif",'padding-bottom':'10px'});
  var subFrame = app.createHorizontalPanel().setStyleAttributes({'border':'solid 1px #AA6','background-color':'#FFD','padding':'5px'});
  var result = app.createHTML().setId('date').setStyleAttributes({'fontSize':'10pt','font-family':"Arial, sans-serif",'color':'#AA6','padding-top':'20px'})
  .setHTML(Utilities.formatDate(new Date(new Date().setHours(0,0,0,0)), Session.getTimeZone(), 'MMM-dd-yyyy    HH:mm'));
  frame.add(date).add(label).add(subFrame).add(result);
  subFrame.add(h).add(m).add(am);
  return app.add(frame);
}

function setTime(e){
  var app = UiApp.getActiveApplication();
  var date = app.getElementById('date')
  var date = new Date(e.parameter.date);
  var am = e.parameter.am
  if(am=='AM'){am=0}else{am=12};
  var h = Number(e.parameter.h)+am;
  var m = Number(e.parameter.m);
  date.setHours(h,m,0,0)
  Logger.log(date);
  app.getElementById('date').setHTML(Utilities.formatDate(date, Session.getTimeZone(), 'MMM-dd-yyyy    HH:mm'));
  return app
}

<小时/>

编辑:这是封装版本以及带有网格和 10 个面板的演示。

function doGet() {
  var app = UiApp.createApplication().setTitle('enter time');
  var grid = app.createGrid(10,2)
  var handler = app.createServerHandler('setTime').addCallbackElement(grid);
  var varName = 'date';
  var htmlString = '<b>StartTime *</b> When your reservation starts'
  for(var idx=0 ; idx<10;idx++){
    var frame = pickDate(idx,varName,htmlString,handler);
    grid.setText(idx, 0, 'test widget '+idx+' in a grid').setWidget(idx,1,frame);
  }
  var result = app.createHTML('<h1>Click any widget</h1>').setId('result');
  return app.add(grid).add(result);
}


/* wrapped version
** takes a var name + index + label string + handler
** as input parameter
** The same handler will be used for every occurrence , the source being identified in the handler function (see code example below)
** and returns a selfcontained widget that you can add to a panel or assign to a grid
** or a flex Table
*/
function pickDate(idx,varName,htmlString,handler){
  var app = UiApp.getActiveApplication();
  var frame = app.createVerticalPanel().setStyleAttributes({'border':'solid 1px #AA6','background-color':'#FFD','padding':'1px', 'border-radius':'5px'});
  var h = app.createListBox().setId('h'+idx).setName('h'+idx).setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
  for(var n=0;n<12;n++){h.addItem(Utilities.formatString('%02d', n),n)}
  var m = app.createListBox().setId('m'+idx).setName('m'+idx).setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
  for(var n=0;n<60;n++){m.addItem(Utilities.formatString('%02d', n),n)}
  var am = app.createListBox().setId('am'+idx).setName('am'+idx).setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
  am.addItem('AM').addItem('PM');
  var date = app.createDateBox().setValue(new Date()).setFormat(UiApp.DateTimeFormat.DATE_LONG).setId(varName+idx).setName(varName+idx).addValueChangeHandler(handler);
  var label = app.createHTML(htmlString).setStyleAttributes({'fontSize':'10pt','font-family':"Arial, sans-serif",'padding-bottom':'3px'}).setId('html'+idx);
  var subFrame = app.createHorizontalPanel().setStyleAttributes({'border':'solid 1px #AA6','background-color':'#FFE','padding':'1px', 'border-radius':'4px'});
  frame.add(label).add(date).add(subFrame);
  subFrame.add(h).add(m).add(am);
  return frame;
}

function setTime(e){
//  Logger.log(JSON.stringify(e));
  var app = UiApp.getActiveApplication();
  var idx = Number(e.parameter.source.replace(/\D+/,''));
  Logger.log('date'+idx+ '  > '+e.parameter['date'+idx]);
  var date = new Date(e.parameter['date'+idx]);
  var am = e.parameter['am'+idx];
  if(am=='AM'){am=0}else{am=12};
  var h = Number(e.parameter['h'+idx])+am;
  var m = Number(e.parameter['m'+idx]);
  date.setHours(h,m,0,0)
  app.getElementById('result').setHTML('<h1>Widget Nr '+idx+' has value '+Utilities.formatDate(date, Session.getTimeZone(), 'MMM-dd-yyyy    HH:mm')+'</h1>');
  return app
}