Moment.js - 从输入表单创建“时间”唯一变量

Question

您可能认为这很简单，但我有一个<input type="time">，用户在其中输入时间。该字段为我提供以下输出：16:30。所以，基本上它会改变它在输入中的显示方式，即--:-- -- 对应04:30 PM。

（顺便说一句，这是使用 Material 的 Angular 反应形式）

所以，从表单中，我必须使用的字符串是：16:30

我可以把它变成一个像这样的时刻对象：

let timeTwelve = moment(this.webcastForms.value[0].time, 'HH:MM');

我是哪个 console.log 给了我一些大对象。我希望时间很快就会到来，这样我就可以按照我的需要来格式化它。所以，我尝试了：

let timeTwelve = moment(this.webcastForms.value[0].time, 'HH:MM').format('hh:mm A');

输出：invalid date。

不知道它为什么这样做。有任何想法吗？

（奖励，我也有一个日期，我想创建第三个变量，它们都以MM/DD/YYYY hh:mm a (08/26/2016 09:00 AM) 的格式组合在一起。如何将我的时间添加到日期，或者创建一个新的时刻对象，并传入日期和时间？）

感谢您的帮助！

（供参考，我的日期已经过了）

Moment {_isAMomentObject: true, _i: {…}, _isUTC: false, _pf: {…}, _locale: 
    Locale, …}
    _d: Mon Sep 24 2018 00:00:00 GMT-0400 (Eastern Daylight Time) {}
    _i: {year: 2018, month: 8, date: 24}
    _isAMomentObject: true
    _isUTC: false
    _isValid: true
    _locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: 
    "Invalid date", ordinal: ƒ, _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, …}
    _pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -1, charsLeftOver: 0, …}
    __proto__: Object

Answer 1

我相信您使用的格式一定有问题。 moment(this.webcastForms.value[0].time, 'HH:MM');

分钟格式为mm，但您使用MM 表示月份数。尝试将其更改为

moment(this.webcastForms.value[0].time, 'HH:mm').format('hh:mm A');

Answer 2

Moment 给出的日期无效，因为它希望时间与某个日期相关联。

如果您的日期和时间都是字符串，为什么不尝试类似的方法

moment(`${dateStr}T${timeStr}`).format("MM/DD/YYYY hh:mm a")

console.log(moment(`${'2018-04-02'}T${'16:30'}`).format("MM/DD/YYYY hh:mm a"))

/* if date is already moment object */
const time = "16:30".split(':');
const momentObj = moment("2018-04-02"); //creating a moment obj for demo
momentObj.set({hours: time[0], minutes: time[1]});
console.log(momentObj.format("MM/DD/YYYY hh:mm a"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>