如何使用 Autoform 以时间格式显示数字？答案

【问题标题】：How can I display a number in time format using Autoform?如何使用 Autoform 以时间格式显示数字？
【发布时间】：2015-11-12 11:17:51
【问题描述】：

我目前正在使用 Autoform 在 Meteor 中制作一个表单，并试图让用户输入他们想要用于事件的时间限制。我当前的架构看起来像下面的示例，但我只是想知道如何更改 timeLimit 对象，以便不只是以“0”格式显示数字，而是以“00:00”格式返回并给我能力在几秒钟内记录信息。

EventSchema = new SimpleSchema({
  name: {
    type: String,
    label: "Event Name"
  },
  timeLimit: {
    type: Number,
    label: "Time Limit"
  },
  rounds: {
    type: Number,
    label: "Rounds"
  }
});

【问题讨论】：

您想要一个可以输入秒数的文本字段吗？他们是否还需要能够输入“00:00”格式？还是您希望他们输入一个并将其转换为另一个？
@AutumnLeonard 抱歉，我想我不够具体。他们需要能够输入格式“00:00”或按下侧面的加号/减号按钮以增加/减少分钟数。

标签： meteor time meteor-autoform

【解决方案1】：

一种方法是为用户输入一个字段，它是“mm:ss”格式的字符串。还有一个计算并显示秒数的字段。

所以在本例中，您将在表单上显示 timeLimitString 字段，以便用户可以输入“mm:ss”格式。并使用timeLimit字段上的autoValue函数计算秒数（本例使用moment.js库计算秒数）；

EventSchema = new SimpleSchema({
  name: {
    type: String,
    label: "Event Name"
  },
  timeLimitString: {
    type: String,
    regEx: // define regex here for "mm:ss" format
  },
  timeLimit: {
    type: Number,
    label: "Time Limit",
    autoValue: function() {
       var string = this.field("timeLimitString");
       if (string.isSet) {
           var time = moment(string.value, "mm:ss");
           var seconds = time.minutes()*60 + time.seconds();
           return seconds;
        }
    }
  },
  rounds: {
    type: Number,
    label: "Rounds"
  }
});

【讨论】：