Google app maker 如何添加时间小部件/选择器？

这里是appmaker的新用户

我正在尝试移植我用G套件表单+电子表格+气体制作的工作许可审批“应用程序”；用户应输入许可证的日期、开始和结束时间

我可以从论坛示例中看到，日期字段类型是DateTime字段类型，因此我可以在我的模型中使用它。
问题是我在小部件中找不到时间选择器，并且日期框也没有输入时间的选项

---

我遗漏了什么吗？

目前AppMaker没有提供现成的时间或日期/时间选择器小部件，这意味着你需要自己实现一个。至少有两种方法可以完成此任务：

应用程序制造商方式

等待并希望App Maker何时引入时间或日期/时间选择器小部件，或使用现有App Maker小部件模拟时间选择器。可以是一个很好的起点：

侵入DOM/JS

如果您不担心跨浏览器兼容性，并且可以通过javascript操作DOM、创建事件监听器和其他很酷的东西，那么您可以使用和本机或输入，甚至一些第三方库。

App Maker的时间选择器 我读了你的问题，认为我会尝试扮演我自己的角色，这就是我想到的。我将所有按钮放在一个页面片段上，并使用

app.showDialog（app.pageFragments.timePicker2）调用它

我只使用客户端脚本

function updateOutput(){
  var h=app.pageFragments.TimePicker2.properties.hour||'00';
  var m=app.pageFragments.TimePicker2.properties.minute||'00';
  var s=app.pageFragments.TimePicker2.properties.second||'00';
  var t=h + ':' + m + ':' + s;
  app.pageFragments.TimePicker2.descendants.timeLBL.text=t;
  return t;
}
function updateHour(v){
  app.pageFragments.TimePicker2.properties.hour=v;
  updateOutput();
}
function updateMinute(v){
  app.pageFragments.TimePicker2.properties.minute=v;
  updateOutput();
}
function updateSecond(v){
  app.pageFragments.TimePicker2.properties.second=v;
  updateOutput();
}

下面是我的时间选择器的样子：


对。添加所有按钮是一件麻烦事，但是AppMaker有一些特性使得它更容易接受。

首先，您可以指定TimePicker表单属性，我将其用作全局属性。我有三个小时，分和秒

然后，在添加所有小时按钮后，您可以在按住windows计算机上的control键的同时单击每个小时按钮，然后单击onClick事件并选择自定义操作，然后在
updateHour（widget.text）中键入该操作，一次抓取所有小时按钮代码完成不会提供文本作为选项，但可以以任何方式键入文本

我刚刚学会了如何通过按下shift键并用鼠标选择来一次抓住所有按钮

使用
updateMinute（widget.text）
和
updateSecond（widget.text）对分钟和秒按钮执行相同的操作这节省了您在每个小部件控制面板中键入所有功能的大量时间。而且您也不必像我一样费心给所有按钮指定特殊名称

但您可能希望使用以下css对其进行格式化


同样，您可以一次抓住所有按钮并更改以下设置：


这样，您可以一次设置所有按钮的样式

“保存”按钮只是将最后一个字符串复制到主面板上的标签中

app.pages.Testing.descendants.timeLBL2.text=app.pageFragments.TimePicker2.descendants.timeLBL.text;
app.closeDialog();

你可能想做一些更优雅的事情

在预览模式下。对不起，24小时不上班。我总是把它用在我自己的东西上，因为它容易多了，我喜欢它。您可能需要上午和下午。我可能也会回去做那件事

对于AM/PM选择器，我使用了以下功能：

function updateOutputAP(){
  var h=app.pageFragments.TimePicker3.properties.hour||'00';
  var m=app.pageFragments.TimePicker3.properties.minute||'00';
  var s=app.pageFragments.TimePicker3.properties.second||'00';
  var ap=app.pageFragments.TimePicker3.properties.ap||'  ';
  var t=h + ':' + m + ':' + s + ' ' + ap;
  app.pageFragments.TimePicker3.descendants.timeLBL.text=t;
  return t;
}
function updateHourPM(v){
  app.pageFragments.TimePicker3.properties.hour=v;
  app.pageFragments.TimePicker3.properties.ap='PM';
  updateOutputAP();
}
function updateHourAM(v){
  app.pageFragments.TimePicker3.properties.hour=v;
  app.pageFragments.TimePicker3.properties.ap='AM';
  updateOutputAP();
}
function updateMinuteAP(v){
  app.pageFragments.TimePicker3.properties.minute=v;
  updateOutputAP();
}
function updateSecondAP(v){
  app.pageFragments.TimePicker3.properties.second=v;
  updateOutputAP();
}

这就是我的选择器的样子：


现在，我知道了如何用鼠标轻松地拾取组件，进行此更改是一个突破

一个简单的选项是简单地使用文本框并在模型字段中设置验证。
您可以在保存时更新日期对象，也可以按原样使用，具体取决于您的应用程序。您可以利用UI中的自动验证错误来指导用户，只需几秒钟即可完成设置

正则表达式：

\b((1[0-2]|0?[1-9]):([0-5][0-9]) ([AaPp][Mm]))

thnks，我忽略了日历样本！通过这种方法，我可以将时间选择器限制在工作时间内，并使用5分钟的步长，这对我的目标是一件好事。