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

UiApp拥有和 为了那个班。但是，没有像

时间选择器

或

时间框

这样的东西，用户可以通过谷歌表单等指定方式输入时间：

在Chrome和Firefox中，表单对于这个小部件有不同的行为（我更喜欢Chrome的行为）。无论如何，目前我正在使用

文本框

获取时间值，其中有人会以以下方式输入时间值：

12:00

或

13:50

等。这些时间是24小时制，因此我可以基于

someDate+“”+startTime

创建新的

Date

对象，它将作为日历上事件的实际开始时间（这是我目前在工作中的几个应用程序中使用的过程）。由于几个原因，这显然是不可靠的

例如：如果用户在

HH:MM:SS

中输入了除有效的24小时表示之外的任何内容，则日期创建将失败

我不想强迫我的老板对他如何将时间输入到UI中过于谨慎，我还想避免regexing“有效”格式和让UI做大量后端工作（总共有18个regex测试，如果有失败的话，我必须单独处理）

---

那么，问题是：在UiApp中有没有一种有效的/首选的获取时间的方法，或者通过

文本框

或者其他一些界面？

类似的东西呢？测试应用程序（使用新版本更新，请参阅编辑）

代码如下：

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
}

函数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（框架）；
var h=app.createListBox（）.setId（'h'）.setName（'h'）.setStyleAttributes（{'margin'：'5px'））.addChangeHandler（handler）；
对于（var n=0；不，我的天哪……这是非常详细和美妙的……但我想知道这是否可以集成到18个不同的“小部件”（我想是嵌入式框架）？例如，我有9个编辑/培训课程，既有开始时间又有结束时间。我可以（理论上）吗将它包装成一个函数，并让它返回某种类型的
面板
，它将替换我当前使用的（
TextBox
）？简短回答：可以！（听起来很熟悉；）可以编写一个包装版本，将索引作为输入参数（在处理程序中标识var名称）这将返回一个带有小时和日期的面板。如果需要，您还可以修改它以添加标签字符串。谢谢Serge，您太棒了！还有一个问题-您认为这会导致大量开销吗？我担心，因为我有多达9个调用
getEventSeriesById
，总共需要3-6秒运行，取决于有多少。我可能会创建一个“获取详细信息”函数运行时显示的标签，只是为了表明事情正在发生。我只是不希望我的老板必须等待10秒才能加载一个项目，而我正在接近这个数字，加载它确实会变得很关键…试试看，我用包装好的代码更新了我的答案，并更新了演示。无论如何，我希望很多人会偶然发现这个问题——在我看来，这个实现是获取时间值（甚至还有日期！）的最佳方法。在问这个问题之前，我犹豫了一分钟，因为DateJS始终是时间的选项，但我想避免使用外部库。因此，再次感谢！
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
}