（准确地）从用户输入获取时间的首选方法（在UiApp - GAS中）

Question

UiApp有DateBox和DateTimeFormat  为那个班级。但是，没有TimePicker或TimeBox这样的内容，用户可以通过明确指定的方式输入时间，例如使用Google表单：

表单在Chrome与Firefox中的此Widget有不同的行为（我更喜欢Chrome的行为）。无论如何，目前我使用TextBox来获取时间值，有人会按以下方式输入时间值：

12:00或13:50等。这些时间将在24小时制中，以便我可以根据Date创建新的someDate + " " + startTime个对象，作为日历上事件的真正开始时间（这是我目前在我的几个应用程序中使用的过程）。由于几个原因，这显然是不可靠的。

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

我不想强迫我的老板过于谨慎地将他的时间投入到用户界面中，我也想避免重复使用“有效”格式并让UI做很多后端工作（这将是18个正则表达式测试总计，如果有任何失败，我将不得不单独处理它们。

那么，问题：是否有一种有效/首选的方法可以通过TextBox或其他一些界面在UiApp中获取次？

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
}