如何使用 moment.js 从 vuetify v-text-field (type:time) 格式化 v-model 数据？答案

【问题标题】：How to use moment.js to format the v-model data from a vuetify v-text-field (type:time)?如何使用 moment.js 从 vuetify v-text-field (type:time) 格式化 v-model 数据？
【发布时间】：2019-08-17 16:53:27
【问题描述】：

我有这个元素：

<v-text-field
  label="Choose a time"
  type="time"
  mask="time"
  step="1800"
  prepend-inner-icon="access_time"
  v-model="expiryTime"
  :rules="[v => !!v || 'Time is required']"
  required
  @change="getTime"
></v-text-field>

我想触发getTime 方法将v-model 值转换为h:mm 格式。正如我一直在测试的那样，我每次都输入12:00 pm 作为expiryTime 的值，并执行了以下操作：

getTime(){
  alert(moment().format('h:mm')) //returns current time in x:xx format
  alert(this.expiryTime); // Returns '1200'
  alert(moment(this.expiryTime).format('h:mm')); // returns '4:26, expect 12:00
  alert(moment(this.expiryTime, 'h:mm')); // returns 'Sat Aug 17 2019 12:00:00 GMT-0600', expect 12:00

基本上我得到了一些意想不到的值，我不知道为什么。如果我可以在顶部警报中获得当前时间，我会很困惑如何以相同的方式格式化expiryTime 数据最终成为4:26。最后的警报会返回整个时间以及日期等。

谁能解释我如何将expiryTime 数据正确转换为 h:mm 格式？

【问题讨论】：

标签： vue.js time momentjs vuetify.js

【解决方案1】：

moment(String) constructor 采用 ISO 8601 字符串或 RFC2822 date time string。如果没有使用这些标准，则必须将格式指定为构造函数的第二个参数。

expiryTime (1200) 的格式为 hmm，但您已指定 h:mm，这需要在小时和分钟之间使用冒号，moment 才能正确解析日期。解决方法是删除冒号。

console.log(moment(1200, 'hmm').format('h:mm'))
console.log(moment(135, 'hmm').format('h:mm'))
console.log(moment(2001, 'hmm').format('h:mm'))

&lt;script src="https://unpkg.com/moment@2.24.0/moment.js"&gt;&lt;/script&gt;

【讨论】：