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

Question

新的appmaker用户。

我正在尝试移植工作许可批准“app”，我使用G Suite表单+电子表格+ GAS;用户应输入许可证的日期，开始和结束时间。

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

我错过了什么吗？

Answer 1

App Maker的时间选择器

我读了你的问题，并认为我试着扮演我自己的角色，这就是我想出的。我将所有按钮放在pageFragment上并使用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机器上的控件的同时单击每个按钮，同时抓取所有小时按钮，然后单击onClick事件并选择自定义操作并在{{1代码完成不会为您提供文本作为选项，但无论如何键入它。

我刚刚想出了如何通过推动移位并使用鼠标选择一次抓取按钮

使用updateHour(widget.text);和updateMinute(widget.text) 对分钟和秒按钮执行相同的操作。这可以节省您在每个窗口小部件控制面板中输入所有功能的大量时间。你也不必费心给我所有的按钮特殊名称。

但您可能希望使用以下css格式化它们。

  

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

这样你就可以同时设置所有按钮的样式。

我的保存按钮只是将最终字符串复制到主面板上的标签中。

updateSecond(widget.text);

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

预览模式下

Here's a demo:。抱歉24小时制。我总是将它用于我自己的东西，因为它更容易，我喜欢它。你可能想要AM＆amp;下午。我可能会回去做那件事。

对于AM / PM Picker我使用了这些功能：

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

这就是我的选择器：

现在我知道如何使用鼠标轻松选择组件，这是一个休息时间来进行此更改。

Three AppMaker Time Pickers:

Answer 2

此时App Maker不提供开箱即用的时间或日期/时间选择器小部件，这意味着您需要自己实现一个。至少有两种方法可以完成这项任务：

App Maker方式

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

入侵DOM / JS

如果您不担心跨浏览器兼容性，并且您可以通过javascript使用DOM操作，创建事件监听器和其他很酷的东西，那么您可以使用HTML widget和native {{ 3}}或date/time输入，甚至是某些第三方库。

Answer 3

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

正则表达式：

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