javascript - Moment.js - Creating "time" only variable from input form - Stack Overflow

admin管理员组

文章数量:1386401

you'd think this would be straightforward, but I have an <input type="time"> where the user puts a time in. That field gives me the following output: 16:30. So, basically it changes the way it appears in the input, which is --:-- -- for 04:30 PM.

(btw, this is an Angular reactive form using Material)

So, from the form, the string I have to work with is: 16:30

I can kind of turn it into a moment object like this:

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

Which is I console.log gives me some kind of big object. I was hoping the time would then be in moment so I could format it how I need to. So, I tried with:

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

which outputs: invalid date.

No clue why it's doing this. Any ideas?

(Bonus, I have a date too, and I'd like to create a third variable that's both bined in the format of MM/DD/YYYY hh:mm a (08/26/2016 09:00 AM). How can I add my time to a date, or maybe make a new moment object, and pass in the date and also time?)

Thanks for any help!

(for reference, my date is a moment already)

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

you'd think this would be straightforward, but I have an <input type="time"> where the user puts a time in. That field gives me the following output: 16:30. So, basically it changes the way it appears in the input, which is --:-- -- for 04:30 PM.

(btw, this is an Angular reactive form using Material)

So, from the form, the string I have to work with is: 16:30

I can kind of turn it into a moment object like this:

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

Which is I console.log gives me some kind of big object. I was hoping the time would then be in moment so I could format it how I need to. So, I tried with:

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

which outputs: invalid date.

No clue why it's doing this. Any ideas?

(Bonus, I have a date too, and I'd like to create a third variable that's both bined in the format of MM/DD/YYYY hh:mm a (08/26/2016 09:00 AM). How can I add my time to a date, or maybe make a new moment object, and pass in the date and also time?)

Thanks for any help!

(for reference, my date is a moment already)

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

• javascript
• angular
• momentjs
• angular-reactive-forms

Share Improve this question Follow edited Sep 24, 2018 at 16:03 Kenny asked Sep 24, 2018 at 15:52 KennyKenny 2,15444 gold badges3333 silver badges6565 bronze badges 1

• How does the console.log object look like (where you mentioned it in the question)? And what exactly is the value of this.webcastForms.value[0].time ? Did you miss the 'am/pm' format? Also, what version of momentjs are you using? – amal Commented Sep 24, 2018 at 15:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Moment is giving invalid date since it expects time to be associated with some date.

If your date and time both are string why don't you try something like

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./ajax/libs/moment.js/2.22.2/moment.min.js"></script>

i believe there must be a problem in the format you are using. moment(this.webcastForms.value[0].time, 'HH:MM');

format for minutes is mm but you used MM which is for month number.Try changing it to

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

本文标签： javascriptMomentjsCreating quottimequot only variable from input formStack Overflow