如何添加时间widget/picker？

Question

这里是新的 appmaker 用户。

我正在尝试移植工作许可审批 "app" 我用 G Suite 表格+电子表格+GAS 制作；用户应输入许可的日期、开始和结束时间。

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

我是不是漏掉了什么？

Answer 1

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

App Maker 方式

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

入侵 DOM/JS

如果您不担心跨浏览器的兼容性，并且可以通过 javascript 的 DOM 操作、创建事件侦听器和其他很酷的东西来弄脏自己的手，那么您可以玩使用 HTML widget and native date/time or time 输入，甚至是一些第三方库。

Answer 2

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 表单属性。我有三个时分秒。

Then after you add all of the hour buttons you can grab all of them at one time by clicking each one while holding down control on a windows machine and click on the onClick event and pick custom action and type this in updateHour(widget.text); the code completion won't give you text as an option but type it any way.

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

使用 updateMinute(widget.text) 和 updateSecond(widget.text); 对分钟和秒按钮执行相同的操作 这可以节省您在每个小部件控制面板中键入所有功能的大量时间。 此外，您不必像我一样费心为所有按钮指定特殊名称。

但您可能希望使用以下 css.

格式化它们

And again you can grab all of the buttons at one time and change the following setting:

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

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

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

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

Here's a demo: 处于预览模式。对不起，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();
}

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

既然我知道如何使用鼠标轻松选取组件，那么进行此更改是一个突破。

Three AppMaker Time Pickers:

Answer 3

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

正则表达式：

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

如何添加时间widget/picker？

How to add time widget/picker?

google-app-maker

App Maker 的时间选择器